make it installable as a pwa

ixmilia · Feb 16, 2024 · 76297fc · 76297fc
1 parent f059531
commit 76297fc
Show file tree

Hide file tree

Showing 5 changed files with 58 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,32 @@
+const cacheName = 'ixmilia.calc.cache';
+const filesToCache = [
+    '/',
+    '/app.js',
+    '/icon.svg',
+    '/index.html',
+];
+
+self.addEventListener('install', (e) => {
+    e.waitUntil(async () => {
+        const cache = await caches.open(cacheName);
+        await cache.addAll(filesToCache);
+    });
+});
+
+self.addEventListener('fetch', (e) => {
+    e.respondWith(async () => {
+        const response = await caches.match(e.request);
+        return response || fetch(e.request);
+    });
+});
+
+self.addEventListener('activate', (e) => {
+    e.waitUntil(async () => {
+        const keys = await caches.keys();
+        await Promise.all(keys.map((key) => {
+            if (key !== cacheName) {
+                return caches.delete(key);
+            }
+        }));
+    });
+});