From 000a3e005c6ee1e8c1a114c09284e11bb4824608 Mon Sep 17 00:00:00 2001
From: nimbleghost <132819643+nimbleghost@users.noreply.github.com>
Date: Mon, 19 Jun 2023 20:41:41 +0200
Subject: [PATCH] Improve dynamic webmanifest setup

---
 web/index.html     |  3 +++
 web/public/sw.js   |  5 ++++-
 web/vite.config.js | 15 +++------------
 3 files changed, 10 insertions(+), 13 deletions(-)
diff --git a/web/index.html b/web/index.html
index 9f4c7b2e..462bbc1f 100644
--- a/web/index.html
+++ b/web/index.html
@@ -41,6 +41,9 @@
     <!-- Style overrides & fonts -->
     <link rel="stylesheet" href="/static/css/app.css" type="text/css" />
     <link rel="stylesheet" href="/static/css/fonts.css" type="text/css" />
+
+    <!-- PWA -->
+    <link rel="manifest" href="/manifest.webmanifest" />
   </head>
   <body>
     <noscript>
diff --git a/web/public/sw.js b/web/public/sw.js
index 386821b8..3d10db2d 100644
--- a/web/public/sw.js
+++ b/web/public/sw.js
@@ -245,7 +245,10 @@ if (!import.meta.env.DEV) {
         // this is so we don't respond to `/` UNLESS it's the app root itself, defined above
         /^\/.+$/,
       ],
-      denylist: [/^\/docs\/?$/],
+      // only /docs is required so it is navigable in the browser.
+      // the rest are nice-to-haves so the single-page-app doesn't try to handle them, but `fetch`
+      // and browser requests would work anyway.
+      denylist: [/^\/(docs|static|file).*$/, /^\/(app.html|manifest.webmanifest|sw.js|config.js)$/],
     })
   );
 
diff --git a/web/vite.config.js b/web/vite.config.js
index e3f7c67f..22d17d9b 100644
--- a/web/vite.config.js
+++ b/web/vite.config.js
@@ -3,7 +3,7 @@ import { defineConfig } from "vite";
 import react from "@vitejs/plugin-react";
 import { VitePWA } from "vite-plugin-pwa";
 
-export default defineConfig(() => ({
+export default defineConfig(({ mode }) => ({
   build: {
     outDir: "build",
     assetsDir: "static/media",
@@ -43,24 +43,15 @@ export default defineConfig(() => ({
           }),
         ],
       },
-      manifest: {
-        name: "ntfy web",
-        short_name: "ntfy",
-        description:
-          "ntfy lets you send push notifications via scripts from any computer or phone. Made with ❤ by Philipp C. Heckel, Apache License 2.0, source at https://heckel.io/ntfy.",
+      // The actual prod manifest is served from the go server, see server.go handleWebManifest.
+      manifest: mode === "development" && {
         theme_color: "#317f6f",
-        start_url: "/",
         icons: [
           {
             src: "/static/images/pwa-192x192.png",
             sizes: "192x192",
             type: "image/png",
           },
-          {
-            src: "/static/images/pwa-512x512.png",
-            sizes: "512x512",
-            type: "image/png",
-          },
         ],
       },
     }),
