70 %

Service Workies Notes


.ready serviceWorker shortcut

navigator.serviceWorker.controller is a shortcut to the currently active Service Worker (if the Worker is in control of the page and not just active)

How to force a new service worker: (danger)

JS
self.skipWaiting()
self.addEventListener("activate", () => {
console.log("new SW activated immediately");
})

Detecting if a bad service worker has been replaced

JS
navigator.serviceWorker.addEventListener(
"controllerchange", () => {
console.log("the new worker has taken over");
})

Chapter 3: Intercepting Requests

JS
self.addEventListener("fetch", event => {
console.log(event.request.url);
})

Intercepting

JS
self.addEventListener("fetch", event => {
event.respondWith(new Response("hello!"))
})

Force a worker on the first load. May miss some requests

JS
self.addEventListener("activate", event => {
event.waitUntil(clients.claim())
})

Chapter 4: Caches

JS
self.addEventListener("activate", event => {
event.waitUntil(
caches.open("kolohe-cache")
)
})

Add items to cache

JS

Get items from cache

JS
self.addEventListener("fetch", event => {
event.respondWith(
caches.open("kolohe-cache").then(cache => {
return cache.match(event.request.url).then(res => {
return res || fetch(event.request.url)
})
})
)
})

Deleting and versioning

JS
const version = 3;