web/sw.js

/* Service Worker */

const appVersion = '2.0.0-rc-20230505001'
const cacheName = `owlboard-${appVersion}`
const cacheIDs = [cacheName]
const staticCache = [
  '/styles/fonts/firamono/firamono-500.woff2',
  '/styles/fonts/firamono/firamono-regular.woff2',
  '/styles/fonts/urwgothic/urwgothic.woff2',
  '/styles/fonts/urwgothic/urwgothicDemi.woff2',
  '/images/icon.svg',
  '/images/logo/wide_logo.svg',
  '/images/logo/mono-logo.svg',
  '/images/app-icons/any/plain-logo.svg',
  '/images/app-icons/any/plain-logo-512.png',
  '/images/nav/alert_icon.svg',
  '/images/nav/save.svg',
  '/images/nav/home_icon.svg',
  '/images/nav/back.svg',
  '/images/nav/hamburger.svg',
  '/images/nav/close.svg',
  '/images/nav/refresh.svg',
  '/images/nre/nre-powered_400w.webp',
  '/images/nre/nre-powered_400w.jxl'
]
const dynamicCache = [
  '/404.html',
  '/auth.html',
  '/board.html',
  '/conn-err.html',
  '/help.html',
  '/',
  '/issue.html',
  '/find-code.html',
  '/settings.html',
  '/pis.html',
  '/manifest.json',
  '/styles/board.css',
  '/styles/find-code.css',
  '/styles/help.css',
  '/styles/issue.css',
  '/styles/main.css',
  '/styles/settings.css',
  '/styles/pis.css',
  '/js/find-code.js',
  '/js/index.js',
  '/js/issue.js',
  '/js/lib.board.js',
  '/js/lib.main.js',
  '/js/auth.js',
  '/js/settings.js',
  '/js/simple-board.js',
  '/js/pis.js'
]

for(let i = 0; i < dynamicCache.length; i++) {
  let item = dynamicCache[i] + `?${appVersion}`
  staticCache.push(item)
}

self.addEventListener('install', (e) => {
  console.log('[Service Worker] Install')
  e.waitUntil(
    (async () => {
      const cache = await caches.open(cacheName)
      console.log('[Service Worker] Caching app data')
      await cache.addAll(staticCache)
    })()
  )
})

self.addEventListener('fetch', (e) => {
  e.respondWith(
    (async () => {
      const r = await caches.match(e.request,{ignoreSearch: true})
      if (r) {
        return r
      }
      const response = await fetch(e.request)
      console.log(`[Service Worker] Not cached - fetching from server: ${e.request.url}`)
      return response
    })()
  )
})

self.addEventListener('activate', function (event) {
  event.waitUntil(caches.keys().then(function (keys) {
    return Promise.all(keys.filter(function (key) {
      return !cacheIDs.includes(key)
    }).map(function (key) {
      return caches.delete(key)
    }))
  }).then(function () {
    return self.clients.claim()
  }))
})