chore(sw.js): add lightweight service worker

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "coryd.dev",
-  "version": "4.0.6",
+  "version": "4.1.6",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "coryd.dev",
-      "version": "4.0.6",
+      "version": "4.1.6",
       "license": "MIT",
       "dependencies": {
         "html-minifier-terser": "7.2.0",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "coryd.dev",
-  "version": "4.0.6",
+  "version": "4.1.6",
   "description": "The source for my personal site. Built using 11ty (and other tools).",
   "type": "module",
   "engines": {

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',
+];
+
+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))
+  );
+});

src/feeds/manifest.json.liquid

@@ -0,0 +1,21 @@
+---
+permalink: "/manifest.json"
+layout: null
+eleventyExcludeFromCollections: true
+excludeFromSitemap: true
+---
+{
+  "lang": "{{ globals.lang }}",
+  "name": "{{ globals.site_name }}",
+  "description": "{{ globals.site_description }}",
+  "background_color": "#f9fafb",
+  "theme_color": "#f9fafb"
+  "display": "minimal-ui",
+  "dir": "ltr",
+  "icons": [
+    { "src": "{{ globals.url }}/og/w200/{% appVersion %}{{ globals.avatar }}", "type": "image/png", "sizes": "192x192" },
+    { "src": "{{ globals.url }}/og/w800/{% appVersion %}{{ globals.avatar }}", "type": "image/png", "sizes": "512x512" },
+    { "src": "{{ globals.url }}/og/w800/{% appVersion %}{{ globals.avatar }}", "type": "image/png", "sizes": "512x512", "purpose": "maskable" }
+  ],
+  "start_url": "/",
+}