make it installable as a pwa

ixmilia · Feb 16, 2024 · 5e90d77 · 5e90d77
1 parent f059531
commit 5e90d77
Show file tree

Hide file tree

Showing 5 changed files with 71 additions and 0 deletions.
diff --git a/src/index.ts b/src/index.ts
@@ -1,6 +1,8 @@
 import { Expression } from "./expression.js";
 
 function main() {
+    installServiceWorker();
+
     const results = <HTMLTextAreaElement>document.getElementById('results')!;
     const input = <HTMLInputElement>document.getElementById('input')!;
     const evalButton = <HTMLButtonElement>document.getElementById('eval')!;
@@ -25,4 +27,10 @@ function main() {
     });
 }
 
+function installServiceWorker() {
+    if ('serviceWorker' in navigator) {
+        navigator.serviceWorker.register('service-worker.js');
+    }
+}
+
 window.addEventListener('DOMContentLoaded', main);
diff --git a/src/resources/icon.svg b/src/resources/icon.svg
diff --git a/src/resources/index.html b/src/resources/index.html
@@ -1,7 +1,9 @@
 <html>
 
 <head>
+  <link rel="manifest" href="manifest.json.webmanifest" />
   <script type="text/javascript" src="app.js"></script>
+  <script type="text/javascript" src="service-worker.js"></script>
 </head>
 
 <body>

diff --git a/src/resources/manifest.json.webmanifest b/src/resources/manifest.json.webmanifest
@@ -0,0 +1,12 @@
+{
+  "name": "IxMilia Calculator",
+  "icons": [
+    {
+      "src": "icon.svg",
+      "type": "image/svg+xml",
+      "sizes": "128x128"
+    }
+  ],
+  "start_url": "/",
+  "display": "standalone"
+}
diff --git a/src/resources/service-worker.js b/src/resources/service-worker.js
@@ -0,0 +1,45 @@
+const cacheName = 'ixmilia.calc.cache';
+const filesToCache = [
+    '/',
+    'index.html',
+    'app.js',
+    'icon.svg',
+];
+
+self.addEventListener('install', (e) => {
+    e.waitUntil(() => {
+        caches.open(cacheName)
+            .then(cache => cache.addAll(filesToCache))
+            .then(self.skipWaiting());
+    });
+});
+
+self.addEventListener('activate', (e) => {
+    e.waitUntil(() => {
+        caches.keys().then(keys => {
+            return keys.filter(key => key !== cacheName);
+        }).then(cachesToDelete => {
+            return Promise.all(cachesToDelete.map(cacheToDelete => {
+                return caches.delete(cacheToDelete);
+            }));
+        }).then(() => self.clients.claim());
+    });
+});
+
+self.addEventListener('fetch', (e) => {
+    e.respondWith(() => {
+        const response = caches.match(e.request);
+        if (response) {
+            return response;
+        }
+
+        console.log(`Cache miss: ${e.request.url}`);
+        return fetch(e.request).then(response => {
+            cache.put(e.request, response.clone())
+                .then(() => {
+                    console.log(`Cached: ${e.request.url}`);
+                    return response;
+                });
+        });
+    });
+});