PWA

6.1 PWA Concept Review

Module Still Under Development

Filtering Cache Matches

By default, when you save an HTTP Response with the Cache API, if the querystring is different then it will be a separate entry in the Cache. For example, these four urls:

http://localhost:3000/index.html?name=steve
http://localhost:3000/index.html?name=tony
http://localhost:3000/index.html?name=adesh
http://localhost:3000/index.html?name=gerry

will each be saved as a different entry.

So, when you want to find a match, you may need to consider or ignore the querystring portion. The cache match and matchAll methods include a options object, that let you modify the search

caches.open('mycache').then((cache) => {
  let req = new Request('http://localhost:3000/index.html?name=tony');
  //find the first match regardless of querystring value
  cache.match(req, { ignoreSearch: true }).then((response) => {
    //one match or null
  });
  //find the first match that includes the correct querystring
  cache.match(req, { ignoreSearch: false }).then((response) => {
    //one match or null
  });
  //find ALL the matches ignoring the querystring
  cache.matchAll(req, { ignoreSearch: true }).then((responses) => {
    //array of all matches
  });
});

The other side of this is the saving process. When you are saving items in the cache maybe you want to strip off the querystring because you don't want to end up with dozens of copies of the same page in your cache.

Say for example the user visits the product's page on the website three times. Each time is to get the details of a different product.

http://localhost:3000/products?product_id=123456
http://localhost:3000/products?product_id=765432
http://localhost:3000/products?product_id=999999

Now, let's assume that the HTML that loads in the page is always the same. After the page loads, a fetch call is made using the product id from the querystring. The fetch call loads the data and updates the display. Since the original HTML is the same every time and there are potentially thousands of product ids, why would you want to save every copy of the file in the cache, just because the querystring changes.

So, in your service worker, you need to check for the value of the pathname of the URL and create a new URL without the querystring to use as the key for the response.

The following example uses the cacheFirst caching strategy

self.addEventListener('fetch', (ev) => {
  let url = new URL(ev.request);
  if (url.pathname == '/products') {
    //request for the /products page
    ev.respondWith(
      caches.open('mycache').then((cache) => {
        return (
          cache.match(ev.request, { ignoreSearch: true }) ||
          fetch(url).then((fetchResponse) => {
            let copy = response.clone();
            //remove the querystring
            url.searchParams = new URLSearchParams();
            //save in the cache with emptied querystring
            cache.put(url, copy);
            //return the fetched file
            return fetchResponse;
          })
        );
      })
    );
  } else {
    //all other requests... just pass through
    ev.respondWith(fetch(ev.request));
  }
});

So, now if the user visits the /products page, we check the cache first. If the file is there (ignoring the querystring value of the request), then return the cached file.

If the file is not in the cache, then fetch the file, create a clone copy of the response and save it in the cache using the same URL but without the querystring. The original file response gets sent back to the browser.

PWA Project

To build a PWA there are a number of things that we to include.

1. A manifest.json file that defines all the settings, base colours, and icons for the App which can be used when installed.
2. The icons outlined in the manifest.json file.
3. CSS to create a responsive design for the app.
4. A service worker that handles all the HTTP Requests made by the web page.
5. Cache that holds copies of files to be used when the App is offline.
6. A 404 type page is stored in the Cache, which you can display if a link to a web page is clicked and that link is not in your cache.

Tips

Generating Ids

When you need to generate a new id for an person, an idea, or a file, you can use the built-in JavaScript crypto.randomUUID() method. Using Date.now() is an alternative approach that will create a unique value to use as an id.

Filenames

When you create file names, remember that every file needs a unique name. The filename that is used in the Cache will be the same name that is used for the Export.

The crypto.randomUUID() or Date.now() are both good ways to create a unique value to use as part of the filename.

ToDo This Week

To Do this week

• read all the content for modules 6.1 and 6.2
• Read through the details of the PWA Project.
• Finish your Hybrid Web Component exercise