manifest stuff and install

main.py

@@ -1,6 +1,7 @@
 import gzip
 import json
 import os
+import re
 from datetime import datetime, timedelta
 from io import BytesIO
 from typing import Literal, Union
@@ -42,7 +43,7 @@
 ]
 
 INACTIVITY_TIMEOUT = timedelta(hours=5)  # 5 hours
-VERSION = '1.0.0'
+VERSION = '0.0.1'
 
 
 POSTGRES_USER = os.environ.get("POSTGRES_USER")
@@ -51,6 +52,7 @@
 POSTGRES_HOST = os.environ.get("POSTGRES_HOST")
 POSTGRES_PORT = os.environ.get("POSTGRES_PORT")
 
+
 class SingAlong:
     def __init__(self, host: tornado.websocket.WebSocketHandler):
         self.host = host
@@ -94,7 +96,9 @@ class ServiceWorkerHandler(tornado.web.RequestHandler):
     def get(self):
         self.set_header('Content-Type', 'application/javascript')
         with open("serviceWorker.js", "r") as file:
-            self.write(file.read())
+            script = file.read()
+            # script = re.sub(r"const VERSION = '.*?';", f"const VERSION = '{VERSION}';", script)
+            self.write(script)
 
 
 class VersionHandler(tornado.web.RequestHandler):

serviceWorker.js

@@ -1,13 +1,16 @@
-const CACHE_NAME = 'my-cache-v2';
+const CACHE_NAME = `cache`;
 const urlsToCache = [
     '/',
     '/static/favicon.png',
     '/static/icon.png',
     '/serviceWorker.js',
     '/dist/index.bundle.js',
+    '/dist/runtime.bundle.js',
+    '/dist/361.bundle.js',
     '/dist/index.html',
 ];
 
+// Install event: cache resources
 self.addEventListener('install', event => {
     event.waitUntil(
         caches.open(CACHE_NAME).then(cache => {
@@ -33,8 +36,9 @@ self.addEventListener('install', event => {
     );
 });
 
-
+// Fetch event: serve from cache, then network
 self.addEventListener('fetch', event => {
+    const url = new URL(event.request.url);
     if (event.request.method === 'GET') {
         event.respondWith(
             caches.match(event.request).then(cachedResponse => {
@@ -54,6 +58,7 @@ self.addEventListener('fetch', event => {
                     });
                 }).catch(error => {
                     console.error('Fetch failed:', error);
+                    // Return a fallback page or message
                     return new Response("You are offline, and this resource is not cached.");
                 });
             })
@@ -62,6 +67,7 @@ self.addEventListener('fetch', event => {
 });
 
 
+// Activate event: clear old caches
 self.addEventListener('activate', event => {
     event.waitUntil(
         caches.keys().then(keys => {
@@ -80,18 +86,21 @@ self.addEventListener('activate', event => {
     );
 });
 
-
+// Message event: update cache when version changes
 self.addEventListener('message', event => {
+    if (event.data.action === 'newUpdateCache') {
+        updateCache(true);
+    }
     if (event.data.action === 'updateCache') {
-        updateCache();
+        updateCache(false);
     }
 });
 
-function updateCache() {
+function updateCache(giveResponse) {
     caches.keys().then(function (names) {
         return Promise.all(names.map(name => caches.delete(name)));
     }).then(function () {
-        caches.open(CACHE_NAME).then(cache => {
+        return caches.open(CACHE_NAME).then(cache => {
             return Promise.all(
                 urlsToCache.map(url => {
                     return fetch(url, {
@@ -108,10 +117,12 @@ function updateCache() {
             );
         });
     }).then(() => {
-        self.clients.matchAll().then(clients => {
-            clients.forEach(client => client.postMessage({
-                action: 'cacheUpdated'
-            }));
-        });
+        if (giveResponse) {
+            self.clients.matchAll().then(clients => {
+                clients.forEach(client => client.postMessage({
+                    action: 'cacheUpdated'
+                }));
+            });
+        }
     });
-}
+}

src/index.ts

@@ -27,11 +27,31 @@ let publicFolders: string[] = [];
 const LONG_PRESS_DURATION = 500; // Duration in milliseconds to consider a long press
 let longPressTimer: number | null = null;
 
+interface BeforeInstallPromptEvent extends Event {
+    prompt: () => Promise<void>;
+    userChoice: Promise<{ outcome: 'accepted' | 'dismissed' }>;
+}
+
+let deferredPrompt: BeforeInstallPromptEvent | null = null;
+
+window.addEventListener('beforeinstallprompt', (e: Event) => {
+    e.preventDefault();
+    deferredPrompt = e as BeforeInstallPromptEvent;
+    const installButton = document.getElementById('install-pwa');
+    if (installButton) {
+        installButton.style.display = 'block';
+    }
+});
+
 
 function escapeRegExp(string: string): string {
     return string.replace(/[.*+\-?^${}()|[\]\\]/g, '\\$&');
 }
 
+function isMobileDevice() {
+    return /Mobi|Android/i.test(navigator.userAgent);
+}
+
 function saveCustomFoldersToLocalStorage(folders: FolderData[]) {
     localStorage.setItem('customFolders', JSON.stringify(folders));
 }
@@ -336,7 +356,6 @@ function getFileButton(file: FileData): HTMLElement {
     return fileContainer;
 }
 
-
 function getCustomFileButton(file: FileData, showText: boolean = true): HTMLElement {
     const fileButton = document.createElement('a');
     fileButton.className = 'custom-file-item padding surface-container no-round wave wrap';
@@ -664,13 +683,24 @@ function focusParagraph(index: number) {
 function showSuccessSnackbar(message: string) {
     const snackbar = document.getElementById('success-snackbar') as HTMLDivElement;
     snackbar.textContent = message;
-    ui('#success-snackbar');
+    ui('#success-snackbar', 3000);
+}
+
+function showUpdateCompleteSnackbar(message: string) {
+    const snackbar = document.getElementById('update-snackbar') as HTMLDivElement;
+    const snackbarUpdate = snackbar.querySelector('#update-snackbar-update') as HTMLAnchorElement;
+    snackbarUpdate.onclick = () => {
+        window.location.reload();
+    };
+    const snackbarText = snackbar.querySelector('#update-snackbar-text') as HTMLDivElement;
+    snackbarText.textContent = message;
+    ui('#update-snackbar', 6000);
 }
 
 function showErrorSnackbar(message: string) {
     const snackbar = document.getElementById('error-snackbar') as HTMLDivElement;
     snackbar.textContent = message;
-    ui('#error-snackbar');
+    ui('#error-snackbar', 6000);
 }
 
 function initializeFileContent() {
@@ -863,7 +893,14 @@ document.addEventListener('DOMContentLoaded', async () => {
     const selectSongsToggle = document.getElementById('select-songs-toggle') as HTMLInputElement;
     const clearSelectionButton = document.getElementById('clear-selection') as HTMLButtonElement;
     const customFolderList = document.getElementById('custom-folders-list') as HTMLDivElement;
+    const installPWA = document.getElementById('install-pwa') as HTMLButtonElement;
+    const installIcon = installPWA.querySelector('i') as HTMLElement;
 
+    if (isMobileDevice()) {
+        installIcon.textContent = `install_mobile`;
+    } else {
+        installIcon.textContent = `install_desktop`;
+    }
     clearSelectionButton.style.display = 'none';
 
     const currentHash = window.location.hash;
@@ -911,8 +948,19 @@ document.addEventListener('DOMContentLoaded', async () => {
             }
         });
     });
-
-
+    installPWA.addEventListener('click', async () => {
+        if (deferredPrompt) {
+            await deferredPrompt.prompt();
+            const choiceResult = await deferredPrompt.userChoice;
+            if (choiceResult.outcome === 'accepted') {
+                console.log('User accepted the install prompt');
+            } else {
+                console.log('User dismissed the install prompt');
+            }
+            deferredPrompt = null;
+            installPWA.style.display = 'none';
+        }
+    });
     document.querySelector('#text-increase')?.addEventListener('click', () => {
         const newSize = getFontSize() + 1;
         updateFontSize(newSize);
@@ -1176,13 +1224,46 @@ async function init() {
     try {
         if ('serviceWorker' in navigator) {
             try {
-                navigator.serviceWorker.register('/serviceWorker.js', { scope: '/' })
+                const registration = await navigator.serviceWorker.register('/serviceWorker.js', { scope: '/' });
                 console.log('ServiceWorker registration successful with scope: /');
+
+                if (navigator.onLine) {
+                    const response = await fetch('/version');
+                    const data = await response.json();
+                    const currentVersion = localStorage.getItem('latestVersion');
+
+                    if (currentVersion !== data.version) {
+                        navigator.serviceWorker.addEventListener('message', event => {
+                            if (event.data.action === 'cacheUpdated') {
+                                setTimeout(() => {
+                                    showUpdateCompleteSnackbar(`Update available: v${data.version}`);
+                                }, 5000);
+                            }
+                        });
+
+                        if (registration.active) {
+                            registration.active.postMessage({ action: 'newUpdateCache' });
+                            console.log('New version detected, updating cache...');
+                        }
+                        localStorage.setItem('latestVersion', data.version);
+                    }else{
+                        if (registration.active) {
+                            registration.active.postMessage({ action: 'updateCache' });
+                            console.log('Version check passed, updating cache...');
+                        }
+                    }
+                } else {
+                    console.log('Offline: Skipping version check');
+                }
             } catch (error) {
                 console.log('ServiceWorker registration failed: ', error);
             }
         }
+        const VERSION = localStorage.getItem('latestVersion') || '1.0.0';
+        const appNameVersion = document.getElementById('app-name-version') as HTMLHeadingElement;
+        appNameVersion.textContent = `Hutterite Bookshelf v${VERSION}`;
 
+        // Initialize databases and fetch data
         const customFolders = getCustomFoldersFromLocalStorage();
         const [globalDB, customDB] = await Promise.all([
             initGlobalDB(),
@@ -1235,4 +1316,4 @@ async function initializeUIAndStartApp() {
 }
 
 window.addEventListener('load', initializeUIAndStartApp);
-window.addEventListener('popstate', hashChanged);
+window.addEventListener('popstate', hashChanged);

static/css/style.css

@@ -102,4 +102,12 @@ h6 .highlight {
     padding-left: 1px;
     padding-right: 1px;
     display: inline-block !important;
-}
+}
+#install-pwa {
+    display: none
+ }
+ @media (display-mode: browser) {
+    #install-pwa {
+      display: flex
+    }
+ }

static/manifest.json

@@ -1,14 +1,73 @@
 {
     "name": "Hutterite Bookshelf",
     "short_name": "Hutterite Bookshelf",
-    "description": "Your own bookshelf",
+    "description": "A comprehensive app for accessing, managing, and sharing Hutterite literature.",
     "start_url": "/",
     "display": "standalone",
-    "background_color": "#ffffff",
-    "theme_color": "#000000",
-    "icons": [{
-        "src": "/static/icon.png",
-        "sizes": "1024x1024",
-        "type": "image/png"
-    }]
+    "background_color": "#161215",
+    "theme_color": "#161215",
+    "screenshots": [
+      {
+        "src": "screenshot1-wide.png",
+        "sizes": "1280x720",
+        "type": "image/png",
+        "form_factor": "wide"
+      },
+      {
+        "src": "screenshot2-mobile.png",
+        "sizes": "720x1280",
+        "type": "image/png",
+        "form_factor": "narrow"
+      }
+    ],
+    "icons": [
+        {
+          "purpose": "maskable",
+          "sizes": "1204x1204",
+          "src": "maskable_icon.png",
+          "type": "image/png"
+        },
+        {
+          "purpose": "maskable",
+          "sizes": "48x48",
+          "src": "maskable_icon_x48.png",
+          "type": "image/png"
+        },
+        {
+          "purpose": "maskable",
+          "sizes": "72x72",
+          "src": "maskable_icon_x72.png",
+          "type": "image/png"
+        },
+        {
+          "purpose": "maskable",
+          "sizes": "96x96",
+          "src": "maskable_icon_x96.png",
+          "type": "image/png"
+        },
+        {
+          "purpose": "maskable",
+          "sizes": "128x128",
+          "src": "maskable_icon_x128.png",
+          "type": "image/png"
+        },
+        {
+          "purpose": "maskable",
+          "sizes": "192x192",
+          "src": "maskable_icon_x192.png",
+          "type": "image/png"
+        },
+        {
+          "purpose": "maskable",
+          "sizes": "384x384",
+          "src": "maskable_icon_x384.png",
+          "type": "image/png"
+        },
+        {
+          "purpose": "maskable",
+          "sizes": "512x512",
+          "src": "maskable_icon_x512.png",
+          "type": "image/png"
+        }
+      ]
 }