Add PWA install support

Author: timcogan

icons/icon-192.png

@@ -4,17 +4,23 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <link rel="icon" type="image/svg+xml" href="./src/logo.svg" />
+    <link rel="manifest" href="./manifest.webmanifest" />
+    <link rel="apple-touch-icon" href="./icons/icon-192.png" />
     <title>Open Brick | Parametric Brick STL Generator for 3D Printing</title>
     <meta
       name="description"
-      content="Open Brick is a browser-based parametric brick generator. Create classic brick, plate, tile, round brick, round tile, and mechanical axle STL files for 3D printing from OpenSCAD templates."
+      content="Open Brick is a browser-based parametric brick generator. Create classic brick, plate, tile, and mechanical axle STL files for 3D printing from OpenSCAD templates."
     />
     <meta
       name="keywords"
-      content="brick STL generator, parametric brick, OpenSCAD, 3D printing, classic brick, classic plate, classic tile, round brick, round tile, mechanical axle"
+      content="brick STL generator, parametric brick, OpenSCAD, 3D printing, classic brick, classic plate, classic tile, mechanical axle, PWA"
     />
     <meta name="robots" content="index,follow,max-image-preview:large,max-snippet:-1,max-video-preview:-1" />
     <meta name="theme-color" content="#0b1424" />
+    <meta name="mobile-web-app-capable" content="yes" />
+    <meta name="apple-mobile-web-app-capable" content="yes" />
+    <meta name="apple-mobile-web-app-title" content="Open Brick" />
+    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
     <link rel="canonical" href="https://openbrick.cogan.dev/" />
     <link rel="alternate" type="text/plain" href="/llms.txt" title="LLM quick rules" />
     <link rel="alternate" type="text/plain" href="/llms-full.txt" title="LLM full context" />
@@ -33,7 +39,7 @@
     <meta name="twitter:title" content="Open Brick | Parametric Brick STL Generator for 3D Printing" />
     <meta
       name="twitter:description"
-      content="Browser-based brick, plate, tile, round brick, round tile, and mechanical axle STL generator powered by OpenSCAD templates."
+      content="Browser-based brick, plate, tile, and mechanical axle STL generator powered by OpenSCAD templates."
     />
     <meta name="twitter:image" content="https://openbrick.cogan.dev/src/logo.svg" />
 
@@ -128,6 +134,6 @@ <h1>Open Brick</h1>
       </section>
     </main>
 
-    <script type="module" src="./src/app.js?v=20260208b"></script>
+    <script type="module" src="./src/app.js?v=20260211a"></script>
   </body>
 </html>

icons/icon-512.png

@@ -0,0 +1,28 @@
+{
+  "name": "Open Brick",
+  "short_name": "Open Brick",
+  "description": "Browser-based parametric brick STL generator for 3D printing.",
+  "id": "./",
+  "start_url": "./",
+  "scope": "./",
+  "display": "standalone",
+  "orientation": "any",
+  "background_color": "#0b1424",
+  "theme_color": "#0b1424",
+  "lang": "en",
+  "categories": ["utilities", "productivity", "graphics"],
+  "icons": [
+    {
+      "src": "./icons/icon-192.png",
+      "sizes": "192x192",
+      "type": "image/png",
+      "purpose": "any"
+    },
+    {
+      "src": "./icons/icon-512.png",
+      "sizes": "512x512",
+      "type": "image/png",
+      "purpose": "any maskable"
+    }
+  ]
+}

index.html

@@ -116,6 +116,7 @@ const state = {
 };
 
 init().catch((error) => setStatus(error.message, true));
+registerServiceWorker();
 
 async function init() {
   state.renderer = createPreviewRenderer(elements.canvas);
@@ -176,6 +177,18 @@ function bindEvents() {
   bindCanvasRotation();
 }
 
+function registerServiceWorker() {
+  if (!("serviceWorker" in navigator)) {
+    return;
+  }
+
+  window.addEventListener("load", () => {
+    navigator.serviceWorker.register("./sw.js").catch((error) => {
+      console.warn("Service worker registration failed:", error);
+    });
+  });
+}
+
 function bindCanvasRotation() {
   const canvas = elements.canvas;
 

manifest.webmanifest

@@ -0,0 +1,102 @@
+const CACHE_NAME = "open-brick-shell-v20260211d";
+const APP_SHELL_ASSETS = [
+  "./",
+  "./index.html",
+  "./manifest.webmanifest",
+  "./src/styles.css",
+  "./src/app.js?v=20260211a",
+  "./src/scad-engine.mjs",
+  "./src/share-query.mjs",
+  "./src/logo.svg",
+  "./src/logo-light.svg",
+  "./src/logo-wordmark.svg",
+  "./src/logo-wordmark-light.svg",
+  "./src/github.svg",
+  "./scad/classic_brick.scad",
+  "./scad/classic_plate.scad",
+  "./scad/classic_tile.scad",
+  "./scad/mechanical_axle.scad",
+  "./icons/icon-192.png",
+  "./icons/icon-512.png",
+];
+
+self.addEventListener("install", (event) => {
+  event.waitUntil(
+    (async () => {
+      const cache = await caches.open(CACHE_NAME);
+      await cache.addAll(APP_SHELL_ASSETS);
+    })()
+  );
+
+  self.skipWaiting();
+});
+
+self.addEventListener("activate", (event) => {
+  event.waitUntil(
+    (async () => {
+      const cacheNames = await caches.keys();
+      await Promise.all(
+        cacheNames.map((cacheName) => {
+          if (cacheName !== CACHE_NAME && cacheName.startsWith("open-brick-shell-v")) {
+            return caches.delete(cacheName);
+          }
+          return Promise.resolve(false);
+        })
+      );
+      await self.clients.claim();
+    })()
+  );
+});
+
+self.addEventListener("fetch", (event) => {
+  const request = event.request;
+  if (request.method !== "GET") {
+    return;
+  }
+
+  const url = new URL(request.url);
+  if (url.origin !== self.location.origin) {
+    return;
+  }
+
+  if (request.mode === "navigate") {
+    event.respondWith(
+      (async () => {
+        try {
+          return await fetch(request);
+        } catch (_error) {
+          const fallback = await caches.match("./index.html", { ignoreSearch: true });
+          if (fallback) {
+            return fallback;
+          }
+          return new Response("Offline", { status: 503, statusText: "Offline" });
+        }
+      })()
+    );
+    return;
+  }
+
+  event.respondWith(
+    (async () => {
+      const cached = await caches.match(request);
+      if (cached) {
+        return cached;
+      }
+
+      try {
+        const response = await fetch(request);
+        if (response.ok && (response.type === "basic" || response.type === "default")) {
+          const cache = await caches.open(CACHE_NAME);
+          cache.put(request, response.clone());
+        }
+        return response;
+      } catch (_error) {
+        const fallback = await caches.match("./index.html", { ignoreSearch: true });
+        if (request.destination === "document" && fallback) {
+          return fallback;
+        }
+        return new Response("Offline", { status: 503, statusText: "Offline" });
+      }
+    })()
+  );
+});