Short description of a service worker:
Using a service worker allows to put url(s) into the navigator cache. On the next visit navigator requests are served from cache. For every url in cache, navigator won't do a request to the network. If every url are in cache, website works offline.
Jsenv service worker:
- Ensure cache is reused only when url are versioned
- Can be connected to a build tool to know urls to put into navigator cache
- Can be configured with a manual list of urls to cache
- Install
@jsenv/service-worker
npm install @jsenv/worker
- Create service_worker.js
self.importScripts("@jsenv/service-worker/src/jsenv_service_worker.js");
self.__sw__.init({
name: "product-name",
// service worker will cache "/" and the "roboto" font
resources: {
"/": {},
"https://fonts.googleapis.com/css2?family=Roboto": {},
},
});
- Register service worker
window.navigator.serviceWorker.register("./service_worker.js");
At this point your website will use jsenv service worker. By default jsenv service worker cache only the root url: "/"
. It must be configured to cache more urls.
Jsenv service worker must be configured during __sw__.init
call.
Check directly src/jsenv_service_worker.js to see the available configuration and what it does.
When service worker updates it will refetch all url from network and put them into cache again. This is mandatory to check if ressource behind url has changed. When an url is versioned there is no need to refetch as it is assumed the ressource for that url will never change. If you know the url is versioned, tell it to the service worker as shown below.
self.__sw__.init({
name: "product-name",
resources: {
"/": true,
- "https://fonts.googleapis.com/css2?family=Roboto": {}
+ "https://fonts.googleapis.com/css2?family=Roboto": { version: '1' }
},
})
During build jsenv injects urls to cache at the top of service worker file(s) under a global variable: self.resourcesFromJsenvBuild
.
self.importScripts("@jsenv/service-worker/src/jsenv_service_worker.js");
self.__sw__.init({
name: "product-name",
resources: {
"/": true,
...(self.resourcesFromJsenvBuild || {}),
},
});
Jsenv will detect all urls referenced in your files such as:
<link rel="preload" href="./src/img.png" as="image" />
body {
background-image: url("./src/img.png");
}
new URL("./src/img.png", import.meta.url);
Urls detected during build will be in self.resourcesFromJsenvBuild
.
For now the urls with an origin different from your website origin will not. You must add them manually in "resources".
<link
rel="preload"
href="https://fonts.googleapis.com/css2?family=Roboto"
as="font"
crossorigin
/>
self.__sw__.init({
cachePrefix: "product-name",
resources: {
"/": {},
+ "https://fonts.googleapis.com/css2?family=Roboto": {}
},
})