From 87812d02d3ec71111ca7b31f70922eb52be05727 Mon Sep 17 00:00:00 2001
From: Jonas Gerg <joniogerg@gmail.com>
Date: Tue, 21 Jul 2026 16:38:05 +0200
Subject: [PATCH] feat: show notification to install miniplan as app

---
 .gitignore                                    |   3 +-
 public/.gitignore                             |   1 +
 public/src/App.vue                            |  36 +++++
 .../components/dialog/InstallPWADialog.vue    |  66 ++++++++
 public/vite.config.ts                         | 150 +++++++++---------
 5 files changed, 181 insertions(+), 75 deletions(-)
 create mode 100644 public/src/components/dialog/InstallPWADialog.vue

diff --git a/.gitignore b/.gitignore
index 0e17624..6cf3e2a 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,4 +1,5 @@
 .directory
 .idea
 node_modules
-package-lock.json
\ No newline at end of file
+package-lock.json
+/.idea/
diff --git a/public/.gitignore b/public/.gitignore
index 38adffa..1b3a6ee 100644
--- a/public/.gitignore
+++ b/public/.gitignore
@@ -26,3 +26,4 @@ coverage
 *.njsproj
 *.sln
 *.sw?
+/dev-dist/
diff --git a/public/src/App.vue b/public/src/App.vue
index 1b95328..fd4003c 100644
--- a/public/src/App.vue
+++ b/public/src/App.vue
@@ -6,6 +6,8 @@ import {onMounted, ref} from "vue";
 import {Auth} from "@/services/auth";
 import DialogHost from "@/components/dialog/DialogHost.vue";
 import {LoginService} from "@/services/LoginService";
+import {Dialogs} from "@/services/DialogService";
+import InstallPWADialog from "@/components/dialog/InstallPWADialog.vue";
 
 let showPopup = ref(false)
 let loggedIn = ref(false)
@@ -33,6 +35,40 @@ LoginService.subject.subscribe(() => {
     showPopup.value = true
 })
 
+const installEvent = ref<Event>()
+
+window.addEventListener('beforeinstallprompt', (e) => {
+    e.preventDefault()
+    console.log("beforeinstallprompt")
+    installEvent.value = e
+    scheduleInstallDialog()
+})
+
+function scheduleInstallDialog() {
+    if (isPwa()) return
+    if (localStorage.getItem('installPromptDismissed')) return
+    if (!installEvent.value) return
+
+    Dialogs.createDialog(InstallPWADialog, {
+        onPositive(dontShowAgain: boolean) {
+            if (dontShowAgain) localStorage.setItem('installPromptDismissed', 'true')
+            ;(installEvent.value as any).prompt()
+        },
+        onNegative(dontShowAgain: boolean) {
+            if (dontShowAgain) localStorage.setItem('installPromptDismissed', 'true')
+        },
+        onDismiss() {}
+    }, {})
+}
+
+function isPwa() {
+    return window.matchMedia('(display-mode: standalone)').matches
+}
+
+window.addEventListener('appinstalled', () => {
+    localStorage.setItem('installPromptDismissed', 'true')
+})
+
 </script>
 
 <template>
diff --git a/public/src/components/dialog/InstallPWADialog.vue b/public/src/components/dialog/InstallPWADialog.vue
new file mode 100644
index 0000000..4e2e987
--- /dev/null
+++ b/public/src/components/dialog/InstallPWADialog.vue
@@ -0,0 +1,66 @@
+<script setup lang="ts">
+
+import {ref} from "vue";
+import Dialog from "@/components/dialog/Dialog.vue";
+import type {DialogControls} from "@/components/dialog/dialog";
+
+interface InstallPWADialogProps extends DialogControls {
+}
+
+defineProps<InstallPWADialogProps>()
+
+const dontShowAgain = ref<boolean>(false)
+
+</script>
+
+<template>
+
+    <Dialog class="dialog">
+        <h3 style="margin-bottom: 10px; display: flex; gap: 1rem; align-items: center">
+            Zum Startbildschirm hinzufügen
+        </h3>
+        <p style="line-height: 1.7rem">
+            Dein Miniplan kann jetzt auf Ihrem Gerät installiert werden, um schnell und einfach darauf zuzugreifen.
+        </p>
+        <label class="checkbox">
+            <input type="checkbox" v-model="dontShowAgain" />
+            Nicht mehr anzeigen
+        </label>
+        <div class="buttons">
+            <button @click="onNegative(dontShowAgain)" class="dismiss">Später</button>
+            <button @click="onPositive(dontShowAgain)" ><i>browser_updated</i>Jetzt hinzufügen</button>
+        </div>
+    </Dialog>
+
+</template>
+
+<style scoped lang="less">
+
+.dialog {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    text-align: center;
+    width: 500px
+}
+
+.checkbox {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    margin-top: 16px;
+    font-size: 14px;
+    cursor: pointer;
+}
+
+.buttons {
+    display: flex;
+    justify-content: end;
+    margin-top: 20px;
+
+    .dismiss {
+        background: transparent;
+    }
+}
+
+</style>
diff --git a/public/vite.config.ts b/public/vite.config.ts
index 8906948..e4d1ef1 100644
--- a/public/vite.config.ts
+++ b/public/vite.config.ts
@@ -1,79 +1,81 @@
-import { fileURLToPath, URL } from 'node:url'
+import {fileURLToPath, URL} from 'node:url'
 
-import { defineConfig } from 'vite'
+import {defineConfig} from 'vite'
 import vue from '@vitejs/plugin-vue'
-import { VitePWA } from 'vite-plugin-pwa'
+import {VitePWA} from 'vite-plugin-pwa'
 
-export default defineConfig({
-  plugins: [
-    vue(),
-    VitePWA({
-      registerType: 'autoUpdate',
-      includeAssets: ['favicon.ico', 'minis_logo.png'],
-      manifest: {
-        name: 'Miniplan',
-        short_name: 'Miniplan',
-        description: 'Miniplan',
-        theme_color: '#ffffff',
-        background_color: '#ffffff',
-        display: 'standalone',
-        scope: '/',
-        start_url: '/',
-        screenshots: [
-          {
-            src: 'screenshot1.png',
-            sizes: '505x710',
-            type: 'image/png',
-            form_factor: "narrow",
-            label: "Miniplan Liste"
-          },
-          {
-            src: 'screenshot2.png',
-            sizes: '505x711',
-            type: 'image/png',
-            form_factor: "narrow",
-            label: "Miniplan Tabelle"
-          },
-          {
-            src: "screenshot3.png",
-            sizes: '1003x709',
-            type: 'image/png',
-            form_factor: "wide",
-            label: "Miniplan Tabelle"
-          }
+export default defineConfig(({mode}) => (
+    {
+        plugins: [
+            vue(),
+            VitePWA({
+                registerType: 'autoUpdate',
+                includeAssets: ['favicon.ico', 'minis_logo.png'],
+                manifest: {
+                    name: 'Miniplan App',
+                    short_name: 'Miniplan',
+                    description: 'Lade deinen Miniplan direkt auf dein Handy. So hast du den Miniplan jederzeit und schnell erreichbar.',
+                    theme_color: '#ffffff',
+                    background_color: '#ffffff',
+                    display: 'standalone',
+                    scope: '/',
+                    start_url: '/',
+                    screenshots: [
+                        {
+                            src: 'screenshot1.png',
+                            sizes: '505x710',
+                            type: 'image/png',
+                            form_factor: "narrow",
+                            label: "Miniplan Liste"
+                        },
+                        {
+                            src: 'screenshot2.png',
+                            sizes: '505x711',
+                            type: 'image/png',
+                            form_factor: "narrow",
+                            label: "Miniplan Tabelle"
+                        },
+                        {
+                            src: "screenshot3.png",
+                            sizes: '1003x709',
+                            type: 'image/png',
+                            form_factor: "wide",
+                            label: "Miniplan Tabelle"
+                        }
+                    ],
+                    icons: [
+                        {
+                            src: "pwa-64x64.png",
+                            sizes: "64x64",
+                            type: "image/png"
+                        },
+                        {
+                            src: "pwa-192x192.png",
+                            sizes: "192x192",
+                            type: "image/png"
+                        },
+                        {
+                            src: "pwa-512x512.png",
+                            sizes: "512x512",
+                            type: "image/png"
+                        },
+                        {
+                            src: "maskable-icon-512x512.png",
+                            sizes: "512x512",
+                            type: "image/png",
+                            purpose: "maskable"
+                        }
+                    ]
+                },
+                devOptions: {
+                    enabled: mode === "development"
+                }
+            })
         ],
-        icons: [
-          {
-            src: "pwa-64x64.png",
-            sizes: "64x64",
-            type: "image/png"
-          },
-          {
-            src: "pwa-192x192.png",
-            sizes: "192x192",
-            type: "image/png"
-          },
-          {
-            src: "pwa-512x512.png",
-            sizes: "512x512",
-            type: "image/png"
-          },
-          {
-            src: "maskable-icon-512x512.png",
-            sizes: "512x512",
-            type: "image/png",
-            purpose: "maskable"
-          }
-        ]
-      },
-      devOptions: {
-        enabled: false
-      }
+        resolve: {
+            alias: {
+                '@': fileURLToPath(new URL('./src', import.meta.url))
+            }
+        }
     })
-  ],
-  resolve: {
-    alias: {
-      '@': fileURLToPath(new URL('./src', import.meta.url))
-    }
-  }
-})
+)