https://salingjaga.com/sw-offline.js

1const OFFLINE_VERSION = 1
2const CACHE_NAME = 'offline'
3const OFFLINE_URL = '/offline'
4const IMAGE_URL = '/images/errors/connection.svg'
5const ICON_URL = '/icons/chat-bubble-white-icon.svg'
6
7self.addEventListener('install', (event) => {
8  event.waitUntil((async () => {
9    const cache = await caches.open(CACHE_NAME)
10    await cache.add(new Request(OFFLINE_URL, {cache: 'reload'}))
11    await cache.add(new Request(IMAGE_URL, {cache: 'reload'}))
12    await cache.add(new Request(ICON_URL, {cache: 'reload'}))
13  })())
14  self.skipWaiting();
15})
16
17self.addEventListener('activate', (event) => {
18  event.waitUntil((async () => {
19    if ('navigationPreload' in self.registration) {
20      await self.registration.navigationPreload.enable()
21    }
22  })())
23
24  self.clients.claim()
25})
26
27self.addEventListener('fetch', (event) => {
28  if (event.request.mode === 'navigate') {
29    event.respondWith((async () => {
30      try {
31        const preloadResponse = await event.preloadResponse
32        if (preloadResponse) {
33          return preloadResponse
34        }
35
36        const networkResponse = await fetch(event.request)
37        return networkResponse
38      } catch (error) {
39        console.log('Fetch failed returning offline page instead.', error)
40
41        const cache = await caches.open(CACHE_NAME)
42        const cachedResponse = await cache.match(OFFLINE_URL)
43        return cachedResponse
44      }
45    })())
46  }
47})