chore(sw.js): add lightweight service worker

src/assets/scripts/index.js

@@ -1,4 +1,7 @@
 window.addEventListener("load", () => {
+  // service worker
+  if ('serviceWorker' in navigator) navigator.serviceWorker.register('/assets/scripts/sw.js');
+
   // dialog controls
   (() => {
     const dialogButtons = document.querySelectorAll(".dialog-open");

src/assets/scripts/sw.js

@@ -0,0 +1,57 @@
+const cacheName = 'coryd.dev-static-assets';
+const staticAssets = [
+  '/assets/styles/index.css',
+  '/assets/styles/noscript.css',
+  '/assets/fonts/sg.woff2',
+  '/assets/fonts/dm.woff2',
+  '/assets/fonts/dmi.woff2',
+  '/assets/fonts/ml.woff2',
+  '/assets/scripts/index.js',
+  '/assets/scripts/components/now-playing.js',
+  '/assets/scripts/components/select-pagination.js',
+];
+
+self.addEventListener('install', event => {
+  event.waitUntil(
+    caches.open(cacheName)
+      .then(cache => cache.addAll(staticAssets))
+      .then(() => self.skipWaiting())
+  );
+});
+
+self.addEventListener('activate', event => {
+  event.waitUntil(
+    (async () => {
+      const keys = await caches.keys();
+      await Promise.all(keys.filter(key => key !== cacheName).map(key => caches.delete(key)));
+
+      if (self.registration.navigationPreload) await self.registration.navigationPreload.enable();
+
+      await self.clients.claim();
+    })()
+  );
+});
+
+self.addEventListener('fetch', event => {
+  const request = event.request;
+
+  if (request.method !== 'GET') return;
+  if (request.headers.get('Accept').includes('text/html')) {
+    event.respondWith(
+      (async () => {
+        try {
+          const preloadResponse = await event.preloadResponse;
+          if (preloadResponse) return preloadResponse;
+
+          return await fetch(request);
+        } catch (err) {
+          return Response.error();
+        }
+      })()
+    );
+    return;
+  }
+
+  event.respondWith(caches.match(request).then(response => response || fetch(request))
+  );
+});