PWA

6.1 PWA Concept Review

Module Still Under Development

Cache API Review

To review the concepts and code behind using the Cache API I created this review document on Github Gists (opens new window)

The Gist gives examples of each Cache task and explains sequencing of methods and how to do each task.

Service Worker Fetch Review

To review the concepts behind creating Service Workers and handling the Fetch event I created this review document and code sample (opens new window).

It includes a markdown file with an explanation of caching strategies, approaches to handling fetch events, and security errors that can occur.

There is also a collection of files for a project that uses a service worker to handle the web page differently depending on whether or not it is online and depending on what kinds of files are being requested.

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.

Demo Video

Here is the demo video that outlines the functionality for the PWA Project.

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