Basic PWA implementation

README.md

@@ -59,6 +59,7 @@
   - [Layouts](#layouts)
   - [Sleep mode](#sleep-mode)
   - [Cusom CSS](#custom-css)
+- [PWA](#pwa)
 - [Home Assistant](#home-assistant)
 - [FAQ](#faq)
 - [TODO / Roadmap](#todo--roadmap)
@@ -478,6 +479,20 @@ The custom CSS will apply to all devices connected to Kiosk by default.
 
 To disable custom CSS for a specific device, add `custom_css=false` to the URL parameters e.g. `http://{URL}?cusom_css=false`
 
+------
+
+## PWA
+
+> [!NOTE]
+> IOS doesn't allow PWA's to prevent the screen from going to sleep.
+> A work around is to lauch Kiosk then enable the [guided access](https://support.apple.com/en-gb/guide/iphone/iph7fad0d10/ios) feature
+
+### IOS
+1. Open Safari and navigate to Kiosk.
+2. Tap on the share icon in Safari's navigation bar.
+3. Scroll till you see "Add to Home Screen" and tap it.
+4. Tap on the newly added Kiosk icon on your home screen!
+
 
 ------
 

frontend/public/assets/js/kiosk.js

@@ -3767,7 +3767,11 @@ var kiosk = (() => {
         try {
           wakeLock2 = yield navigator.wakeLock.request("screen");
         } catch (err) {
-          console.error(`${err.name}, ${err.message}`);
+          if (err.name === "TypeError") {
+            wakeLock2 = yield navigator.wakeLock.request();
+          } else {
+            console.error(`${err.name}, ${err.message}`);
+          }
         }
       });
       document.addEventListener("visibilitychange", () => {
@@ -3807,6 +3811,16 @@ var kiosk = (() => {
     if (kioskData.disableScreensaver) {
       wakeLock();
     }
+    if ("serviceWorker" in navigator) {
+      navigator.serviceWorker.register("/assets/js/sw.js").then(
+        function(registration) {
+          console.log("ServiceWorker registration successful");
+        },
+        function(err) {
+          console.log("ServiceWorker registration failed: ", err);
+        }
+      );
+    }
     if (!fullscreenAPI.requestFullscreen) {
       fullscreenButton && htmx_esm_default.remove(fullscreenButton);
       fullScreenButtonSeperator && htmx_esm_default.remove(fullScreenButtonSeperator);
@@ -3845,6 +3859,8 @@ var kiosk = (() => {
       htmx_esm_default.remove(frames[0], 3e3);
     }
   }
-  htmx_esm_default.onLoad(init);
+  document.addEventListener("DOMContentLoaded", () => {
+    init();
+  });
   return __toCommonJS(kiosk_exports);
 })();

frontend/public/assets/js/sw.js

@@ -0,0 +1,19 @@
+var staticCacheName = "immich-kiosk";
+
+self.addEventListener("install", function (e) {
+  e.waitUntil(
+    caches.open(staticCacheName).then(function (cache) {
+      return cache.addAll(["/"]);
+    }),
+  );
+});
+
+self.addEventListener("fetch", function (event) {
+  console.log(event.request.url);
+
+  event.respondWith(
+    caches.match(event.request).then(function (response) {
+      return response || fetch(event.request);
+    }),
+  );
+});

frontend/public/assets/manifest.json

@@ -0,0 +1,22 @@
+{
+  "name": "Immich Kiosk",
+  "short_name": "Kiosk",
+  "description": "Immich Kiosk is a lightweight slideshow for running on kiosk devices and browsers that uses Immich as a data source.",
+  "start_url": "/",
+  "display": "fullscreen",
+  "background_color": "#000000",
+  "theme_color": "#000000",
+  "icons": [
+    {
+      "src": "/assets/images/android-chrome-192x192.png",
+      "sizes": "192x192",
+      "type": "image/png"
+    },
+    {
+      "src": "/assets/images/android-chrome-512x512.png",
+      "sizes": "512x512",
+      "type": "image/png"
+    }
+  ],
+  "scope": "/"
+}

frontend/src/ts/kiosk.ts

@@ -55,6 +55,17 @@ function init() {
     wakeLock();
   }
 
+  if ("serviceWorker" in navigator) {
+    navigator.serviceWorker.register("/assets/js/sw.js").then(
+      function (registration) {
+        console.log("ServiceWorker registration successful");
+      },
+      function (err) {
+        console.log("ServiceWorker registration failed: ", err);
+      },
+    );
+  }
+
   if (!fullscreenAPI.requestFullscreen) {
     fullscreenButton && htmx.remove(fullscreenButton);
     fullScreenButtonSeperator && htmx.remove(fullScreenButtonSeperator);
@@ -113,6 +124,8 @@ function cleanupFrames() {
 }
 
 // Initialize Kiosk when the DOM is fully loaded
-htmx.onLoad(init);
+document.addEventListener("DOMContentLoaded", () => {
+  init();
+});
 
 export { cleanupFrames, startPolling };

frontend/src/ts/wakelock.ts

@@ -7,7 +7,12 @@ export const wakeLock = async () => {
       try {
         wakeLock = await navigator.wakeLock.request("screen");
       } catch (err) {
-        console.error(`${err.name}, ${err.message}`);
+        if (err.name === "TypeError") {
+          // The "screen" parameter is not supported, try without it
+          wakeLock = await navigator.wakeLock.request();
+        } else {
+          console.error(`${err.name}, ${err.message}`);
+        }
       }
     };
 

taskfile.yml

@@ -1,6 +1,6 @@
 version: "3"
 env:
-  VERSION: 0.11.2
+  VERSION: 0.11.3-beta.1
 tasks:
   default:
     deps: [build]

views/views_home.templ

@@ -251,7 +251,10 @@ templ Home(viewData ViewData) {
 			<meta name="mobile-web-app-capable" content="yes"/>
 			<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
 			<meta name="version" content={ viewData.KioskVersion }/>
+			<meta name="apple-mobile-web-app-status-bar" content="#000000"/>
+			<meta name="theme-color" content="black"/>
 			<title>Immich Kiosk</title>
+			<link rel="manifest" href="/assets/manifest.json"/>
 			<link rel="stylesheet" href={ string(templ.URL(fmt.Sprintf("/assets/css/kiosk.%s.css", viewData.KioskVersion))) }/>
 			<link
 				rel="apple-touch-icon"