Merge branch '23-app-versioning-and-updates' into 'main'

Resolve "app versioning and updates" Closes #23 See merge request htwk-software/htwkalender-pwa!21
2025-07-16 01:28:50 +02:00 · 2024-09-09 14:12:35 +00:00
parent 00009f7bfe b72cdd85e1
commit 5aed9c5f1c
14 changed files with 131 additions and 76 deletions
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@ -31,9 +31,7 @@
        "source-sans": "^3.46.0",
        "vue": "^3.4.11",
        "vue-i18n": "^9.13.1",
-        "vue-router": "^4.3.2",
-        "workbox-core": "^7.1.0",
-        "workbox-precaching": "^7.1.0"
+        "vue-router": "^4.3.2"
      },
      "devDependencies": {
        "@types/node": "^20.12.12",
@ -50,7 +48,9 @@
        "vite": "^5.2.11",
        "vite-plugin-pwa": "^0.20.0",
        "vitest": "^1.6.0",
-        "vue-tsc": "^1.8.27"
+        "vue-tsc": "^1.8.27",
+        "workbox-core": "^7.1.0",
+        "workbox-precaching": "^7.1.0"
      }
    },
    "node_modules/@ampproject/remapping": {
@ -2983,28 +2983,6 @@
        }
      }
    },
-    "node_modules/@types/eslint": {
-      "version": "8.56.10",
-      "resolved": "https://registry.npmjs.org/@types/eslint/-/eslint-8.56.10.tgz",
-      "integrity": "sha512-Shavhk87gCtY2fhXDctcfS3e6FdxWkCx1iUZ9eEUbh7rTqlZT0/IzOkCOVt0fCjcFuZ9FPYfuezTBImfHCDBGQ==",
-      "dev": true,
-      "peer": true,
-      "dependencies": {
-        "@types/estree": "*",
-        "@types/json-schema": "*"
-      }
-    },
-    "node_modules/@types/eslint-scope": {
-      "version": "3.7.7",
-      "resolved": "https://registry.npmjs.org/@types/eslint-scope/-/eslint-scope-3.7.7.tgz",
-      "integrity": "sha512-MzMFlSLBqNF2gcHWO0G1vP/YQyfvrxZ0bF+u7mzUdZ1/xK4A4sru+nraZz5i3iEIk1l1uyicaDVTB4QbbEkAYg==",
-      "dev": true,
-      "peer": true,
-      "dependencies": {
-        "@types/eslint": "*",
-        "@types/estree": "*"
-      }
-    },
    "node_modules/@types/estree": {
      "version": "1.0.5",
      "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.5.tgz",
@ -3826,11 +3804,12 @@
        "node": ">=0.4.0"
      }
    },
-    "node_modules/acorn-import-assertions": {
-      "version": "1.9.0",
-      "resolved": "https://registry.npmjs.org/acorn-import-assertions/-/acorn-import-assertions-1.9.0.tgz",
-      "integrity": "sha512-cmMwop9x+8KFhxvKrKfPYmN6/pKTYYHBqLa0DfvVZcKMJWNyWLnaqND7dx/qn66R7ewM1UX5XMaDVP5wlVTaVA==",
+    "node_modules/acorn-import-attributes": {
+      "version": "1.9.5",
+      "resolved": "https://registry.npmjs.org/acorn-import-attributes/-/acorn-import-attributes-1.9.5.tgz",
+      "integrity": "sha512-n02Vykv5uA3eHGM/Z2dQrcD56kL8TyDb2p1+0P83PClMnC/nc+anbQRhIOWnSq4Ke/KvDPrY3C9hDtC/A3eHnQ==",
      "dev": true,
+      "license": "MIT",
      "peer": true,
      "peerDependencies": {
        "acorn": "^8"
@ -4633,10 +4612,11 @@
      "dev": true
    },
    "node_modules/enhanced-resolve": {
-      "version": "5.16.1",
-      "resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-5.16.1.tgz",
-      "integrity": "sha512-4U5pNsuDl0EhuZpq46M5xPslstkviJuhrdobaRDBk2Jy2KO37FDAJl4lb2KlNabxT0m4MTK2UHNrsAcphE8nyw==",
+      "version": "5.17.1",
+      "resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-5.17.1.tgz",
+      "integrity": "sha512-LMHl3dXhTcfv8gM4kEzIUeTQ+7fpdA0l2tUf34BddXPkz2A5xJ5L/Pchd5BL6rdccM9QGvu0sWZzK1Z1t4wwyg==",
      "dev": true,
+      "license": "MIT",
      "peer": true,
      "dependencies": {
        "graceful-fs": "^4.2.4",
@ -6331,10 +6311,11 @@
      }
    },
    "node_modules/micromatch": {
-      "version": "4.0.7",
-      "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.7.tgz",
-      "integrity": "sha512-LPP/3KorzCwBxfeUuZmaR6bG2kdeHSbe0P2tY3FLRU4vYrjYz5hI4QZwV0njUx3jeuKe67YukQ1LSPZBKDqO/Q==",
+      "version": "4.0.8",
+      "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.8.tgz",
+      "integrity": "sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA==",
      "dev": true,
+      "license": "MIT",
      "dependencies": {
        "braces": "^3.0.3",
        "picomatch": "^2.3.1"
@ -7664,6 +7645,7 @@
      "resolved": "https://registry.npmjs.org/tapable/-/tapable-2.2.1.tgz",
      "integrity": "sha512-GNzQvQTOIP6RyTfE2Qxb8ZVlNmw0n88vp1szwWRimP02mnTsx3Wtn5qRdqY9w2XduFNUgvOwhNnQsjwCp+kqaQ==",
      "dev": true,
+      "license": "MIT",
      "peer": true,
      "engines": {
        "node": ">=6"
@ -8409,22 +8391,22 @@
      "dev": true
    },
    "node_modules/webpack": {
-      "version": "5.91.0",
-      "resolved": "https://registry.npmjs.org/webpack/-/webpack-5.91.0.tgz",
-      "integrity": "sha512-rzVwlLeBWHJbmgTC/8TvAcu5vpJNII+MelQpylD4jNERPwpBJOE2lEcko1zJX3QJeLjTTAnQxn/OJ8bjDzVQaw==",
+      "version": "5.94.0",
+      "resolved": "https://registry.npmjs.org/webpack/-/webpack-5.94.0.tgz",
+      "integrity": "sha512-KcsGn50VT+06JH/iunZJedYGUJS5FGjow8wb9c0v5n1Om8O1g4L6LjtfxwlXIATopoQu+vOXXa7gYisWxCoPyg==",
      "dev": true,
+      "license": "MIT",
      "peer": true,
      "dependencies": {
-        "@types/eslint-scope": "^3.7.3",
        "@types/estree": "^1.0.5",
        "@webassemblyjs/ast": "^1.12.1",
        "@webassemblyjs/wasm-edit": "^1.12.1",
        "@webassemblyjs/wasm-parser": "^1.12.1",
        "acorn": "^8.7.1",
-        "acorn-import-assertions": "^1.9.0",
+        "acorn-import-attributes": "^1.9.5",
        "browserslist": "^4.21.10",
        "chrome-trace-event": "^1.0.2",
-        "enhanced-resolve": "^5.16.0",
+        "enhanced-resolve": "^5.17.1",
        "es-module-lexer": "^1.2.1",
        "eslint-scope": "5.1.1",
        "events": "^3.2.0",
@ -8808,6 +8790,7 @@
      "version": "7.1.0",
      "resolved": "https://registry.npmjs.org/workbox-core/-/workbox-core-7.1.0.tgz",
      "integrity": "sha512-5KB4KOY8rtL31nEF7BfvU7FMzKT4B5TkbYa2tzkS+Peqj0gayMT9SytSFtNzlrvMaWgv6y/yvP9C0IbpFjV30Q==",
+      "dev": true,
      "license": "MIT"
    },
    "node_modules/workbox-expiration": {
@ -8845,6 +8828,7 @@
      "version": "7.1.0",
      "resolved": "https://registry.npmjs.org/workbox-precaching/-/workbox-precaching-7.1.0.tgz",
      "integrity": "sha512-LyxzQts+UEpgtmfnolo0hHdNjoB7EoRWcF7EDslt+lQGd0lW4iTvvSe3v5JiIckQSB5KTW5xiCqjFviRKPj1zA==",
+      "dev": true,
      "license": "MIT",
      "dependencies": {
        "workbox-core": "7.1.0",
@ -8879,6 +8863,7 @@
      "version": "7.1.0",
      "resolved": "https://registry.npmjs.org/workbox-routing/-/workbox-routing-7.1.0.tgz",
      "integrity": "sha512-oOYk+kLriUY2QyHkIilxUlVcFqwduLJB7oRZIENbqPGeBP/3TWHYNNdmGNhz1dvKuw7aqvJ7CQxn27/jprlTdg==",
+      "dev": true,
      "dependencies": {
        "workbox-core": "7.1.0"
      }
@ -8887,6 +8872,7 @@
      "version": "7.1.0",
      "resolved": "https://registry.npmjs.org/workbox-strategies/-/workbox-strategies-7.1.0.tgz",
      "integrity": "sha512-/UracPiGhUNehGjRm/tLUQ+9PtWmCbRufWtV0tNrALuf+HZ4F7cmObSEK+E4/Bx1p8Syx2tM+pkIrvtyetdlew==",
+      "dev": true,
      "dependencies": {
        "workbox-core": "7.1.0"
      }
--- a/frontend/package.json
+++ b/frontend/package.json
@ -1,7 +1,7 @@
 {
  "name": "htwkalender",
  "private": true,
-  "version": "0.0.0",
+  "version": "1.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
--- a/frontend/public/sw.js
+++ b/frontend/public/sw.js
@ -1,5 +1,5 @@
-import { precacheAndRoute, cleanupOutdatedCaches } from 'workbox-precaching';
-import { clientsClaim } from 'workbox-core';
+import { precacheAndRoute, cleanupOutdatedCaches } from "workbox-precaching";
+import { clientsClaim } from "workbox-core";

 self.skipWaiting();
 clientsClaim();
@ -10,19 +10,19 @@ cleanupOutdatedCaches();
 precacheAndRoute(self.__WB_MANIFEST);

 // Custom precaching logic for the /api/modules endpoint
-self.addEventListener('install', (event) => {
+self.addEventListener("install", (event) => {
  event.waitUntil(
-    caches.open('api-modules-cache').then((cache) => {
-      return fetch('/api/modules')
+    caches.open("api-modules-cache").then((cache) => {
+      return fetch("/api/modules")
        .then((response) => {
          if (response.ok) {
-            return cache.put('/api/modules', response);
+            return cache.put("/api/modules", response);
          }
-          throw new Error('Failed to fetch /api/modules');
+          throw new Error("Failed to fetch /api/modules");
        })
        .catch((error) => {
-          console.error('Precaching /api/modules failed:', error);
+          console.error("Precaching /api/modules failed:", error);
        });
-    })
+    }),
  );
 });
--- a/frontend/src/components/AppVersion.vue
+++ b/frontend/src/components/AppVersion.vue
@ -0,0 +1,9 @@
+<script lang="ts" setup>
+const version = __APP_VERSION__;
+</script>
+
+<template>
+  <p>
+    {{ version }}
+  </p>
+</template>
--- a/frontend/src/components/LocaleSwitcher.vue
+++ b/frontend/src/components/LocaleSwitcher.vue
@ -68,12 +68,7 @@ updateLocale(settingsStore().locale);
    <template #value="slotProps">
      <div v-if="slotProps.value" class="flex align-items-center">
        <div class="mr-2 flag">{{ displayIcon(slotProps.value) }}</div>
-        <div
-          style="
-            font-family: &quot;Twemoji Country Flags&quot;,
-              &quot;Helvetica&quot;, &quot;Comic Sans&quot;, serif;
-          "
-        >
+        <div>
          {{ displayCountry(slotProps.value) }}
        </div>
      </div>
--- a/frontend/src/components/ReloadPwa.vue
+++ b/frontend/src/components/ReloadPwa.vue
@ -0,0 +1,39 @@
+<script lang="ts" setup>
+import { useToast } from "primevue/usetoast";
+
+const Toast = useToast();
+
+const updateCache = () => {
+  if ("serviceWorker" in navigator) {
+    navigator.serviceWorker.ready.then((registration) => {
+      registration.unregister().then((boolean) => {
+        if (boolean) {
+          Toast.add({
+            severity: "success",
+            summary: "Service Worker",
+            detail: "Service Worker has been unregistered",
+            life: 1000,
+          });
+
+          setTimeout(() => {
+            window.location.reload();
+          }, 1000);
+        } else {
+          Toast.add({
+            severity: "error",
+            summary: "Service Worker",
+            detail: "Service Worker could not be unregistered",
+            life: 1000,
+          });
+        }
+      });
+    });
+  }
+};
+</script>
+
+<template>
+  <Button @click="updateCache()">
+    {{ $t("settings.reloadPwa") }}
+  </Button>
+</template>
--- a/frontend/src/i18n/translations/de.json
+++ b/frontend/src/i18n/translations/de.json
@ -260,6 +260,8 @@
    "subTitle": "Hier kannst du deine Einstellungen bearbeiten.",
    "language": "Sprache einstellen",
    "darkMode": "Design auswählen",
-    "defaultPage": "Standardseite"
+    "defaultPage": "Standardseite",
+    "version": "App-Version",
+    "reloadPwa": "App neu laden"
  }
 }
--- a/frontend/src/i18n/translations/en.json
+++ b/frontend/src/i18n/translations/en.json
@ -265,6 +265,8 @@
    "subTitle": "Here you can change your settings.",
    "language": "Choose your language",
    "darkMode": "Switch page theme",
-    "defaultPage": "Default page"
+    "defaultPage": "Default page",
+    "version": "Version",
+    "reloadPwa": "Reload PWA"
  }
 }
--- a/frontend/src/i18n/translations/ja.json
+++ b/frontend/src/i18n/translations/ja.json
@ -260,6 +260,8 @@
    "subTitle": "ここで設定を編集できます。",
    "language": "言語",
    "darkMode": "ダークモード",
-    "defaultPage": "デフォルトページ"
+    "defaultPage": "デフォルトページ",
+    "version": "バージョン",
+    "reloadPwa": "PWAを再読み込み"
  }
 }
--- a/frontend/src/view/EditCalendarView.vue
+++ b/frontend/src/view/EditCalendarView.vue
@ -75,7 +75,7 @@ function loadCalendar(): void {
      }
    });
  } else {
-    if(tokenStore().feed.id === token.value) {
+    if (tokenStore().feed.id === token.value) {
      // get data from tokenStore feed if offline
      const offlineModules = tokenStore().feed.modules;

@ -90,7 +90,6 @@ function loadCalendar(): void {
          detail: t("editCalendarView.calendarLoadedFromOfflineMode"),
          life: 3000,
        });
-
      } else {
        toast.add({
          severity: "info",
@ -108,9 +107,9 @@ function loadCalendar(): void {
      });
      return;
    }
-      modules.value = moduleStore().modules;
-      router.push("/edit-calendar");
-    }
+    modules.value = moduleStore().modules;
+    router.push("/edit-calendar");
+  }
 }
 </script>

--- a/frontend/src/view/SettingsView.vue
+++ b/frontend/src/view/SettingsView.vue
@ -3,6 +3,8 @@ import LocaleSwitcher from "@/components/LocaleSwitcher.vue";
 import { ref } from "vue";
 import DarkModeSwitcher from "@/components/DarkModeSwitcher.vue";
 import DefaultPageSwitcher from "@/components/DefaultPageSwitcher.vue";
+import AppVersion from "@/components/AppVersion.vue";
+import ReloadPwa from "@/components/ReloadPwa.vue";

 const icon = "pi pi-cog";
 const isDark = ref(true);
@ -61,11 +63,26 @@ function handleDarkModeToggled(isDarkVar: boolean) {
            ></DarkModeSwitcher>
          </div>
        </div>
+        <div class="grid my-2">
+          <div class="col text-left">
+            {{ $t("settings.version") }}
+          </div>
+          <div class="col text-center">
+            <AppVersion />
+          </div>
+        </div>
+        <div class="grid my-2">
+          <div class="col text-center"></div>
+          <div class="col text-center">
+            <ReloadPwa />
+          </div>
+        </div>
      </div>
    </div>
  </div>
 </template>
-<style scoped>
+
+<style lang="css" scoped>
 .col {
  display: flex;
  justify-content: center;
--- a/frontend/src/vite-env.d.ts
+++ b/frontend/src/vite-env.d.ts
@ -17,3 +17,5 @@
 /// <reference types="vite/client" />

 declare module "ical.js";
+
+declare const __APP_VERSION__: string;
--- a/frontend/tsconfig.json
+++ b/frontend/tsconfig.json
@ -3,7 +3,7 @@
    "target": "ES2020",
    "useDefineForClassFields": true,
    "module": "ESNext",
-    "types": ["node"],
+    "types": ["node", "vite-plugin-pwa/vue"],
    "lib": ["ES2020", "DOM", "DOM.Iterable"],
    "skipLibCheck": true,
    /* Bundler mode */
--- a/frontend/vite.config.ts
+++ b/frontend/vite.config.ts
@ -33,7 +33,7 @@ export default defineConfig({
        "apple-touch-icon.png",
        "mask-icon.svg",
        "robots.txt",
-        "sitemap.xml"
+        "sitemap.xml",
      ],
      manifest: {
        name: "HTWKalender",
@ -87,16 +87,15 @@ export default defineConfig({
        ],
      },
      registerType: "autoUpdate",
-      devOptions: {
-        enabled: true,
-        /* when using generateSW the PWA plugin will switch to classic */
-        type: "module",
-        navigateFallback: "index.html",
-        suppressWarnings: true,
-      },
      strategies: "injectManifest",
+      injectManifest: {
+        globPatterns: ["**/*.{js,css,html,png,svg}"],
+      },
    }),
  ],
+  define: {
+    __APP_VERSION__: JSON.stringify(process.env.npm_package_version),
+  },
  resolve: {
    alias: {
      "@": fileURLToPath(new URL("./src", import.meta.url)),
@ -116,6 +115,9 @@ export default defineConfig({
      },
    },
  },
+  build: {
+    sourcemap: true,
+  },
  esbuild: {
    supported: {
      "top-level-await": true,