Add support for PWA

2025-05-09 14:44:36 +02:00
parent 80977ee896
commit 6a557cc060
7 changed files with 3867 additions and 6 deletions
--- a/.gitignore
+++ b/.gitignore
@@ -159,6 +159,7 @@ web/node_modules
 web/dist
 web/dist-ssr
 web/*.local
+web/dev-dist

 # Editor directories and files
 .vscode/*
--- a/web/index.html
+++ b/web/index.html
@@ -4,7 +4,7 @@
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Vite + React + TS</title>
+    <title>Actual Importer</title>
  </head>
  <body>
    <div id="root"></div>
--- a/web/package-lock.json
+++ b/web/package-lock.json
--- a/web/package.json
+++ b/web/package.json
@@ -25,6 +25,7 @@
    "globals": "^16.0.0",
    "typescript": "~5.8.3",
    "typescript-eslint": "^8.30.1",
-    "vite": "^6.3.5"
+    "vite": "^6.3.5",
+    "vite-plugin-pwa": "^1.0.0"
  }
 }
--- a/web/package.nix
+++ b/web/package.nix
@@ -7,5 +7,5 @@ buildNpmPackage {
  pname = "actual-importer-frontend";
  version = "0.0.1";
  src = ./.;
-  npmDepsHash = "sha256-+HDXY0d3gvXJWy4GPa6vCIqLnq1mCP8kimek5Zl8u80=";
+  npmDepsHash = "sha256-hizFoJ2REdXaReId2y2LpOEP+mwcV1IJfcubKyAWBp8=";
 }
--- a/web/src/main.tsx
+++ b/web/src/main.tsx
@@ -9,3 +9,9 @@ createRoot(document.getElementById('root')!).render(
    <App />
  </StrictMode>,
 )
+
+if ('serviceWorker' in navigator) {
+  window.addEventListener('load', () => {
+    navigator.serviceWorker.register('/sw.js')
+  })
+}
--- a/web/vite.config.ts
+++ b/web/vite.config.ts
@@ -1,7 +1,28 @@
 import { defineConfig } from 'vite'
 import react from '@vitejs/plugin-react'
+import { VitePWA } from 'vite-plugin-pwa'

-// https://vite.dev/config/
 export default defineConfig({
-  plugins: [react()],
+  plugins: [
+    react(),
+    VitePWA({
+      registerType: 'autoUpdate',
+      manifest: {
+        name: 'Actual Importer',
+        short_name: 'ActualImporter',
+        description: 'Simple app to import the transactions to Actual Budget system',
+        theme_color: '#ffffff',
+        icons: [
+          {
+            src: '/public/vite.svg',
+            sizes: '512x512',
+            type: 'image/svg',
+          }
+        ]
+      },
+      devOptions: {
+        enabled: true
+      }
+    })
+  ]
 })