Installable as an app (PWA): manifest, pixel-art icons, offline service worker

- manifest.webmanifest (full screen, any orientation), icons 192/512/maskable/apple-touch
- sw.js: network first, cache as offline fallback, the savegame API is never cached
- registered only over HTTPS or on localhost; nginx serves the manifest type
- README: installing, HTTPS requirement

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

README.md

@@ -21,6 +21,12 @@ docker compose up -d --build
 # open http://localhost:18093
 ```
 
+### Install as an app (PWA)
+
+DungeonCraft is a progressive web app: browsers offer to install it (Chrome/Edge: install icon in the address bar or "Install app" in the menu; Android: "Add to home screen"; iOS Safari: Share → "Add to Home Screen"). The installed game starts in full screen and also works offline (the savegame list on the server then falls back to savegame files).
+
+Browsers only allow the installation over **HTTPS** (or on `localhost`), so a public installation needs a reverse proxy with a certificate in front of port 18093.
+
 ### Building without Docker
 
 Requirements: Rust with the `wasm32-unknown-unknown` target.

nginx.conf

@@ -7,6 +7,11 @@ server {
     location / {
         try_files $uri $uri/ =404;
     }
+    # installable app (PWA)
+    location ~ \.webmanifest$ {
+        default_type application/manifest+json;
+        try_files $uri =404;
+    }
     # savegame service (server/). Resolved at request time, so the game still starts without it;
     # the game then falls back to savegame files.
     location /api/ {

www/index.html

@@ -3,7 +3,14 @@
 <head>
   <meta charset="utf-8">
   <title>DungeonCraft</title>
-  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
+  <meta name="theme-color" content="#080608">
+  <meta name="mobile-web-app-capable" content="yes">
+  <meta name="apple-mobile-web-app-capable" content="yes">
+  <meta name="apple-mobile-web-app-status-bar-style" content="black">
+  <link rel="manifest" href="manifest.webmanifest">
+  <link rel="icon" type="image/png" href="icons/icon-192.png">
+  <link rel="apple-touch-icon" href="icons/apple-touch-icon.png">
   <style>
     html, body { margin: 0; padding: 0; width: 100%; height: 100%; overflow: hidden; background: #080608; }
     canvas { display: block; width: 100%; height: 100%; outline: none; image-rendering: pixelated; }
@@ -17,6 +24,10 @@
   <script>
     document.getElementById("glcanvas").focus();
     load("dungeoncraft.wasm");
+    // installable app (PWA): only over HTTPS or on localhost
+    if ("serviceWorker" in navigator && (location.protocol === "https:" || location.hostname === "localhost")) {
+      navigator.serviceWorker.register("sw.js").catch(function () {});
+    }
   </script>
 </body>
 </html>

www/manifest.webmanifest

@@ -0,0 +1,17 @@
+{
+  "name": "DungeonCraft",
+  "short_name": "DungeonCraft",
+  "description": "Dig. Build. Defend. Conquer. A dungeon building and defence game.",
+  "start_url": "./",
+  "scope": "./",
+  "display": "fullscreen",
+  "display_override": ["fullscreen", "standalone"],
+  "orientation": "any",
+  "background_color": "#080608",
+  "theme_color": "#080608",
+  "icons": [
+    { "src": "icons/icon-192.png", "sizes": "192x192", "type": "image/png" },
+    { "src": "icons/icon-512.png", "sizes": "512x512", "type": "image/png" },
+    { "src": "icons/maskable-512.png", "sizes": "512x512", "type": "image/png", "purpose": "maskable" }
+  ]
+}

www/sw.js

@@ -0,0 +1,45 @@
+// DungeonCraft service worker: makes the game installable and playable offline.
+// Network first (updates arrive at once), the cache is the fallback when offline.
+// The savegame service (/api/) is never cached.
+const CACHE = "dungeoncraft-v1";
+const CORE = [
+  "./",
+  "index.html",
+  "mq_js_bundle.js",
+  "dc_plugin.js",
+  "dungeoncraft.wasm",
+  "manifest.webmanifest",
+  "icons/icon-192.png",
+  "icons/icon-512.png",
+];
+
+self.addEventListener("install", (event) => {
+  event.waitUntil(caches.open(CACHE).then((c) => c.addAll(CORE)).then(() => self.skipWaiting()));
+});
+
+self.addEventListener("activate", (event) => {
+  event.waitUntil(
+    caches.keys()
+      .then((keys) => Promise.all(keys.filter((k) => k !== CACHE).map((k) => caches.delete(k))))
+      .then(() => self.clients.claim())
+  );
+});
+
+self.addEventListener("fetch", (event) => {
+  const req = event.request;
+  const url = new URL(req.url);
+  if (req.method !== "GET" || url.origin !== self.location.origin || url.pathname.includes("/api/")) {
+    return;
+  }
+  event.respondWith(
+    fetch(req)
+      .then((res) => {
+        if (res.ok) {
+          const copy = res.clone();
+          caches.open(CACHE).then((c) => c.put(req, copy));
+        }
+        return res;
+      })
+      .catch(() => caches.match(req).then((hit) => hit || caches.match("index.html")))
+  );
+});