The manifest files is a single json file that provides information about the application to the browser, like the name of the app or the color theme or whether it should be installed on the home screen etc.
To add it to your application create a file called manifest.json in the root of the project.
Then you need to link the manifest file to all the pages in the application by creating a link tag in the head section.
On IOS devices the icons and theme_color in the manifest file is not supported yet.
To get this working we need to add more link tags in the head.
The service worker is the hard of a PWA, it runs in the background on a separate thread in the browser.
If the SW is not updated it will not re-register and install the SW again. Updating the SW will only happen if there is changes in the SW file. If there is an update the SW will be installed but it will stay in waiting untill all instances of the app is closed.
Create a sw.js file in the root of the application. In the main app js file register the sw.
In the sw.js listen for the install event,
In the sw.js listen for the activate event,
You can also listen to the fetch events, which means you can intercept any request to a server for files and do something with it, like caching files or responding withh cached versions of a file.
This is the ability to store assets and dynamic content in cache so that the SW can fetch it from the cache when offline.
This is done in the install event.
This is done in the fetch event.
At the moment if we change anything in the assets like adding a html element to the index page it will not reflect these changes, because the service worker are not reinstalled, so it still fetches the old files from cache. We need to change the version of the cache so that the SW can be reinstalled when there is changes. We also then need to delete the old cahces.
Add a version number to the caceh name.
Loop through the caches and delete the old caches.
Caching other assets dynamically,
Returning a response when offline for a page that haven't been visited while online. Make sure to create fallback html page that you would like to serve to the user. Then we can just add a catch method in the fetch event to return the fallback page incase we are offline.
Create function that can delete items from the cache.
Then call this function in the fetch event where you put items in the cache.