feat: make miniplan a PWA

2026-07-21 13:41:18 +02:00
parent 2dac1598ff
commit 0350b80cda
19 changed files with 9212 additions and 368 deletions
@@ -0,0 +1,88 @@
+/**
+ * Copyright 2018 Google Inc. All Rights Reserved.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+// If the loader is already loaded, just stop.
+if (!self.define) {
+  let registry = {};
+
+  // Used for `eval` and `importScripts` where we can't get script URL by other means.
+  // In both cases, it's safe to use a global var because those functions are synchronous.
+  let nextDefineUri;
+
+  const singleRequire = (uri, parentUri) => {
+    uri = new URL(uri + ".js", parentUri).href;
+    return registry[uri] || (
+      
+        new Promise(resolve => {
+          if ("document" in self) {
+            const script = document.createElement("script");
+            script.src = uri;
+            script.onload = resolve;
+            document.head.appendChild(script);
+          } else {
+            nextDefineUri = uri;
+            importScripts(uri);
+            resolve();
+          }
+        })
+      
+      .then(() => {
+        let promise = registry[uri];
+        if (!promise) {
+          throw new Error(`Module ${uri} didn’t register its module`);
+        }
+        return promise;
+      })
+    );
+  };
+
+  self.define = (depsNames, factory) => {
+    const uri = nextDefineUri || ("document" in self ? document.currentScript.src : "") || location.href;
+    if (registry[uri]) {
+      // Module is already loading or loaded.
+      return;
+    }
+    let exports = {};
+    const require = depUri => singleRequire(depUri, uri);
+    const specialDeps = {
+      module: { uri },
+      exports,
+      require
+    };
+    registry[uri] = Promise.all(depsNames.map(
+      depName => specialDeps[depName] || require(depName)
+    )).then(deps => {
+      factory(...deps);
+      return exports;
+    });
+  };
+}
+define(['./workbox-7e5eb42b'], (function (workbox) { 'use strict';
+
+  self.skipWaiting();
+  workbox.clientsClaim();
+  /**
+   * The precacheAndRoute() method efficiently caches and responds to
+   * requests for URLs in the manifest.
+   * See https://goo.gl/S9QRab
+   */
+  workbox.precacheAndRoute([{
+    "url": "index.html",
+    "revision": "0.dgdlb6t7e8s"
+  }], {});
+  workbox.cleanupOutdatedCaches();
+  workbox.registerRoute(new workbox.NavigationRoute(workbox.createHandlerBoundToURL("index.html"), {
+    allowlist: [/^\/$/]
+  }));
+
+}));
@@ -3,9 +3,14 @@
  <head>
    <meta charset="UTF-8">
    <link rel="icon" href="/favicon.ico">
+    <link rel="apple-touch-icon" href="/minis_logo.png">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="theme-color" content="#ffffff">
+    <meta name="apple-mobile-web-app-capable" content="yes">
+    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
+    <meta name="apple-mobile-web-app-title" content="Miniplan">
    <title>Miniplan App</title>
-    <link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" rel="stylesheet" />
+    <link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" rel="stylesheet">

  </head>
  <body>
@@ -19,12 +19,15 @@
  "devDependencies": {
    "@tsconfig/node18": "^18.2.0",
    "@types/node": "^18.17.0",
+    "@vite-pwa/assets-generator": "^1.0.2",
    "@vitejs/plugin-vue": "^4.2.3",
    "@vue/tsconfig": "^0.4.0",
    "less": "^4.2.0",
    "npm-run-all": "^4.1.5",
    "typescript": "~5.1.6",
    "vite": "^4.4.6",
-    "vue-tsc": "^1.8.6"
+    "vite-plugin-pwa": "^1.3.0",
+    "vue-tsc": "^1.8.6",
+    "workbox-window": "^7.4.1"
  }
 }
@@ -4,6 +4,19 @@ import { createApp } from 'vue'
 import App from './App.vue'
 import router from './router'

+import { registerSW } from 'virtual:pwa-register'
+
+registerSW({
+  onNeedRefresh() {
+    if (confirm('New content available. Reload?')) {
+      window.location.reload()
+    }
+  },
+  onOfflineReady() {
+    console.log('App ready to work offline')
+  }
+})
+
 const app = createApp(App)

 app.use(router)
@@ -2,11 +2,74 @@ import { fileURLToPath, URL } from 'node:url'

 import { defineConfig } from 'vite'
 import vue from '@vitejs/plugin-vue'
+import { VitePWA } from 'vite-plugin-pwa'

-// https://vitejs.dev/config/
 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"
+          }
+        ],
+        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: true
+      }
+    })
  ],
  resolve: {
    alias: {