This is simple and not too elegant solution to make your web page accessible offline after opening it 2 times online.
First time page is loaded, service worker is registered, but by the time it is, page has likely already finished loading.
Second time, service worker takes control, and for every file requested by browser, it stores a copy in local cache.
Every next time, whenever file is requested, worker tries to get it from online source, and resorts to cached copy if it fails.
Note: Refreshing page with Ctrl+F5
bypasses service worker.
Well, yes, see advanced usage below, but you have to list every file to cache manually.
Just put service-worker.js
along with your index page (usually index.html
) and add following right before </body>
:
<script>
window.navigator.serviceWorker.register("./service-worker.js", {scope : "./"})
</script>
With this, basic caching mechanism explained above is set in action.
You can modify service-worker.js
, adding relative links to files of your project, like this:
const forceCache = [
"./index.html",
"./main.css",
"./index.js",
]
Files listed this way will be added to cache upon service-worker registering. You can also list files that are not requested on page's load but might be needed later.
Just modify cacheName
constant in service-worker.js
:
const latestCache = "v2"
Next time this service-worker is installed, files that were cached under old cacheName
and were not under new one will be forgotten.
Just set cacheFirst
constant in service-worker.js
to true
:
const cacheFirst = true
You can add event listener to navigator.serviceWorker
's message
event.
Messages will have an object with type
set to fetch
or got
and url
to requested url. In case of got
there will also be cache
field that's set to true
if file was fetched from cache.
service-worker-loader.js
has this scenario covered in serviceWorkerLoader
, logging loading process to element with given id.