enhance: enable pwa install

2025-01-11 14:45:48 +01:00 · 2025-01-11 14:45:48 +01:00 · 3f3aa040d9
commit 3f3aa040d9
parent 260478af69
14 changed files with 48 additions and 10 deletions
--- a/README.md
+++ b/README.md
@ -31,13 +31,14 @@ services:
    restart: unless-stopped

    #environment:
-    #  - SERVERADDRESS=<backend_url (https://... | http://...)> # wichtig: ohne pfad
+    #  - SERVERADDRESS=<backend_url (https://... | http://...)> # wichtig: ohne Pfad
    #  - APPNAMEOVERWRITE=Mitgliederverwaltung # ersetzt den Namen FF-Admin auf der Login-Seite und sonstigen Positionen in der Oberfläche
    #  - IMPRINTLINK=https://mywebsite-imprint-url
    #  - PRIVACYLINK=https://mywebsite-privacy-url
    #  - CUSTOMLOGINMESSAGE=betrieben von xy
    #volumes:
-    #  - <volume|local path>/myfavicon.png:/usr/share/nginx/html/favicon.png
+    #  - <volume|local path>/myfavicon.ico:/usr/share/nginx/html/favicon.ico # 48x48 px Auflösung
+    #  - <volume|local path>/myfavicon.png:/usr/share/nginx/html/favicon.png # 512x512 px Auflösung - wird als pwa Icon genutzt
    #  - <volume|local path>/mylogo.png:/usr/share/nginx/html/Logo.png
 ```

@ -63,7 +64,7 @@ npm run start

 ### Konfiguration

-Ein eigenes favicon und Logo kann über ein volume ausgetauscht werden.
+Ein eigenes Favicon und Logo kann über das verwenden Volume ausgetauscht werden. Es dürfen jedoch nur einzelne Dateien ausgetauscht werden.

 ## Einrichtung

--- a/entrypoint.sh
+++ b/entrypoint.sh
@ -1,9 +1,10 @@
 #!/bin/sh

 keys="SERVERADDRESS APPNAMEOVERWRITE IMPRINTLINK PRIVACYLINK CUSTOMLOGINMESSAGE"
+files="/usr/share/nginx/html/assets/config-*.js /usr/share/nginx/html/manifest.webmanifest"

 # Replace env vars in files served by NGINX
-for file in /usr/share/nginx/html/assets/config-*.js
+for file in $files
 do
  echo "Processing $file ...";
  for key in $keys
--- a/index.html
+++ b/index.html
@ -4,7 +4,6 @@
    <meta charset="UTF-8" />
    <link rel="icon" type="image/png" href="/favicon.png" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Mitgliederverwaltung</title>
  </head>
  <body>
    <div id="app"></div>
--- a/package.json
+++ b/package.json
@ -12,7 +12,7 @@
    "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore",
    "format": "prettier --write src/",
    "bnp": "npm run build-only && npm run preview",
-    "generate-pwa-assets": "pwa-assets-generator --preset minimal-2023 public/CM.svg"
+    "generate-pwa-assets": "pwa-assets-generator --preset minimal-2023 public/fw-wappen.png"
  },
  "repository": {
    "type": "git",
--- a/public/favicon.ico
+++ b/public/favicon.ico
--- a/public/favicon.png
+++ b/public/favicon.png
--- a/public/fw-wappen.png
+++ b/public/fw-wappen.png
--- a/src/components/Header.vue
+++ b/src/components/Header.vue
@ -2,7 +2,7 @@
  <header class="flex flex-row h-16 min-h-16 justify-between p-3 md:px-5 bg-white shadow-sm">
    <RouterLink to="/" class="flex flex-row gap-2 align-bottom w-fit h-full">
      <img src="/Logo.png" alt="LOGO" class="h-full w-auto" />
-      <h1 v-if="false" class="font-bold text-3xl w-fit whitespace-nowrap">{{config.app_name_overwrite ?? "FF Admin"}}</h1>
+      <h1 v-if="false" class="font-bold text-3xl w-fit whitespace-nowrap">{{config.app_name_overwrite || "FF Admin"}}</h1>
    </RouterLink>
    <div class="flex flex-row gap-2 items-center">
      <div v-if="authCheck" class="hidden md:flex flex-row gap-2 h-full align-middle">
--- a/src/components/admin/RoutingLink.vue
+++ b/src/components/admin/RoutingLink.vue
@ -24,7 +24,7 @@ export default defineComponent({
      default: "LINK",
    },
    link: {
-      type: Object as PropType<string | { name: string }>,
+      type: Object as PropType<string | { name: string, params?:{[key:string]:string} }>,
      default: "/",
    },
    active: {
--- a/src/router/index.ts
+++ b/src/router/index.ts
@ -9,6 +9,7 @@ import type { PermissionType, PermissionSection, PermissionModule } from "@/type
 import { resetMemberStores, setMemberId } from "./memberGuard";
 import { resetProtocolStores, setProtocolId } from "./protocolGuard";
 import { resetNewsletterStores, setNewsletterId } from "./newsletterGuard";
+import { config } from "../config";

 const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
@ -683,6 +684,10 @@ const router = createRouter({
  ],
 });

+router.afterEach((to, from) => {
+  document.title = config.app_name_overwrite || "FF Admin";
+});
+
 export default router;

 declare module "vue-router" {
--- a/src/serverCom.ts
+++ b/src/serverCom.ts
@ -28,6 +28,15 @@ http.interceptors.request.use(
      }
    }

+    const isPWA =
+      window.matchMedia("(display-mode: standalone)").matches ||
+      window.matchMedia("(display-mode: fullscreen)").matches;
+    if (isPWA) {
+      if (config.headers) {
+        config.headers["X-PWA-Client"] = isPWA ? "true" : "false";
+      }
+    }
+
    return config;
  },
  (error) => {
--- a/src/views/Login.vue
+++ b/src/views/Login.vue
@ -3,7 +3,7 @@
    <div class="max-w-md w-full space-y-8 pb-20">
      <div class="flex flex-col items-center gap-4">
        <img src="/Logo.png" alt="LOGO" class="h-36" />
-        <h2 class="text-center text-4xl font-extrabold text-gray-900">{{config.app_name_overwrite ?? "FF Admin"}}</h2>
+        <h2 class="text-center text-4xl font-extrabold text-gray-900">{{config.app_name_overwrite || "FF Admin"}}</h2>
      </div>

      <form class="flex flex-col gap-2" @submit.prevent="login">
--- a/src/views/account/View.vue
+++ b/src/views/account/View.vue
@ -1,7 +1,7 @@
 <template>
  <SidebarLayout>
    <template #sidebar>
-      <SidebarTemplate mainTitle="Mein Account" :topTitle="config.app_name_overwrite ?? 'FF Admin'" :showTopList="isOwner">
+      <SidebarTemplate mainTitle="Mein Account" :topTitle="config.app_name_overwrite || 'FF Admin'" :showTopList="isOwner">
        <template v-if="isOwner" #topList>
          <RoutingLink
            title="Administration"
--- a/vite.config.ts
+++ b/vite.config.ts
@ -5,6 +5,7 @@ import vue from "@vitejs/plugin-vue";
 import vueDevTools from "vite-plugin-vue-devtools";
 import Markdown from "unplugin-vue-markdown/vite";
 import hljs from "highlight.js";
+import { VitePWA } from "vite-plugin-pwa";

 // https://vitejs.dev/config/
 export default defineConfig({
@ -34,6 +35,28 @@ export default defineConfig({
        });
      },
    }),
+    VitePWA({
+      registerType: "autoUpdate",
+      injectRegister: "auto",
+      includeAssets: ["favicon.png", "favicon.ico"],
+      manifest: {
+        name: "__APPNAMEOVERWRITE__",
+        short_name: "__APPNAMEOVERWRITE__",
+        theme_color: "#990b00",
+        icons: [
+          {
+            src: "favicon.ico",
+            sizes: "48x48",
+            type: "image/png",
+          },
+          {
+            src: "favicon.png",
+            sizes: "512x512",
+            type: "image/png",
+          },
+        ],
+      },
+    }),
  ],
  resolve: {
    alias: {