Merge pull request #77 from koddsson/service-worker

make the website work offline

package.json

@@ -11,7 +11,7 @@
     "build:css": "postcss src/css/index.css -o dist/index.css",
     "prebuild:js:prod": "npm run build:css",
     "build:js:prod": "esbuild src/js/index.ts --minify --bundle --format=esm --outfile=dist/index.js",
-    "lint": "eslint src/**/*",
+    "lint": "eslint src/**/*.ts",
     "start": "web-dev-server",
     "test": "web-test-runner"
   },
@@ -36,8 +36,10 @@
     "@github/prettier-config": "^0.0.6",
     "@open-wc/testing": "^4.0.0",
     "@rollup/plugin-node-resolve": "^15.2.3",
+    "@types/mocha": "^10.0.4",
     "@web/dev-server": "^0.4.0",
     "@web/dev-server-esbuild": "^1.0.0",
+    "@web/rollup-plugin-copy": "^0.5.0",
     "@web/rollup-plugin-html": "^2.1.0",
     "@web/test-runner": "^0.18.0",
     "eslint": "^8.53.0",

rollup.config.js

@@ -1,9 +1,15 @@
-import html from '@web/rollup-plugin-html'
+import {rollupPluginHTML as html} from '@web/rollup-plugin-html'
 import esbuild from 'rollup-plugin-esbuild'
 import {nodeResolve} from '@rollup/plugin-node-resolve'
+import {copy} from '@web/rollup-plugin-copy'
 
 export default {
   input: 'index.html',
   output: {dir: 'dist'},
-  plugins: [nodeResolve(), esbuild({target: 'esnext'}), html({input: 'index.html'})]
+  plugins: [
+    nodeResolve(),
+    esbuild({target: 'esnext'}),
+    html({input: 'index.html'}),
+    copy({patterns: './service-worker.js'}),
+  ],
 }

service-worker.js

@@ -0,0 +1,26 @@
+// There's probably a better caching strategy but this seemed the simplest to start with.
+//
+// From: https://web.dev/articles/offline-cookbook#on-network-response
+//
+// > If a request doesn't match anything in the cache, get it from the network, send it to the page,
+// > and add it to the cache at the same time.
+//
+// > If you do this for a range of URLs, such as avatars, you'll need to be careful you don't bloat
+// > the storage of your origin. If the user needs to reclaim disk space you don't want to be the
+// > prime candidate. Make sure you get rid of items in the cache you don't need any more.
+
+self.addEventListener('fetch', function (event) {
+  event.respondWith(
+    caches.open('rss-reader').then(function (cache) {
+      return cache.match(event.request).then(function (response) {
+        return (
+          response ||
+          fetch(event.request).then(function (response) {
+            cache.put(event.request, response.clone());
+            return response;
+          })
+        );
+      });
+    }),
+  );
+});

src/js/index.ts

@@ -1,7 +1,9 @@
 import '@github/time-elements'
 
+import './register-service-worker'
+
 const form = document.querySelector('form')
-const input = form?.querySelector('input')!
+const input = form?.querySelector('input')
 const template = document.querySelector('template')
 const items = document.querySelector('.items')
 
@@ -19,7 +21,7 @@ form?.addEventListener('submit', event => {
 
   fetchSubscriptions()
 
-  input.value = ''
+  input!.value = ''
 })
 
 async function getSubscriptions() {

src/js/register-service-worker.ts

@@ -0,0 +1,15 @@
+if ('serviceWorker' in navigator) {
+  // Register a service worker hosted at the root of the
+  // site using the default scope.
+  try {
+    const registration = await navigator.serviceWorker.register('/service-worker.js')
+    console.log('Service worker registration succeeded:', registration)
+  } catch (error) {
+    console.error(`Service worker registration failed: ${error}`)
+  }
+} else {
+  console.error('Service workers are not supported.')
+}
+
+// Stupidly need to tell TypeScript that this is a module like this
+export {}