The indecator below shows if you are online of offline.

Go offline and try to reload the page, it should still load perfectly fine!

Online/Offline Status

Checking status...

How it works...

This page, after loading it for the first time, will continue to be able to be loaded even while offline.
This will continue to be the case until you clear the browser's cache. However, if you install this webpage as a PWA, it will have its own cache, and the clearing of the browser's cache will not affect it.

Every subsequential visit to this site will load from the cache while also attempting to load from the internet in the background.
This means that in order to update the PWA with new content from the web, you must load the PWA by opening it, thn close it, and open it again.


Requirements...

You first will want to clone this repository and change certain aspects about the index.html, styles.css, and script.js files that you want.
Then you can focus on which pages to cache.

In order to cache your own pages, you must change the list of PRECACHE_URLS found in the service-worker.js file.
Any file that you have in that list will automatically be cached and updated when neded.
That should be the only aspect you should change in the service-worker.js file.

Additionally, you may want to change certain aspects of the manifest.json file.
These aspects are pretty self explanitory, but they are used in case someone tries to install your website as a PWA.