implement update prompt, clean service worker handling

dist/index.html

@@ -15,7 +15,6 @@
         <link rel="stylesheet" href="index.css" />
         <link rel="manifest" href="manifest.json" />
         <link rel="icon" href="icon.png" />
-        <script src="support.js" defer></script>
 
         <script src="index.js" defer></script>
     </head>

dist/index.js

@@ -353,6 +353,7 @@
       settingsButton: "Settings",
       manageStorageButton: "Manage storage",
       transferDataButton: "Transfer or export data",
+      updateButton: (version) => `Update to ${version}`,
       scrollToChatButton: "Chats",
       ///
       backToOverviewAudioLabel: "go back to overview",
@@ -596,6 +597,7 @@
         settingsButton: "Einstellungen",
         manageStorageButton: "Daten verwalten",
         transferDataButton: "Daten \xFCbertragen",
+        updateButton: (version) => `Aktualisieren: ${version}`,
         scrollToChatButton: "Chats",
         backToOverviewAudioLabel: "zur\xFCck zur \xFCbersicht",
         chatsHeadline: "Chats",
@@ -820,6 +822,7 @@
         settingsButton: "Ajustes",
         manageStorageButton: "Gestionar almacenamiento",
         transferDataButton: "Enviar o exportar archivos",
+        updateButton: (version) => `Actualizar a ${version}`,
         scrollToChatButton: "Chats",
         backToOverviewAudioLabel: "volver al resumen",
         chatsHeadline: "Chats",
@@ -1314,7 +1317,12 @@
       this.connectionModel = connectionModel2;
       this.chatListModel = chatListModel2;
       this.fileTransferModel = fileTransferModel2;
-      this.BUILD = "Build 26.09.24.D";
+      this.swRegistration = void 0;
+      this.version = new State("");
+      this.latestVersion = new State("");
+      this.noUpdateAvailable = createProxyState([this.latestVersion], () => {
+        return this.latestVersion.value == "" || this.latestVersion.value == this.version.value;
+      });
       // CONTEXT
       this.contextStack = /* @__PURE__ */ new Map();
       this.closeContext = (contextId, fromHistoryEvent = false) => {
@@ -1356,12 +1364,46 @@
       };
       // DRAG & DROP
       this.draggedObject = new State(void 0);
+      // OFFLINE MODE & UPDATE
+      this.configureServiceWorker = async () => {
+        if ("serviceWorker" in navigator) {
+          try {
+            this.swRegistration = await navigator.serviceWorker.register(
+              "sw.js",
+              {
+                scope: "/"
+              }
+            );
+            if (this.swRegistration.active) {
+              console.log("Service worker active");
+            }
+          } catch (error) {
+            console.error(`Could not install service worker: ${error}`);
+          }
+        }
+        fetch("/version").then(async (response) => {
+          this.version.value = await response.text();
+        });
+        fetch("/latestVersion").then(async (response) => {
+          this.latestVersion.value = (await response.text()).replace("\n", "");
+          console.log("LATEST", this.latestVersion.value);
+        });
+      };
+      this.update = async () => {
+        if (!this.swRegistration) return;
+        await this.swRegistration.update();
+        window.location.reload();
+      };
       this.translations = allTranslations[settingsModel2.language] || allTranslations.en;
       document.body.addEventListener("keydown", this.handleKeyDown);
       window.onpopstate = () => {
         if (!this.context) return;
         this.closeContext(this.context.contextId, true);
       };
+      this.configureServiceWorker();
+      this.noUpdateAvailable.subscribe(() => {
+        console.log(this.noUpdateAvailable.value, this.latestVersion.value, this.version.value);
+      });
       this.startChron();
       this.chronHandlerManager.setHandler(
         "core-view-model",
@@ -4955,6 +4997,7 @@
 
   // src/View/homePage.tsx
   function HomePage(coreViewModel2, storageViewModel2, settingsViewModel2, connectionViewModel2, fileTransferViewModel2, chatListViewModel2) {
+    const updateText = createProxyState([coreViewModel2.latestVersion], () => coreViewModel2.translations.homePage.updateButton(coreViewModel2.latestVersion.value));
     const overviewSection = /* @__PURE__ */ createElement("div", { id: "overview-section" }, /* @__PURE__ */ createElement("h2", null, coreViewModel2.translations.homePage.overviewHeadline), /* @__PURE__ */ createElement("label", { class: "tile flex-no" }, /* @__PURE__ */ createElement("span", { class: "icon" }, "cell_tower"), /* @__PURE__ */ createElement("div", null, /* @__PURE__ */ createElement("span", null, coreViewModel2.translations.homePage.serverAddress), /* @__PURE__ */ createElement(
       "input",
       {
@@ -5029,6 +5072,20 @@
       storageViewModel2.showStorageModal,
       coreViewModel2.translations.homePage.manageStorageButton,
       "hard_drive"
+    ), /* @__PURE__ */ createElement(
+      "button",
+      {
+        class: "primary",
+        "on:click": coreViewModel2.update,
+        "toggle:hidden": coreViewModel2.noUpdateAvailable
+      },
+      /* @__PURE__ */ createElement(
+        "span",
+        {
+          "subscribe:innerText": updateText
+        }
+      ),
+      /* @__PURE__ */ createElement("span", { class: "icon" }, "update")
     ), /* @__PURE__ */ createElement("div", { class: "mobile-only" }, /* @__PURE__ */ createElement("hr", null), /* @__PURE__ */ createElement("div", { class: "flex-row justify-end" }, /* @__PURE__ */ createElement("button", { class: "ghost width-50", "on:click": scrollToChat }, coreViewModel2.translations.homePage.scrollToChatButton, /* @__PURE__ */ createElement("span", { class: "icon" }, "arrow_forward")))));
     const chatSection = /* @__PURE__ */ createElement("div", { id: "chat-section" }, /* @__PURE__ */ createElement("h2", null, coreViewModel2.translations.homePage.chatsHeadline), /* @__PURE__ */ createElement("div", { class: "flex-row width-input" }, /* @__PURE__ */ createElement(
       "input",
@@ -7221,7 +7278,7 @@
     return /* @__PURE__ */ createElement("div", { class: "slide-up" }, /* @__PURE__ */ createElement("h2", null, coreViewModel2.translations.homePage.appName), /* @__PURE__ */ createElement("hr", null), /* @__PURE__ */ createElement("div", { class: "flex-column gap" }, InfoTile(
       "build",
       coreViewModel2.translations.settings.version,
-      settingsViewModel2.coreViewModel.BUILD
+      settingsViewModel2.coreViewModel.version
     )));
   }
   function SettingsRegionalPane(coreViewModel2, settingsViewModel2) {

dist/support.js

@@ -1,35 +0,0 @@
-// TABS
-document.querySelector("main").addEventListener("scroll", () => {
-    const links = document.querySelectorAll(".tab-link");
-    links.forEach((element) => element.removeAttribute("active"));
-
-    const pageWidth = document.querySelector("main > article").offsetWidth;
-    const scroll = document.querySelector("main").scrollLeft;
-    const currentPage = Math.round(scroll / pageWidth);
-
-    if (links[currentPage]) links[currentPage].setAttribute("active", "");
-});
-
-// SERVICE WORKER
-async function registerServiceWorker() {
-    if ("serviceWorker" in navigator) {
-        try {
-            const registration = await navigator.serviceWorker.register(
-                "/sw.js",
-                {
-                    scope: "/",
-                },
-            );
-            if (registration.installing) {
-                setTimeout(() => window.location.reload(), 500);
-            } else if (registration.active) {
-                console.log("Service worker active");
-                registration.update();
-            }
-        } catch (error) {
-            console.error(`Could not install service worker: ${error}`);
-        }
-    }
-}
-
-registerServiceWorker();

dist/sw.js

@@ -1,32 +1,53 @@
-const CACHE_VERSION = "3";
+const VERSION = "2610 Beta 1"
 
-self.addEventListener("fetch", (event) => {
-    event.respondWith(handleRequest(event));
+function processUrl(event) {
+    const url = event.request.url;
+    const fileName = url.split("/").pop();
+    return {url, fileName};
+}
+
+self.addEventListener("install", () => {
+    self.skipWaiting();
 });
 
-async function handleRequest(event) {
+self.addEventListener("fetch", async (event) => {
+    console.log(VERSION);
+    const {url, fileName}=processUrl(event);
+    event.respondWith(handleRequest(event, url, fileName));
+});
+
+async function handleRequest(event, url, fileName) {
+    switch (fileName) {
+	case "version":
+	    const response = new Response(VERSION);
+	    return response;
+	case "latestVersion":
+	    return await fetch("/version.txt", {cache: "no-cache"})
+    }
     const response = await getFromCache(event);
+
     if (response) {
-        fetchAndCache(event); // Call this but don't await, allowing the cache to update in the background
+	fetchAndCache(event, fileName); // Call this but don't await, allowing the cache to update in the background
 	return response;
     }
-    return fetchAndCache(event);
+    return fetchAndCache(event, fileName);
 }
 
 async function getFromCache(event) {
     const request = event.request;
-    const cache = await caches.open(CACHE_VERSION);
+    const cache = await caches.open(VERSION);
     const response = await cache.match(request);
     return response;
 }
 
-async function fetchAndCache(event) {
+async function fetchAndCache(event, fileName) {
     const request = event.request;
+
     const response = await fetch(request, { cache: "no-cache" });
     if (response.status === 200) {
 	// Only cache successful responses
-        const cache = await caches.open(CACHE_VERSION);
-        cache.put(request, response.clone());
+	const cache = await caches.open(VERSION);
+	await cache.put(request, response.clone());
     }
     return response;
 }

dist/version.txt

@@ -0,0 +1 @@
+2610 Beta 1

src/View/Modals/settingsModal.tsx

@@ -122,7 +122,7 @@ function SettingsInfoPane(
                 {InfoTile(
                     "build",
                     coreViewModel.translations.settings.version,
-                    settingsViewModel.coreViewModel.BUILD,
+                    settingsViewModel.coreViewModel.version,
                 )}
             </div>
         </div>

src/View/homePage.tsx

@@ -19,6 +19,8 @@ export function HomePage(
     chatListViewModel: ChatListViewModel,
 ) {
     // sections
+    const updateText = React.createProxyState([coreViewModel.latestVersion], ()=>coreViewModel.translations.homePage.updateButton(coreViewModel.latestVersion.value));
+
     const overviewSection = (
 	<div id="overview-section">
 	    <h2>{coreViewModel.translations.homePage.overviewHeadline}</h2>
@@ -136,6 +138,17 @@ export function HomePage(
 	    "hard_drive",
 	)}
 
+	<button
+	    class="primary"
+	    on:click={coreViewModel.update}
+	    toggle:hidden={coreViewModel.noUpdateAvailable}
+	>
+	    <span
+		subscribe:innerText={updateText}
+	    ></span>
+	    <span class="icon">update</span>
+	</button>
+
 	<div class="mobile-only">
 	    <hr></hr>
 

src/View/translations.ts

@@ -73,6 +73,8 @@ const englishTranslations = {
         manageStorageButton: "Manage storage",
         transferDataButton: "Transfer or export data",
 
+	updateButton: (version: string) => `Update to ${version}`,
+
         scrollToChatButton: "Chats",
 
         ///
@@ -412,6 +414,8 @@ export const allTranslations: {
 	    manageStorageButton: "Daten verwalten",
 	    transferDataButton: "Daten übertragen",
 	
+	    updateButton: (version: string) => `Aktualisieren: ${version}`,
+
 	    scrollToChatButton: "Chats",
 
 	    backToOverviewAudioLabel: "zurück zur übersicht",
@@ -717,6 +721,8 @@ export const allTranslations: {
 	    manageStorageButton: "Gestionar almacenamiento",
 	    transferDataButton: "Enviar o exportar archivos",
 	    
+	    updateButton: (version: string) => `Actualizar a ${version}`,
+
 	    scrollToChatButton: "Chats",
 
 	    backToOverviewAudioLabel: "volver al resumen",

src/ViewModel/Global/coreViewModel.ts

@@ -9,7 +9,13 @@ import ConnectionModel from "../../Model/Global/connectionModel";
 import ChatListModel from "../../Model/Chat/chatListModel";
 
 export default class CoreViewModel {
-    readonly BUILD = "Build 26.09.24.D";
+    swRegistration: ServiceWorkerRegistration|undefined = undefined;
+
+    version: React.State<string>  = new React.State("");
+    latestVersion: React.State<string>  = new React.State("");
+    noUpdateAvailable: React.State<boolean> = React.createProxyState([this.latestVersion], () => {
+	return (this.latestVersion.value == "" || this.latestVersion.value == this.version.value) 
+    })
 
     translations: Translations;
 
@@ -84,6 +90,39 @@ export default class CoreViewModel {
     // DRAG & DROP
     draggedObject: React.State<any> = new React.State<any>(undefined);
 
+    // OFFLINE MODE & UPDATE
+    configureServiceWorker = async (): Promise<void> => {
+	if ("serviceWorker" in navigator) {
+	    try {
+		this.swRegistration = await navigator.serviceWorker.register(
+		    "sw.js",
+		    {
+			scope: "/",
+		    },
+		);
+		if (this.swRegistration.active) {
+		    console.log("Service worker active");
+		}
+	    } catch (error) {
+		console.error(`Could not install service worker: ${error}`);
+	    }
+	}
+	
+	fetch("/version").then(async response => {
+	    this.version.value = await response.text();
+	});
+	fetch("/latestVersion").then(async response => {
+	    this.latestVersion.value = (await response.text()).replace("\n", "");
+	    console.log("LATEST", this.latestVersion.value);
+	})
+    }
+
+    update = async (): Promise<void> => {
+	if (!this.swRegistration) return;
+	await this.swRegistration.update();
+	window.location.reload();
+    }
+
     // init
     constructor(
 	public readonly storageModel: StorageModel,
@@ -102,6 +141,11 @@ export default class CoreViewModel {
 	    this.closeContext(this.context.contextId, true);
 	};
 
+	this.configureServiceWorker();
+	this.noUpdateAvailable.subscribe(() => {
+	    console.log(this.noUpdateAvailable.value, this.latestVersion.value, this.version.value);
+	})
+
 	this.startChron();
 	this.chronHandlerManager.setHandler(
 	    "core-view-model",