Adds service worker

Signed-off-by: Daniel Kastl <[email protected]>
Georepublic · Oct 4, 2024 · ffa5e2e · ffa5e2e
1 parent 965869c
commit ffa5e2e
Show file tree

Hide file tree

Showing 10 changed files with 81 additions and 2 deletions.
diff --git a/.gitignore b/.gitignore
@@ -1 +1,2 @@
+dist
 node_modules
diff --git a/index.html b/index.html
@@ -3,8 +3,10 @@
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <link rel="icon" href="data:,">
+  <link rel="icon" href="./src/assets/icon-192x192.png">
   <link rel="stylesheet" href="./src/styles.scss">
+  <link rel="manifest" href="/meshtastic-configurator/manifest.json">
+  <meta name="theme-color" content="#4CAF50">
   <title>Meshtastic Configurator</title>
 </head>
 <body>

diff --git a/package.json b/package.json
@@ -7,6 +7,7 @@
   "license": "GPL-3.0-or-later",
   "devDependencies": {
     "@types/qrcode": "^1.5.5",
+    "@types/serviceworker": "^0.0.97",
     "concurrently": "^9.0.1",
     "http-server": "^14.1.1",
     "typescript": "^5.6.2",

diff --git a/public/assets/icon-192x192.png b/public/assets/icon-192x192.png
diff --git a/public/assets/icon-512x512.png b/public/assets/icon-512x512.png
diff --git a/public/manifest.json b/public/manifest.json
@@ -0,0 +1,21 @@
+{
+  "name": "Meshtastic Configurator",
+  "short_name": "Configurator",
+  "description": "Meshtastic QR Code Generator",
+  "start_url": "/meshtastic-configurator/",
+  "display": "standalone",
+  "background_color": "#ffffff",
+  "theme_color": "#4CAF50",
+  "icons": [
+    {
+      "src": "/meshtastic-configurator/assets/icon-192x192.png",
+      "sizes": "192x192",
+      "type": "image/png"
+    },
+    {
+      "src": "/meshtastic-configurator/assets/icon-512x512.png",
+      "sizes": "512x512",
+      "type": "image/png"
+    }
+  ]
+}
diff --git a/public/sw.js b/public/sw.js
@@ -0,0 +1,25 @@
+const CACHE_NAME = "meshtastic-cache";
+const urlsToCache = [
+  "/meshtastic-configurator/",
+  "/meshtastic-configurator/index.html",
+  "/meshtastic-configurator/src/styles.css",
+  "/meshtastic-configurator/src/main.ts",
+  "/meshtastic-configurator/assets/icon-192x192.png",
+  "/meshtastic-configurator/assets/icon-512x512.png"
+];
+
+self.addEventListener("install", event => {
+  event.waitUntil(
+    caches.open(CACHE_NAME).then(cache => {
+      return cache.addAll(urlsToCache);
+    })
+  );
+});
+
+self.addEventListener("fetch", event => {
+  event.respondWith(
+    caches.match(event.request).then(response => {
+      return response || fetch(event.request);
+    })
+  );
+});
diff --git a/src/main.ts b/src/main.ts
@@ -5,6 +5,22 @@ import { handlePSKTypeChange, handleGeneratePSK } from './pskHandler';
 import { loadConfigurationFromHash } from './loadConfigurationFromHash';
 import { copyUrlToClipboard } from './utils';
 
+/**
+ * Register the service worker in production mode.
+ */
+if ('serviceWorker' in navigator && process.env.NODE_ENV === 'production') {
+  window.addEventListener('load', () => {
+    navigator.serviceWorker
+      .register('/meshtastic-configurator/sw.js')
+      .then((registration) => {
+        console.log('ServiceWorker registration successful with scope: ', registration.scope);
+      })
+      .catch((error) => {
+        console.log('ServiceWorker registration failed: ', error);
+      });
+  });
+}
+
 /**
  * Handle the DOMContentLoaded event.
  * Add event listeners to the buttons and form fields.

diff --git a/vite.config.mts b/vite.config.mts
@@ -1,11 +1,19 @@
 import { defineConfig } from 'vite';
+import { resolve } from 'path';
 
 export default defineConfig({
   base: '/meshtastic-configurator/',
   css: {
     preprocessorOptions: {
       scss: {
-        api: 'modern'  // Use the modern Sass API
+        api: 'modern'
+      }
+    }
+  },
+  build: {
+    rollupOptions: {
+      input: {
+        main: resolve(__dirname, 'index.html')
       }
     }
   }

diff --git a/yarn.lock b/yarn.lock
@@ -225,6 +225,11 @@
   dependencies:
     "@types/node" "*"
 
+"@types/serviceworker@^0.0.97":
+  version "0.0.97"
+  resolved "https://registry.yarnpkg.com/@types/serviceworker/-/serviceworker-0.0.97.tgz#a0b1a76b2a3a79cc4b624b88717bc73c8ccd246d"
+  integrity sha512-SGt2lAQ0PcRR392EFNAnmjdZeWrU9o0y09/4xoY7gOunoHTt4nV/Qs2U9RQZlox8suwQnCtNS7rYqr5lNmdJ5w==
+
 ansi-regex@^5.0.1:
   version "5.0.1"
   resolved "https://registry.yarnpkg.com/ansi-regex/-/ansi-regex-5.0.1.tgz#082cb2c89c9fe8659a311a53bd6a4dc5301db304"