Events in PWAs. The install and fectch events

The events in PWAs.md

About

This app is an implementation of a PWA example from github. It will teach the basics of PWAs and the right ways to build, I guess.

Things to try out

1. Put the css in a custom css folder
2. Add a manu and some other pages

Caching Assets

This is done in the install event listener.

• The code is put in a callback
• The caches API method open is called
• It returns a Promise which a .then() is attached to
• A callback is added which returns another method called caches.addAll()
• This caches.addAll() has the array of assets as its argument It end up looking like this https://gist.github.com/fffcefaa2e252918ddfa07522bddd94f

Fetching Assets

You would need to fetch assets when offline. This is done in the fetch event listener https://gist.github.com/feac0d25709d1bb74bc681b7796f6aa3

• A fetch request is sent by the DOM to the Browser
• The SW listens to this event
• It responds by checking if any request matches the cache.
• If true, .then() return that asset to the browser or just fetch the request from the server.