Add PWA compatibility

web/index.html

@@ -4,6 +4,8 @@
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Fichero D11s Label Printer</title>
+<link rel="manifest" href="manifest.json">
+<meta name="theme-color" content="#1a1a2e">
 <style>
   *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
 
@@ -868,6 +870,14 @@ <h2>Log</h2>
 // Init preview on load
 updateTextPreview();
 log('Ready. Click Connect to pair with your printer.');
+
+if ("serviceWorker" in navigator) {
+    window.addEventListener("load", () => {
+        navigator.serviceWorker.register("/service-worker.js")
+                 .then(() => console.log("Service Worker registered"))
+                 .catch(err => console.log("SW failed:", err));
+    });
+}
 </script>
 
 </body>

web/manifest.json

@@ -0,0 +1,60 @@
+{
+  "name": "Fichero Labelprinter",
+  "short_name": "Fichero",
+  "start_url": "/index.html",
+  "display": "standalone",
+  "orientation": "portrait",
+  "status_bar": "black",
+  "background_color": "#ffffff",
+  "theme_color": "#1a1a2e",
+  "icons": [
+    {
+      "src": "/icons/icon-72x72.png",
+      "type": "image/png",
+      "sizes": "72x72",
+      "purpose": "any"
+    },
+    {
+      "src": "/icons/icon-96x96.png",
+      "type": "image/png",
+      "sizes": "96x96",
+      "purpose": "any"
+    },
+    {
+      "src": "/icons/icon-128x128.png",
+      "type": "image/png",
+      "sizes": "128x128",
+      "purpose": "any"
+    },
+    {
+      "src": "/icons/icon-144x144.png",
+      "type": "image/png",
+      "sizes": "144x144",
+      "purpose": "any"
+    },
+    {
+      "src": "/icons/icon-152x152.png",
+      "type": "image/png",
+      "sizes": "152x152",
+      "purpose": "any"
+    },
+    {
+      "src": "/icons/icon-192x192.png",
+      "type": "image/png",
+      "sizes": "192x192",
+      "purpose": "any"
+    },
+    {
+      "src": "/icons/icon-384x384.png",
+      "type": "image/png",
+      "sizes": "384x384",
+      "purpose": "any"
+    },
+    {
+      "src": "/icons/icon-512x512.png",
+      "type": "image/png",
+      "sizes": "512x512",
+      "purpose": "any"
+    }
+  ]
+}

web/service-worker.js

@@ -0,0 +1,22 @@
+const CACHE_NAME = "pwa-cache-v1";
+const urlsToCache = [
+    "/",
+    "/index.html",
+    "/manifest.json"
+];
+
+// install: cache files
+self.addEventListener("install", event => {
+    event.waitUntil(
+        caches.open(CACHE_NAME)
+              .then(cache => cache.addAll(urlsToCache))
+    );
+});
+
+// fetch: serve cached version if offline
+self.addEventListener("fetch", event => {
+    event.respondWith(
+        caches.match(event.request)
+              .then(response => response || fetch(event.request))
+    );
+});