Fixed PWA not registered (#2566)

frontend/.gitignore

@@ -1,7 +1,7 @@
-node_modules
-dist
 *.local
+*.tsbuildinfo
 build
 coverage
-
-*.tsbuildinfo
+dev-dist
+dist
+node_modules

frontend/index.html

@@ -5,7 +5,17 @@
     <base href="{{baseUrl}}" />
     <meta charset="utf-8" />
     <link rel="icon" type="image/x-icon" href="./images/favicon.ico" />
-    <link rel="manifest" href="manifest.json" />
+    <link
+      rel="apple-touch-icon"
+      href="./images/apple-touch-icon-180x180.png"
+      sizes="180x180"
+    />
+    <link
+      rel="mask-icon"
+      href="./images/maskable-icon-512x512.png"
+      color="#FFFFFF"
+    />
+    <meta name="theme-color" content="#be4bdb" />
     <meta
       name="viewport"
       content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1"

frontend/package.json

@@ -44,6 +44,7 @@
     "@types/node": "^20.12.6",
     "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",
+    "@vite-pwa/assets-generator": "^0.2.4",
     "@vitejs/plugin-react": "^4.2.1",
     "@vitest/coverage-v8": "^1.4.0",
     "@vitest/ui": "^1.2.2",
@@ -66,22 +67,25 @@
     "typescript": "^5.4.4",
     "vite": "^5.2.8",
     "vite-plugin-checker": "^0.6.4",
+    "vite-plugin-pwa": "^0.20.0",
     "vitest": "^1.2.2",
     "yaml": "^2.4.1"
   },
   "scripts": {
-    "start": "vite",
     "build": "vite build",
     "build:ci": "vite build -m development",
     "check": "eslint --ext .ts,.tsx src",
     "check:fix": "eslint --ext .ts,.tsx src --fix",
     "check:ts": "tsc --noEmit --incremental false",
     "check:fmt": "prettier -c .",
-    "test": "vitest",
-    "test:ui": "vitest --ui",
     "coverage": "vitest run --coverage",
     "format": "prettier -w .",
-    "prepare": "cd .. && husky frontend/.husky"
+    "pwa-assets:generate": "pwa-assets-generator --preset minimal-2023 public/images/logo128.png",
+    "prepare": "cd .. && husky frontend/.husky",
+    "preview": "vite preview",
+    "start": "vite",
+    "test": "vitest",
+    "test:ui": "vitest --ui"
   },
   "browserslist": {
     "production": [

frontend/public/manifest.json

@@ -1,26 +0,0 @@
-{
-    "name": "Bazarr",
-    "short_name": "Bazarr",
-    "description": "Bazarr is a companion application to Sonarr and Radarr. It manages and downloads subtitles based on your requirements.",
-    "start_url": "/",
-    "display": "standalone",
-    "theme_color": "#be4bdb",
-    "background_color": "#ffffff",
-    "icons": [
-        {
-            "src": "/images/android-chrome-96x96.png",
-            "sizes": "96x96",
-            "type": "image/png"
-        },
-        {
-            "src": "/images/apple-touch-icon.png",
-            "sizes": "180x180",
-            "type": "image/png"
-        },
-        {
-            "src": "/images/mstile-150x150.png",
-            "sizes": "150x150",
-            "type": "image/png"
-        }
-    ]
-}

frontend/vite.config.ts

@@ -1,3 +1,5 @@
+/* eslint-disable camelcase */
+
 /// <reference types="vitest" />
 /// <reference types="vite/client" />
 /// <reference types="node" />
@@ -6,6 +8,7 @@ import react from "@vitejs/plugin-react";
 import path from "path";
 import { defineConfig, loadEnv } from "vite";
 import checker from "vite-plugin-checker";
+import { VitePWA } from "vite-plugin-pwa";
 import chunks from "./config/chunks";
 import overrideEnv from "./config/configReader";
 
@@ -30,6 +33,70 @@ export default defineConfig(async ({ mode, command }) => {
         },
         enableBuild: false,
       }),
+      VitePWA({
+        registerType: "autoUpdate",
+        includeAssets: [
+          "/images/favicon.ico",
+          "/images/apple-touch-icon-180x180.png",
+        ],
+        manifest: {
+          name: "Bazarr",
+          short_name: "Bazarr",
+          description:
+            "Bazarr is a companion application to Sonarr and Radarr. It manages and downloads subtitles based on your requirements.",
+          theme_color: "#be4bdb",
+          icons: [
+            {
+              src: "/images/pwa-64x64.png",
+              sizes: "64x64",
+              type: "image/png",
+            },
+            {
+              src: "/images/pwa-192x192.png",
+              sizes: "192x192",
+              type: "image/png",
+            },
+            {
+              src: "/images/pwa-512x512.png",
+              sizes: "512x512",
+              type: "image/png",
+            },
+          ],
+          screenshots: [
+            {
+              src: "/images/pwa-wide-series-list.jpeg",
+              sizes: "1447x1060",
+              label: "Series List",
+              form_factor: "wide",
+              type: "image/jpeg",
+            },
+            {
+              src: "/images/pwa-wide-series-overview.jpeg",
+              sizes: "1447x1060",
+              label: "Series Overview",
+              form_factor: "wide",
+              type: "image/jpeg",
+            },
+            {
+              src: "/images/pwa-narrow-series-list.jpeg",
+              sizes: "491x973",
+              label: "Series List",
+              form_factor: "narrow",
+              type: "image/jpeg",
+            },
+            {
+              src: "/images/pwa-narrow-series-overview.jpeg",
+              sizes: "491x973",
+              label: "Series Overview",
+              form_factor: "narrow",
+              type: "image/jpeg",
+            },
+          ],
+        },
+        devOptions: {
+          enabled: mode === "development",
+        },
+      }),
     ],
     css: {
       preprocessorOptions: {