Add PWA, service worker and Web Push

- Use new notification request/opt-in flow for push - Implement unsubscribing - Implement muting - Implement emojis in title - Add iOS specific PWA warning - Don’t use websockets when web push is enabled - Fix duplicate notifications - Implement default web push setting - Implement changing subscription type - Implement web push subscription refresh - Implement web push notification click
2025-07-20 10:04:08 +00:00 · 2023-05-24 21:36:01 +02:00 · 2023-05-24 21:36:01 +02:00 · ff5c854192
commit ff5c854192
parent 733ef4664b
53 changed files with 4363 additions and 249 deletions
--- a/web/.eslintrc
+++ b/web/.eslintrc
@ -33,5 +33,6 @@
        "unnamedComponents": "arrow-function"
      }
    ]
-  }
+  },
+  "overrides": [{ "files": ["./public/sw.js"], "rules": { "no-restricted-globals": "off" } }]
 }
--- a/web/index.html
+++ b/web/index.html
@ -13,11 +13,18 @@
    <meta name="theme-color" content="#317f6f" />
    <meta name="msapplication-navbutton-color" content="#317f6f" />
    <meta name="apple-mobile-web-app-status-bar-style" content="#317f6f" />
+    <link rel="apple-touch-icon" href="/static/images/apple-touch-icon.png" sizes="180x180" />
+    <link rel="mask-icon" href="/static/images/mask-icon.svg" color="#317f6f" />

    <!-- Favicon, see favicon.io -->
    <link rel="icon" type="image/png" href="/static/images/favicon.ico" />

    <!-- Previews in Google, Slack, WhatsApp, etc. -->
+
+    <meta
+      name="description"
+      content="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."
+    />
    <meta property="og:type" content="website" />
    <meta property="og:locale" content="en_US" />
    <meta property="og:site_name" content="ntfy web" />
--- a/web/package-lock.json
+++ b/web/package-lock.json
--- a/web/package.json
+++ b/web/package.json
@ -40,7 +40,8 @@
    "eslint-plugin-react": "^7.32.2",
    "eslint-plugin-react-hooks": "^4.6.0",
    "prettier": "^2.8.8",
-    "vite": "^4.3.9"
+    "vite": "^4.3.9",
+    "vite-plugin-pwa": "^0.15.0"
  },
  "browserslist": {
    "production": [
--- a/web/public/config.js
+++ b/web/public/config.js
@ -7,7 +7,7 @@

 var config = {
  base_url: window.location.origin, // Change to test against a different server
-  app_root: "/app",
+  app_root: "/",
  enable_login: true,
  enable_signup: true,
  enable_payments: false,
--- a/web/public/static/images/apple-touch-icon.png
+++ b/web/public/static/images/apple-touch-icon.png
--- a/web/public/static/images/mask-icon.svg
+++ b/web/public/static/images/mask-icon.svg
@ -0,0 +1,20 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
+ "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
+<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
+ width="700.000000pt" height="700.000000pt" viewBox="0 0 700.000000 700.000000"
+ preserveAspectRatio="xMidYMid meet">
+<g transform="translate(0.000000,700.000000) scale(0.100000,-0.100000)"
+fill="#000000" stroke="none">
+<path d="M1546 6263 c-1 -1 -132 -3 -292 -4 -301 -1 -353 -7 -484 -50 -265
+-88 -483 -296 -578 -550 -52 -140 -54 -172 -53 -784 2 -2183 1 -3783 -3 -3802
+-2 -12 -7 -49 -11 -82 -3 -33 -7 -68 -9 -78 -2 -10 -7 -45 -12 -78 -4 -33 -8
+-62 -9 -65 0 -3 -5 -36 -10 -75 -5 -38 -9 -72 -10 -75 -1 -3 -5 -34 -10 -70
+-12 -98 -12 -96 -30 -225 -9 -66 -19 -123 -21 -127 -15 -24 16 -17 686 162
+107 29 200 53 205 54 6 2 30 8 55 15 25 7 140 37 255 68 116 30 282 75 370 98
+l160 43 2175 0 c1196 0 2201 3 2234 7 210 21 414 120 572 279 118 119 188 237
+236 403 l23 78 2 2025 2 2025 -25 99 c-23 94 -87 247 -116 277 -7 8 -26 33
+-41 56 -97 142 -326 296 -512 342 -27 7 -59 15 -70 18 -11 3 -94 7 -185 10
+-165 4 -4490 10 -4494 6z"/>
+</g>
+</svg>
--- a/web/public/static/images/pwa-192x192.png
+++ b/web/public/static/images/pwa-192x192.png
--- a/web/public/static/images/pwa-512x512.png
+++ b/web/public/static/images/pwa-512x512.png
--- a/web/public/static/langs/en.json
+++ b/web/public/static/langs/en.json
@ -52,9 +52,10 @@
  "nav_button_connecting": "connecting",
  "nav_upgrade_banner_label": "Upgrade to ntfy Pro",
  "nav_upgrade_banner_description": "Reserve topics, more messages & emails, and larger attachments",
-  "alert_grant_title": "Notifications are disabled",
-  "alert_grant_description": "Grant your browser permission to display desktop notifications.",
-  "alert_grant_button": "Grant now",
+  "alert_notification_permission_denied_title": "Notifications are blocked",
+  "alert_notification_permission_denied_description": "Please re-enable them in your browser and refresh the page to receive notifications",
+  "alert_notification_ios_install_required_title": "iOS Install Required",
+  "alert_notification_ios_install_required_description": "Click on the Share icon and Add to Home Screen to enable notifications on iOS",
  "alert_not_supported_title": "Notifications not supported",
  "alert_not_supported_description": "Notifications are not supported in your browser.",
  "alert_not_supported_context_description": "Notifications are only supported over HTTPS. This is a limitation of the <mdnLink>Notifications API</mdnLink>.",
@ -92,6 +93,10 @@
  "notifications_no_subscriptions_description": "Click the \"{{linktext}}\" link to create or subscribe to a topic. After that, you can send messages via PUT or POST and you'll receive notifications here.",
  "notifications_example": "Example",
  "notifications_more_details": "For more information, check out the <websiteLink>website</websiteLink> or <docsLink>documentation</docsLink>.",
+  "notification_toggle_unmute": "Unmute",
+  "notification_toggle_sound": "Sound only",
+  "notification_toggle_browser": "Browser notifications",
+  "notification_toggle_background": "Browser and background notifications",
  "display_name_dialog_title": "Change display name",
  "display_name_dialog_description": "Set an alternative name for a topic that is displayed in the subscription list. This helps identify topics with complicated names more easily.",
  "display_name_dialog_placeholder": "Display name",
@ -164,6 +169,8 @@
  "subscribe_dialog_subscribe_description": "Topics may not be password-protected, so choose a name that's not easy to guess. Once subscribed, you can PUT/POST notifications.",
  "subscribe_dialog_subscribe_topic_placeholder": "Topic name, e.g. phil_alerts",
  "subscribe_dialog_subscribe_use_another_label": "Use another server",
+  "subscribe_dialog_subscribe_enable_browser_notifications_label": "Notify me via browser notifications",
+  "subscribe_dialog_subscribe_enable_background_notifications_label": "Also notify me when ntfy is not open (web push)",
  "subscribe_dialog_subscribe_base_url_label": "Service URL",
  "subscribe_dialog_subscribe_button_generate_topic_name": "Generate name",
  "subscribe_dialog_subscribe_button_cancel": "Cancel",
@ -363,6 +370,11 @@
  "prefs_reservations_dialog_description": "Reserving a topic gives you ownership over the topic, and allows you to define access permissions for other users over the topic.",
  "prefs_reservations_dialog_topic_label": "Topic",
  "prefs_reservations_dialog_access_label": "Access",
+  "prefs_notifications_web_push_default_title": "Enable web push notifications by default",
+  "prefs_notifications_web_push_default_description": "This affects the initial state in the subscribe dialog, as well as the default state for synced topics",
+  "prefs_notifications_web_push_default_initial": "Unset",
+  "prefs_notifications_web_push_default_enabled": "Enabled",
+  "prefs_notifications_web_push_default_disabled": "Disabled",
  "reservation_delete_dialog_description": "Removing a reservation gives up ownership over the topic, and allows others to reserve it. You can keep, or delete existing messages and attachments.",
  "reservation_delete_dialog_action_keep_title": "Keep cached messages and attachments",
  "reservation_delete_dialog_action_keep_description": "Messages and attachments that are cached on the server will become publicly visible for people with knowledge of the topic name.",
--- a/web/public/sw.js
+++ b/web/public/sw.js
@ -0,0 +1,111 @@
+/* eslint-disable import/no-extraneous-dependencies */
+import { cleanupOutdatedCaches, createHandlerBoundToURL, precacheAndRoute } from "workbox-precaching";
+import { NavigationRoute, registerRoute } from "workbox-routing";
+import { NetworkFirst } from "workbox-strategies";
+
+import { getDbAsync } from "../src/app/getDb";
+
+// See WebPushWorker, this is to play a sound on supported browsers,
+// if the app is in the foreground
+const broadcastChannel = new BroadcastChannel("web-push-broadcast");
+
+self.addEventListener("install", () => {
+  console.log("[ServiceWorker] Installed");
+  self.skipWaiting();
+});
+
+self.addEventListener("activate", () => {
+  console.log("[ServiceWorker] Activated");
+  self.skipWaiting();
+});
+
+// There's no good way to test this, and Chrome doesn't seem to implement this,
+// so leaving it for now
+self.addEventListener("pushsubscriptionchange", (event) => {
+  console.log("[ServiceWorker] PushSubscriptionChange");
+  console.log(event);
+});
+
+self.addEventListener("push", (event) => {
+  console.log("[ServiceWorker] Received Web Push Event", { event });
+  // server/types.go webPushPayload
+  const data = event.data.json();
+
+  const { formatted_title: formattedTitle, subscription_id: subscriptionId, message } = data;
+  broadcastChannel.postMessage(message);
+
+  event.waitUntil(
+    (async () => {
+      const db = await getDbAsync();
+
+      await Promise.all([
+        (async () => {
+          await db.notifications.add({
+            ...message,
+            subscriptionId,
+            // New marker (used for bubble indicator); cannot be boolean; Dexie index limitation
+            new: 1,
+          });
+          const badgeCount = await db.notifications.where({ new: 1 }).count();
+          console.log("[ServiceWorker] Setting new app badge count", { badgeCount });
+          self.navigator.setAppBadge?.(badgeCount);
+        })(),
+        db.subscriptions.update(subscriptionId, {
+          last: message.id,
+        }),
+        self.registration.showNotification(formattedTitle, {
+          tag: subscriptionId,
+          body: message.message,
+          icon: "/static/images/ntfy.png",
+          data,
+        }),
+      ]);
+    })()
+  );
+});
+
+self.addEventListener("notificationclick", (event) => {
+  event.notification.close();
+
+  const { message } = event.notification.data;
+
+  if (message.click) {
+    self.clients.openWindow(message.click);
+    return;
+  }
+
+  const rootUrl = new URL(self.location.origin);
+  const topicUrl = new URL(message.topic, self.location.origin);
+
+  event.waitUntil(
+    (async () => {
+      const clients = await self.clients.matchAll({ type: "window" });
+
+      const topicClient = clients.find((client) => client.url === topicUrl.toString());
+      if (topicClient) {
+        topicClient.focus();
+        return;
+      }
+
+      const rootClient = clients.find((client) => client.url === rootUrl.toString());
+      if (rootClient) {
+        rootClient.focus();
+        return;
+      }
+
+      self.clients.openWindow(topicUrl);
+    })()
+  );
+});
+
+// self.__WB_MANIFEST is default injection point
+// eslint-disable-next-line no-underscore-dangle
+precacheAndRoute(self.__WB_MANIFEST);
+
+// clean old assets
+cleanupOutdatedCaches();
+
+// to allow work offline
+registerRoute(new NavigationRoute(createHandlerBoundToURL("/")));
+
+registerRoute(({ url }) => url.pathname === "/config.js", new NetworkFirst());
--- a/web/src/app/AccountApi.js
+++ b/web/src/app/AccountApi.js
@ -382,6 +382,10 @@ class AccountApi {
    setTimeout(() => this.runWorker(), delayMillis);
  }

+  stopWorker() {
+    clearTimeout(this.timer);
+  }
+
  async runWorker() {
    if (!session.token()) {
      return;
--- a/web/src/app/Api.js
+++ b/web/src/app/Api.js
@ -6,6 +6,9 @@ import {
  topicUrlAuth,
  topicUrlJsonPoll,
  topicUrlJsonPollWithSince,
+  topicUrlWebPushSubscribe,
+  topicUrlWebPushUnsubscribe,
+  webPushConfigUrl,
 } from "./utils";
 import userManager from "./UserManager";
 import { fetchOrThrow } from "./errors";
@ -113,6 +116,62 @@ class Api {
    }
    throw new Error(`Unexpected server response ${response.status}`);
  }
+
+  /**
+   * @returns {Promise<{ public_key: string } | undefined>}
+   */
+  async getWebPushConfig(baseUrl) {
+    const response = await fetch(webPushConfigUrl(baseUrl));
+
+    if (response.ok) {
+      return response.json();
+    }
+
+    if (response.status === 404) {
+      // web push is not enabled
+      return undefined;
+    }
+
+    throw new Error(`Unexpected server response ${response.status}`);
+  }
+
+  async subscribeWebPush(baseUrl, topic, browserSubscription) {
+    const user = await userManager.get(baseUrl);
+
+    const url = topicUrlWebPushSubscribe(baseUrl, topic);
+    console.log(`[Api] Sending Web Push Subscription ${url}`);
+
+    const response = await fetch(url, {
+      method: "POST",
+      headers: maybeWithAuth({}, user),
+      body: JSON.stringify({ browser_subscription: browserSubscription }),
+    });
+
+    if (response.ok) {
+      return true;
+    }
+
+    throw new Error(`Unexpected server response ${response.status}`);
+  }
+
+  async unsubscribeWebPush(subscription) {
+    const user = await userManager.get(subscription.baseUrl);
+
+    const url = topicUrlWebPushUnsubscribe(subscription.baseUrl, subscription.topic);
+    console.log(`[Api] Unsubscribing Web Push Subscription ${url}`);
+
+    const response = await fetch(url, {
+      method: "POST",
+      headers: maybeWithAuth({}, user),
+      body: JSON.stringify({ endpoint: subscription.webPushEndpoint }),
+    });
+
+    if (response.ok) {
+      return true;
+    }
+
+    throw new Error(`Unexpected server response ${response.status}`);
+  }
 }

 const api = new Api();
--- a/web/src/app/ConnectionManager.js
+++ b/web/src/app/ConnectionManager.js
@ -1,7 +1,8 @@
 import Connection from "./Connection";
+import { NotificationType } from "./SubscriptionManager";
 import { hashCode } from "./utils";

-const makeConnectionId = async (subscription, user) =>
+const makeConnectionId = (subscription, user) =>
  user ? hashCode(`${subscription.id}|${user.username}|${user.password ?? ""}|${user.token ?? ""}`) : hashCode(`${subscription.id}`);

 /**
@ -45,13 +46,19 @@ class ConnectionManager {
      return;
    }
    console.log(`[ConnectionManager] Refreshing connections`);
-    const subscriptionsWithUsersAndConnectionId = await Promise.all(
-      subscriptions.map(async (s) => {
+    const subscriptionsWithUsersAndConnectionId = subscriptions
+      .map((s) => {
        const [user] = users.filter((u) => u.baseUrl === s.baseUrl);
-        const connectionId = await makeConnectionId(s, user);
+        const connectionId = makeConnectionId(s, user);
        return { ...s, user, connectionId };
      })
-    );
+      // we want to create a ws for both sound-only and active browser notifications,
+      // only background notifications don't need this as they come over web push.
+      // however, if background notifications are muted, we again need the ws while
+      // the page is active
+      .filter((s) => s.notificationType !== NotificationType.BACKGROUND && s.mutedUntil !== 1);
+
+    console.log();
    const targetIds = subscriptionsWithUsersAndConnectionId.map((s) => s.connectionId);
    const deletedIds = Array.from(this.connections.keys()).filter((id) => !targetIds.includes(id));

--- a/web/src/app/Notifier.js
+++ b/web/src/app/Notifier.js
@ -1,22 +1,18 @@
-import { formatMessage, formatTitleWithDefault, openUrl, playSound, topicDisplayName, topicShortUrl } from "./utils";
+import { formatMessage, formatTitleWithDefault, openUrl, playSound, topicDisplayName, topicShortUrl, urlB64ToUint8Array } from "./utils";
 import prefs from "./Prefs";
-import subscriptionManager from "./SubscriptionManager";
 import logo from "../img/ntfy.png";
+import api from "./Api";

 /**
 * The notifier is responsible for displaying desktop notifications. Note that not all modern browsers
 * support this; most importantly, all iOS browsers do not support window.Notification.
 */
 class Notifier {
-  async notify(subscriptionId, notification, onClickFallback) {
+  async notify(subscription, notification, onClickFallback) {
    if (!this.supported()) {
      return;
    }
-    const subscription = await subscriptionManager.get(subscriptionId);
-    const shouldNotify = await this.shouldNotify(subscription, notification);
-    if (!shouldNotify) {
-      return;
-    }
+
    const shortUrl = topicShortUrl(subscription.baseUrl, subscription.topic);
    const displayName = topicDisplayName(subscription);
    const message = formatMessage(notification);
@ -26,6 +22,7 @@ class Notifier {
    console.log(`[Notifier, ${shortUrl}] Displaying notification ${notification.id}: ${message}`);
    const n = new Notification(title, {
      body: message,
+      tag: subscription.id,
      icon: logo,
    });
    if (notification.click) {
@ -33,45 +30,88 @@ class Notifier {
    } else {
      n.onclick = () => onClickFallback(subscription);
    }
+  }

+  async playSound() {
    // Play sound
    const sound = await prefs.sound();
    if (sound && sound !== "none") {
      try {
        await playSound(sound);
      } catch (e) {
-        console.log(`[Notifier, ${shortUrl}] Error playing audio`, e);
+        console.log(`[Notifier] Error playing audio`, e);
      }
    }
  }

+  async unsubscribeWebPush(subscription) {
+    try {
+      await api.unsubscribeWebPush(subscription);
+    } catch (e) {
+      console.error("[Notifier.subscribeWebPush] Error subscribing to web push", e);
+    }
+  }
+
+  async subscribeWebPush(baseUrl, topic) {
+    if (!this.supported() || !this.pushSupported()) {
+      return {};
+    }
+
+    // only subscribe to web push for the current server. this is a limitation of the web push API,
+    // which only allows a single server per service worker origin.
+    if (baseUrl !== config.base_url) {
+      return {};
+    }
+
+    const registration = await navigator.serviceWorker.getRegistration();
+
+    if (!registration) {
+      console.log("[Notifier.subscribeWebPush] Web push supported but no service worker registration found, skipping");
+      return {};
+    }
+
+    try {
+      const webPushConfig = await api.getWebPushConfig(baseUrl);
+
+      if (!webPushConfig) {
+        console.log("[Notifier.subscribeWebPush] Web push not configured on server");
+      }
+
+      const browserSubscription = await registration.pushManager.subscribe({
+        userVisibleOnly: true,
+        applicationServerKey: urlB64ToUint8Array(webPushConfig.public_key),
+      });
+
+      await api.subscribeWebPush(baseUrl, topic, browserSubscription);
+
+      console.log("[Notifier.subscribeWebPush] Successfully subscribed to web push");
+
+      return browserSubscription;
+    } catch (e) {
+      console.error("[Notifier.subscribeWebPush] Error subscribing to web push", e);
+    }
+
+    return {};
+  }
+
  granted() {
    return this.supported() && Notification.permission === "granted";
  }

-  maybeRequestPermission(cb) {
-    if (!this.supported()) {
-      cb(false);
-      return;
-    }
-    if (!this.granted()) {
-      Notification.requestPermission().then((permission) => {
-        const granted = permission === "granted";
-        cb(granted);
-      });
-    }
+  denied() {
+    return this.supported() && Notification.permission === "denied";
  }

-  async shouldNotify(subscription, notification) {
-    if (subscription.mutedUntil === 1) {
+  async maybeRequestPermission() {
+    if (!this.supported()) {
      return false;
    }
-    const priority = notification.priority ? notification.priority : 3;
-    const minPriority = await prefs.minPriority();
-    if (priority < minPriority) {
-      return false;
-    }
-    return true;
+
+    return new Promise((resolve) => {
+      Notification.requestPermission((permission) => {
+        resolve(permission === "granted");
+      });
+    });
  }

  supported() {
@ -82,6 +122,10 @@ class Notifier {
    return "Notification" in window;
  }

+  pushSupported() {
+    return "serviceWorker" in navigator && "PushManager" in window;
+  }
+
  /**
   * Returns true if this is a HTTPS site, or served over localhost. Otherwise the Notification API
   * is not supported, see https://developer.mozilla.org/en-US/docs/Web/API/notification
@ -89,6 +133,10 @@ class Notifier {
  contextSupported() {
    return window.location.protocol === "https:" || window.location.hostname.match("^127.") || window.location.hostname === "localhost";
  }
+
+  iosSupportedButInstallRequired() {
+    return "standalone" in window.navigator && window.navigator.standalone === false;
+  }
 }

 const notifier = new Notifier();
--- a/web/src/app/Poller.js
+++ b/web/src/app/Poller.js
@ -18,6 +18,10 @@ class Poller {
    setTimeout(() => this.pollAll(), delayMillis);
  }

+  stopWorker() {
+    clearTimeout(this.timer);
+  }
+
  async pollAll() {
    console.log(`[Poller] Polling all subscriptions`);
    const subscriptions = await subscriptionManager.all();
@ -47,14 +51,13 @@ class Poller {
  }

  pollInBackground(subscription) {
-    const fn = async () => {
+    (async () => {
      try {
        await this.poll(subscription);
      } catch (e) {
        console.error(`[App] Error polling subscription ${subscription.id}`, e);
      }
-    };
-    setTimeout(() => fn(), 0);
+    })();
  }
 }

--- a/web/src/app/Prefs.js
+++ b/web/src/app/Prefs.js
@ -1,33 +1,45 @@
-import db from "./db";
+import getDb from "./getDb";

 class Prefs {
+  constructor(db) {
+    this.db = db;
+  }
+
  async setSound(sound) {
-    db.prefs.put({ key: "sound", value: sound.toString() });
+    this.db.prefs.put({ key: "sound", value: sound.toString() });
  }

  async sound() {
-    const sound = await db.prefs.get("sound");
+    const sound = await this.db.prefs.get("sound");
    return sound ? sound.value : "ding";
  }

  async setMinPriority(minPriority) {
-    db.prefs.put({ key: "minPriority", value: minPriority.toString() });
+    this.db.prefs.put({ key: "minPriority", value: minPriority.toString() });
  }

  async minPriority() {
-    const minPriority = await db.prefs.get("minPriority");
+    const minPriority = await this.db.prefs.get("minPriority");
    return minPriority ? Number(minPriority.value) : 1;
  }

  async setDeleteAfter(deleteAfter) {
-    db.prefs.put({ key: "deleteAfter", value: deleteAfter.toString() });
+    this.db.prefs.put({ key: "deleteAfter", value: deleteAfter.toString() });
  }

  async deleteAfter() {
-    const deleteAfter = await db.prefs.get("deleteAfter");
+    const deleteAfter = await this.db.prefs.get("deleteAfter");
    return deleteAfter ? Number(deleteAfter.value) : 604800; // Default is one week
  }
+
+  async webPushDefaultEnabled() {
+    const obj = await this.db.prefs.get("webPushDefaultEnabled");
+    return obj?.value ?? "initial";
+  }
+
+  async setWebPushDefaultEnabled(enabled) {
+    await this.db.prefs.put({ key: "webPushDefaultEnabled", value: enabled ? "enabled" : "disabled" });
+  }
 }

-const prefs = new Prefs();
-export default prefs;
+export default new Prefs(getDb());
--- a/web/src/app/Pruner.js
+++ b/web/src/app/Pruner.js
@ -18,6 +18,10 @@ class Pruner {
    setTimeout(() => this.prune(), delayMillis);
  }

+  stopWorker() {
+    clearTimeout(this.timer);
+  }
+
  async prune() {
    const deleteAfterSeconds = await prefs.deleteAfter();
    const pruneThresholdTimestamp = Math.round(Date.now() / 1000) - deleteAfterSeconds;
--- a/web/src/app/Session.js
+++ b/web/src/app/Session.js
@ -1,12 +1,22 @@
+import sessionReplica from "./SessionReplica";
+
 class Session {
+  constructor(replica) {
+    this.replica = replica;
+  }
+
  store(username, token) {
    localStorage.setItem("user", username);
    localStorage.setItem("token", token);
+
+    this.replica.store(username, token);
  }

  reset() {
    localStorage.removeItem("user");
    localStorage.removeItem("token");
+
+    this.replica.reset();
  }

  resetAndRedirect(url) {
@ -27,5 +37,5 @@ class Session {
  }
 }

-const session = new Session();
+const session = new Session(sessionReplica);
 export default session;
--- a/web/src/app/SessionReplica.js
+++ b/web/src/app/SessionReplica.js
@ -0,0 +1,44 @@
+import Dexie from "dexie";
+
+// Store to IndexedDB as well so that the
+// service worker can access it
+// TODO: Probably make everything depend on this and not use localStorage,
+// but that's a larger refactoring effort for another PR
+
+class SessionReplica {
+  constructor() {
+    const db = new Dexie("session-replica");
+
+    db.version(1).stores({
+      keyValueStore: "&key",
+    });
+
+    this.db = db;
+  }
+
+  async store(username, token) {
+    try {
+      await this.db.keyValueStore.bulkPut([
+        { key: "user", value: username },
+        { key: "token", value: token },
+      ]);
+    } catch (e) {
+      console.error("[Session] Error replicating session to IndexedDB", e);
+    }
+  }
+
+  async reset() {
+    try {
+      await this.db.delete();
+    } catch (e) {
+      console.error("[Session] Error resetting session on IndexedDB", e);
+    }
+  }
+
+  async username() {
+    return (await this.db.keyValueStore.get({ key: "user" }))?.value;
+  }
+}
+
+const sessionReplica = new SessionReplica();
+export default sessionReplica;
--- a/web/src/app/SubscriptionManager.js
+++ b/web/src/app/SubscriptionManager.js
@ -1,47 +1,112 @@
-import db from "./db";
+import notifier from "./Notifier";
+import prefs from "./Prefs";
+import getDb from "./getDb";
 import { topicUrl } from "./utils";

+/** @typedef {string} NotificationTypeEnum */
+
+/** @enum {NotificationTypeEnum} */
+export const NotificationType = {
+  /** sound-only */
+  SOUND: "sound",
+  /** browser notifications when there is an active tab, via websockets */
+  BROWSER: "browser",
+  /** web push notifications, regardless of whether the window is open */
+  BACKGROUND: "background",
+};
+
 class SubscriptionManager {
+  constructor(db) {
+    this.db = db;
+  }
+
  /** All subscriptions, including "new count"; this is a JOIN, see https://dexie.org/docs/API-Reference#joining */
  async all() {
-    const subscriptions = await db.subscriptions.toArray();
+    const subscriptions = await this.db.subscriptions.toArray();
    return Promise.all(
      subscriptions.map(async (s) => ({
        ...s,
-        new: await db.notifications.where({ subscriptionId: s.id, new: 1 }).count(),
+        new: await this.db.notifications.where({ subscriptionId: s.id, new: 1 }).count(),
      }))
    );
  }

  async get(subscriptionId) {
-    return db.subscriptions.get(subscriptionId);
+    return this.db.subscriptions.get(subscriptionId);
  }

-  async add(baseUrl, topic, internal) {
+  async notify(subscriptionId, notification, defaultClickAction) {
+    const subscription = await this.get(subscriptionId);
+
+    if (subscription.mutedUntil === 1) {
+      return;
+    }
+
+    const priority = notification.priority ?? 3;
+    if (priority < (await prefs.minPriority())) {
+      return;
+    }
+
+    await notifier.playSound();
+
+    // sound only
+    if (subscription.notificationType === "sound") {
+      return;
+    }
+
+    await notifier.notify(subscription, notification, defaultClickAction);
+  }
+
+  /**
+   * @param {string} baseUrl
+   * @param {string} topic
+   * @param {object} opts
+   * @param {boolean} opts.internal
+   * @param {NotificationTypeEnum} opts.notificationType
+   * @returns
+   */
+  async add(baseUrl, topic, opts = {}) {
    const id = topicUrl(baseUrl, topic);
+
+    const webPushFields = opts.notificationType === "background" ? await notifier.subscribeWebPush(baseUrl, topic) : {};
+
    const existingSubscription = await this.get(id);
    if (existingSubscription) {
+      if (webPushFields.endpoint) {
+        await this.db.subscriptions.update(existingSubscription.id, {
+          webPushEndpoint: webPushFields.endpoint,
+        });
+      }
+
      return existingSubscription;
    }
+
    const subscription = {
      id: topicUrl(baseUrl, topic),
      baseUrl,
      topic,
      mutedUntil: 0,
      last: null,
-      internal: internal || false,
+      ...opts,
+      webPushEndpoint: webPushFields.endpoint,
    };
-    await db.subscriptions.put(subscription);
+
+    await this.db.subscriptions.put(subscription);
+
    return subscription;
  }

  async syncFromRemote(remoteSubscriptions, remoteReservations) {
    console.log(`[SubscriptionManager] Syncing subscriptions from remote`, remoteSubscriptions);

+    const notificationType = (await prefs.webPushDefaultEnabled()) === "enabled" ? "background" : "browser";
+
    // Add remote subscriptions
    const remoteIds = await Promise.all(
      remoteSubscriptions.map(async (remote) => {
-        const local = await this.add(remote.base_url, remote.topic, false);
+        const local = await this.add(remote.base_url, remote.topic, {
+          notificationType,
+        });
        const reservation = remoteReservations?.find((r) => remote.base_url === config.base_url && remote.topic === r.topic) || null;

        await this.update(local.id, {
@ -54,29 +119,33 @@ class SubscriptionManager {
    );

    // Remove local subscriptions that do not exist remotely
-    const localSubscriptions = await db.subscriptions.toArray();
+    const localSubscriptions = await this.db.subscriptions.toArray();

    await Promise.all(
      localSubscriptions.map(async (local) => {
        const remoteExists = remoteIds.includes(local.id);
        if (!local.internal && !remoteExists) {
-          await this.remove(local.id);
+          await this.remove(local);
        }
      })
    );
  }

  async updateState(subscriptionId, state) {
-    db.subscriptions.update(subscriptionId, { state });
+    this.db.subscriptions.update(subscriptionId, { state });
  }

-  async remove(subscriptionId) {
-    await db.subscriptions.delete(subscriptionId);
-    await db.notifications.where({ subscriptionId }).delete();
+  async remove(subscription) {
+    await this.db.subscriptions.delete(subscription.id);
+    await this.db.notifications.where({ subscriptionId: subscription.id }).delete();
+
+    if (subscription.webPushEndpoint) {
+      await notifier.unsubscribeWebPush(subscription);
+    }
  }

  async first() {
-    return db.subscriptions.toCollection().first(); // May be undefined
+    return this.db.subscriptions.toCollection().first(); // May be undefined
  }

  async getNotifications(subscriptionId) {
@ -84,7 +153,7 @@ class SubscriptionManager {
    // It's actually fine, because the reading and filtering is quite fast. The rendering is what's
    // killing performance. See  https://dexie.org/docs/Collection/Collection.offset()#a-better-paging-approach

-    return db.notifications
+    return this.db.notifications
      .orderBy("time") // Sort by time first
      .filter((n) => n.subscriptionId === subscriptionId)
      .reverse()
@ -92,7 +161,7 @@ class SubscriptionManager {
  }

  async getAllNotifications() {
-    return db.notifications
+    return this.db.notifications
      .orderBy("time") // Efficient, see docs
      .reverse()
      .toArray();
@ -100,18 +169,19 @@ class SubscriptionManager {

  /** Adds notification, or returns false if it already exists */
  async addNotification(subscriptionId, notification) {
-    const exists = await db.notifications.get(notification.id);
+    const exists = await this.db.notifications.get(notification.id);
    if (exists) {
      return false;
    }
    try {
-      await db.notifications.add({
+      // sw.js duplicates this logic, so if you change it here, change it there too
+      await this.db.notifications.add({
        ...notification,
        subscriptionId,
        // New marker (used for bubble indicator); cannot be boolean; Dexie index limitation
        new: 1,
      }); // FIXME consider put() for double tab
-      await db.subscriptions.update(subscriptionId, {
+      await this.db.subscriptions.update(subscriptionId, {
        last: notification.id,
      });
    } catch (e) {
@ -124,19 +194,19 @@ class SubscriptionManager {
  async addNotifications(subscriptionId, notifications) {
    const notificationsWithSubscriptionId = notifications.map((notification) => ({ ...notification, subscriptionId }));
    const lastNotificationId = notifications.at(-1).id;
-    await db.notifications.bulkPut(notificationsWithSubscriptionId);
-    await db.subscriptions.update(subscriptionId, {
+    await this.db.notifications.bulkPut(notificationsWithSubscriptionId);
+    await this.db.subscriptions.update(subscriptionId, {
      last: lastNotificationId,
    });
  }

  async updateNotification(notification) {
-    const exists = await db.notifications.get(notification.id);
+    const exists = await this.db.notifications.get(notification.id);
    if (!exists) {
      return false;
    }
    try {
-      await db.notifications.put({ ...notification });
+      await this.db.notifications.put({ ...notification });
    } catch (e) {
      console.error(`[SubscriptionManager] Error updating notification`, e);
    }
@ -144,47 +214,105 @@ class SubscriptionManager {
  }

  async deleteNotification(notificationId) {
-    await db.notifications.delete(notificationId);
+    await this.db.notifications.delete(notificationId);
  }

  async deleteNotifications(subscriptionId) {
-    await db.notifications.where({ subscriptionId }).delete();
+    await this.db.notifications.where({ subscriptionId }).delete();
  }

  async markNotificationRead(notificationId) {
-    await db.notifications.where({ id: notificationId }).modify({ new: 0 });
+    await this.db.notifications.where({ id: notificationId }).modify({ new: 0 });
  }

  async markNotificationsRead(subscriptionId) {
-    await db.notifications.where({ subscriptionId, new: 1 }).modify({ new: 0 });
+    await this.db.notifications.where({ subscriptionId, new: 1 }).modify({ new: 0 });
  }

  async setMutedUntil(subscriptionId, mutedUntil) {
-    await db.subscriptions.update(subscriptionId, {
+    await this.db.subscriptions.update(subscriptionId, {
      mutedUntil,
    });
+
+    const subscription = await this.get(subscriptionId);
+
+    if (subscription.notificationType === "background") {
+      if (mutedUntil === 1) {
+        await notifier.unsubscribeWebPush(subscription);
+      } else {
+        const webPushFields = await notifier.subscribeWebPush(subscription.baseUrl, subscription.topic);
+        await this.db.subscriptions.update(subscriptionId, {
+          webPushEndpoint: webPushFields.endpoint,
+        });
+      }
+    }
+  }
+
+  /**
+   *
+   * @param {object} subscription
+   * @param {NotificationTypeEnum} newNotificationType
+   * @returns
+   */
+  async setNotificationType(subscription, newNotificationType) {
+    const oldNotificationType = subscription.notificationType ?? "browser";
+
+    if (oldNotificationType === newNotificationType) {
+      return;
+    }
+
+    let { webPushEndpoint } = subscription;
+
+    if (oldNotificationType === "background") {
+      await notifier.unsubscribeWebPush(subscription);
+      webPushEndpoint = undefined;
+    } else if (newNotificationType === "background") {
+      const webPushFields = await notifier.subscribeWebPush(subscription.baseUrl, subscription.topic);
+      webPushEndpoint = webPushFields.webPushEndpoint;
+    }
+
+    await this.db.subscriptions.update(subscription.id, {
+      notificationType: newNotificationType,
+      webPushEndpoint,
+    });
+  }
+
+  // for logout/delete, unsubscribe first to prevent receiving dangling notifications
+  async unsubscribeAllWebPush() {
+    const subscriptions = await this.db.subscriptions.where({ notificationType: "background" }).toArray();
+    await Promise.all(subscriptions.map((subscription) => notifier.unsubscribeWebPush(subscription)));
+  }
+
+  async refreshWebPushSubscriptions() {
+    const subscriptions = await this.db.subscriptions.where({ notificationType: "background" }).toArray();
+    const browserSubscription = await (await navigator.serviceWorker.getRegistration())?.pushManager?.getSubscription();
+
+    if (browserSubscription) {
+      await Promise.all(subscriptions.map((subscription) => notifier.subscribeWebPush(subscription.baseUrl, subscription.topic)));
+    } else {
+      await Promise.all(subscriptions.map((subscription) => this.setNotificationType(subscription, "sound")));
+    }
  }

  async setDisplayName(subscriptionId, displayName) {
-    await db.subscriptions.update(subscriptionId, {
+    await this.db.subscriptions.update(subscriptionId, {
      displayName,
    });
  }

  async setReservation(subscriptionId, reservation) {
-    await db.subscriptions.update(subscriptionId, {
+    await this.db.subscriptions.update(subscriptionId, {
      reservation,
    });
  }

  async update(subscriptionId, params) {
-    await db.subscriptions.update(subscriptionId, params);
+    await this.db.subscriptions.update(subscriptionId, params);
  }

  async pruneNotifications(thresholdTimestamp) {
-    await db.notifications.where("time").below(thresholdTimestamp).delete();
+    await this.db.notifications.where("time").below(thresholdTimestamp).delete();
  }
 }

-const subscriptionManager = new SubscriptionManager();
-export default subscriptionManager;
+export default new SubscriptionManager(getDb());
--- a/web/src/app/UserManager.js
+++ b/web/src/app/UserManager.js
@ -1,9 +1,13 @@
-import db from "./db";
+import getDb from "./getDb";
 import session from "./Session";

 class UserManager {
+  constructor(db) {
+    this.db = db;
+  }
+
  async all() {
-    const users = await db.users.toArray();
+    const users = await this.db.users.toArray();
    if (session.exists()) {
      users.unshift(this.localUser());
    }
@ -14,21 +18,21 @@ class UserManager {
    if (session.exists() && baseUrl === config.base_url) {
      return this.localUser();
    }
-    return db.users.get(baseUrl);
+    return this.db.users.get(baseUrl);
  }

  async save(user) {
    if (session.exists() && user.baseUrl === config.base_url) {
      return;
    }
-    await db.users.put(user);
+    await this.db.users.put(user);
  }

  async delete(baseUrl) {
    if (session.exists() && baseUrl === config.base_url) {
      return;
    }
-    await db.users.delete(baseUrl);
+    await this.db.users.delete(baseUrl);
  }

  localUser() {
@ -43,5 +47,4 @@ class UserManager {
  }
 }

-const userManager = new UserManager();
-export default userManager;
+export default new UserManager(getDb());
--- a/web/src/app/WebPushWorker.js
+++ b/web/src/app/WebPushWorker.js
@ -0,0 +1,46 @@
+import notifier from "./Notifier";
+import subscriptionManager from "./SubscriptionManager";
+
+const onMessage = () => {
+  notifier.playSound();
+};
+
+const delayMillis = 2000; // 2 seconds
+const intervalMillis = 300000; // 5 minutes
+
+class WebPushWorker {
+  constructor() {
+    this.timer = null;
+  }
+
+  startWorker() {
+    if (this.timer !== null) {
+      return;
+    }
+
+    this.timer = setInterval(() => this.updateSubscriptions(), intervalMillis);
+    setTimeout(() => this.updateSubscriptions(), delayMillis);
+
+    this.broadcastChannel = new BroadcastChannel("web-push-broadcast");
+    this.broadcastChannel.addEventListener("message", onMessage);
+  }
+
+  stopWorker() {
+    clearTimeout(this.timer);
+
+    this.broadcastChannel.removeEventListener("message", onMessage);
+    this.broadcastChannel.close();
+  }
+
+  async updateSubscriptions() {
+    try {
+      console.log("[WebPushBroadcastListener] Refreshing web push subscriptions");
+
+      await subscriptionManager.refreshWebPushSubscriptions();
+    } catch (e) {
+      console.error("[WebPushBroadcastListener] Error refreshing web push subscriptions", e);
+    }
+  }
+}
+
+export default new WebPushWorker();
--- a/web/src/app/db.js
+++ b/web/src/app/db.js
@ -1,21 +0,0 @@
-import Dexie from "dexie";
-import session from "./Session";
-
-// Uses Dexie.js
-// https://dexie.org/docs/API-Reference#quick-reference
-//
-// Notes:
-// - As per docs, we only declare the indexable columns, not all columns
-
-// The IndexedDB database name is based on the logged-in user
-const dbName = session.username() ? `ntfy-${session.username()}` : "ntfy";
-const db = new Dexie(dbName);
-
-db.version(1).stores({
-  subscriptions: "&id,baseUrl",
-  notifications: "&id,subscriptionId,time,new,[subscriptionId+new]", // compound key for query performance
-  users: "&baseUrl,username",
-  prefs: "&key",
-});
-
-export default db;
--- a/web/src/app/getDb.js
+++ b/web/src/app/getDb.js
@ -0,0 +1,34 @@
+import Dexie from "dexie";
+import session from "./Session";
+import sessionReplica from "./SessionReplica";
+
+// Uses Dexie.js
+// https://dexie.org/docs/API-Reference#quick-reference
+//
+// Notes:
+// - As per docs, we only declare the indexable columns, not all columns
+
+const getDbBase = (username) => {
+  // The IndexedDB database name is based on the logged-in user
+  const dbName = username ? `ntfy-${username}` : "ntfy";
+  const db = new Dexie(dbName);
+
+  db.version(2).stores({
+    subscriptions: "&id,baseUrl,notificationType",
+    notifications: "&id,subscriptionId,time,new,[subscriptionId+new]", // compound key for query performance
+    users: "&baseUrl,username",
+    prefs: "&key",
+  });
+
+  return db;
+};
+
+export const getDbAsync = async () => {
+  const username = await sessionReplica.username();
+
+  return getDbBase(username);
+};
+
+const getDb = () => getDbBase(session.username());
+
+export default getDb;
--- a/web/src/app/utils.js
+++ b/web/src/app/utils.js
@ -20,7 +20,10 @@ export const topicUrlJson = (baseUrl, topic) => `${topicUrl(baseUrl, topic)}/jso
 export const topicUrlJsonPoll = (baseUrl, topic) => `${topicUrlJson(baseUrl, topic)}?poll=1`;
 export const topicUrlJsonPollWithSince = (baseUrl, topic, since) => `${topicUrlJson(baseUrl, topic)}?poll=1&since=${since}`;
 export const topicUrlAuth = (baseUrl, topic) => `${topicUrl(baseUrl, topic)}/auth`;
+export const topicUrlWebPushSubscribe = (baseUrl, topic) => `${topicUrl(baseUrl, topic)}/web-push`;
+export const topicUrlWebPushUnsubscribe = (baseUrl, topic) => `${topicUrl(baseUrl, topic)}/web-push/unsubscribe`;
 export const topicShortUrl = (baseUrl, topic) => shortUrl(topicUrl(baseUrl, topic));
+export const webPushConfigUrl = (baseUrl) => `${baseUrl}/v1/web-push-config`;
 export const accountUrl = (baseUrl) => `${baseUrl}/v1/account`;
 export const accountPasswordUrl = (baseUrl) => `${baseUrl}/v1/account/password`;
 export const accountTokenUrl = (baseUrl) => `${baseUrl}/v1/account/token`;
@ -156,7 +159,7 @@ export const splitNoEmpty = (s, delimiter) =>
    .filter((x) => x !== "");

 /** Non-cryptographic hash function, see https://stackoverflow.com/a/8831937/1440785 */
-export const hashCode = async (s) => {
+export const hashCode = (s) => {
  let hash = 0;
  for (let i = 0; i < s.length; i += 1) {
    const char = s.charCodeAt(i);
@ -288,3 +291,16 @@ export const randomAlphanumericString = (len) => {
  }
  return id;
 };
+
+export const urlB64ToUint8Array = (base64String) => {
+  const padding = "=".repeat((4 - (base64String.length % 4)) % 4);
+  const base64 = (base64String + padding).replace(/-/g, "+").replace(/_/g, "/");
+
+  const rawData = window.atob(base64);
+  const outputArray = new Uint8Array(rawData.length);
+
+  for (let i = 0; i < rawData.length; i += 1) {
+    outputArray[i] = rawData.charCodeAt(i);
+  }
+  return outputArray;
+};
--- a/web/src/components/Account.jsx
+++ b/web/src/components/Account.jsx
@ -48,7 +48,7 @@ import routes from "./routes";
 import { formatBytes, formatShortDate, formatShortDateTime, openUrl } from "../app/utils";
 import accountApi, { LimitBasis, Role, SubscriptionInterval, SubscriptionStatus } from "../app/AccountApi";
 import { Pref, PrefGroup } from "./Pref";
-import db from "../app/db";
+import getDb from "../app/getDb";
 import UpgradeDialog from "./UpgradeDialog";
 import { AccountContext } from "./App";
 import DialogFooter from "./DialogFooter";
@ -57,6 +57,7 @@ import { IncorrectPasswordError, UnauthorizedError } from "../app/errors";
 import { ProChip } from "./SubscriptionPopup";
 import theme from "./theme";
 import session from "../app/Session";
+import subscriptionManager from "../app/SubscriptionManager";

 const Account = () => {
  if (!session.exists()) {
@ -1077,8 +1078,10 @@ const DeleteAccountDialog = (props) => {

  const handleSubmit = async () => {
    try {
+      await subscriptionManager.unsubscribeAllWebPush();
+
      await accountApi.delete(password);
-      await db.delete();
+      await getDb().delete();
      console.debug(`[Account] Account deleted`);
      session.resetAndRedirect(routes.app);
    } catch (e) {
--- a/web/src/components/ActionBar.jsx
+++ b/web/src/components/ActionBar.jsx
@ -13,7 +13,7 @@ import session from "../app/Session";
 import logo from "../img/ntfy.svg";
 import subscriptionManager from "../app/SubscriptionManager";
 import routes from "./routes";
-import db from "../app/db";
+import getDb from "../app/getDb";
 import { topicDisplayName } from "../app/utils";
 import Navigation from "./Navigation";
 import accountApi from "../app/AccountApi";
@ -120,8 +120,10 @@ const ProfileIcon = () => {

  const handleLogout = async () => {
    try {
+      await subscriptionManager.unsubscribeAllWebPush();
+
      await accountApi.logout();
-      await db.delete();
+      await getDb().delete();
    } finally {
      session.resetAndRedirect(routes.app);
    }
--- a/web/src/components/App.jsx
+++ b/web/src/components/App.jsx
@ -57,6 +57,10 @@ const App = () => {

 const updateTitle = (newNotificationsCount) => {
  document.title = newNotificationsCount > 0 ? `(${newNotificationsCount}) ntfy` : "ntfy";
+
+  if ("setAppBadge" in window.navigator) {
+    window.navigator.setAppBadge(newNotificationsCount);
+  }
 };

 const Layout = () => {
--- a/web/src/components/Navigation.jsx
+++ b/web/src/components/Navigation.jsx
@ -14,7 +14,6 @@ import {
  ListSubheader,
  Portal,
  Tooltip,
-  Button,
  Typography,
  Box,
  IconButton,
@ -94,15 +93,10 @@ const NavList = (props) => {
    setSubscribeDialogKey((prev) => prev + 1);
  };

-  const handleRequestNotificationPermission = () => {
-    notifier.maybeRequestPermission((granted) => props.onNotificationGranted(granted));
-  };
-
  const handleSubscribeSubmit = (subscription) => {
    console.log(`[Navigation] New subscription: ${subscription.id}`, subscription);
    handleSubscribeReset();
    navigate(routes.forSubscription(subscription));
-    handleRequestNotificationPermission();
  };

  const handleAccountClick = () => {
@ -114,19 +108,27 @@ const NavList = (props) => {
  const isPaid = account?.billing?.subscription;
  const showUpgradeBanner = config.enable_payments && !isAdmin && !isPaid;
  const showSubscriptionsList = props.subscriptions?.length > 0;
-  const showNotificationBrowserNotSupportedBox = !notifier.browserSupported();
+  const showNotificationPermissionDenied = notifier.denied();
+  const showNotificationIOSInstallRequired = notifier.iosSupportedButInstallRequired();
+  const showNotificationBrowserNotSupportedBox = !showNotificationIOSInstallRequired && !notifier.browserSupported();
  const showNotificationContextNotSupportedBox = notifier.browserSupported() && !notifier.contextSupported(); // Only show if notifications are generally supported in the browser
-  const showNotificationGrantBox = notifier.supported() && props.subscriptions?.length > 0 && !props.notificationsGranted;
+
  const navListPadding =
-    showNotificationGrantBox || showNotificationBrowserNotSupportedBox || showNotificationContextNotSupportedBox ? "0" : "";
+    showNotificationPermissionDenied ||
+    showNotificationIOSInstallRequired ||
+    showNotificationBrowserNotSupportedBox ||
+    showNotificationContextNotSupportedBox
+      ? "0"
+      : "";

  return (
    <>
      <Toolbar sx={{ display: { xs: "none", sm: "block" } }} />
      <List component="nav" sx={{ paddingTop: navListPadding }}>
+        {showNotificationPermissionDenied && <NotificationPermissionDeniedAlert />}
        {showNotificationBrowserNotSupportedBox && <NotificationBrowserNotSupportedAlert />}
        {showNotificationContextNotSupportedBox && <NotificationContextNotSupportedAlert />}
-        {showNotificationGrantBox && <NotificationGrantAlert onRequestPermissionClick={handleRequestNotificationPermission} />}
+        {showNotificationIOSInstallRequired && <NotificationIOSInstallRequiredAlert />}
        {!showSubscriptionsList && (
          <ListItemButton onClick={() => navigate(routes.app)} selected={location.pathname === config.app_root}>
            <ListItemIcon>
@ -344,16 +346,26 @@ const SubscriptionItem = (props) => {
  );
 };

-const NotificationGrantAlert = (props) => {
+const NotificationPermissionDeniedAlert = () => {
  const { t } = useTranslation();
  return (
    <>
      <Alert severity="warning" sx={{ paddingTop: 2 }}>
-        <AlertTitle>{t("alert_grant_title")}</AlertTitle>
-        <Typography gutterBottom>{t("alert_grant_description")}</Typography>
-        <Button sx={{ float: "right" }} color="inherit" size="small" onClick={props.onRequestPermissionClick}>
-          {t("alert_grant_button")}
-        </Button>
+        <AlertTitle>{t("alert_notification_permission_denied_title")}</AlertTitle>
+        <Typography gutterBottom>{t("alert_notification_permission_denied_description")}</Typography>
+      </Alert>
+      <Divider />
+    </>
+  );
+};
+
+const NotificationIOSInstallRequiredAlert = () => {
+  const { t } = useTranslation();
+  return (
+    <>
+      <Alert severity="warning" sx={{ paddingTop: 2 }}>
+        <AlertTitle>{t("alert_notification_ios_install_required_title")}</AlertTitle>
+        <Typography gutterBottom>{t("alert_notification_ios_install_required_description")}</Typography>
      </Alert>
      <Divider />
    </>
--- a/web/src/components/Preferences.jsx
+++ b/web/src/components/Preferences.jsx
@ -48,6 +48,7 @@ import { PermissionDenyAll, PermissionRead, PermissionReadWrite, PermissionWrite
 import { ReserveAddDialog, ReserveDeleteDialog, ReserveEditDialog } from "./ReserveDialogs";
 import { UnauthorizedError } from "../app/errors";
 import { subscribeTopic } from "./SubscribeDialog";
+import notifier from "../app/Notifier";

 const maybeUpdateAccountSettings = async (payload) => {
  if (!session.exists()) {
@ -85,6 +86,7 @@ const Notifications = () => {
        <Sound />
        <MinPriority />
        <DeleteAfter />
+        {notifier.pushSupported() && <WebPushDefaultEnabled />}
      </PrefGroup>
    </Card>
  );
@ -232,6 +234,36 @@ const DeleteAfter = () => {
  );
 };

+const WebPushDefaultEnabled = () => {
+  const { t } = useTranslation();
+  const labelId = "prefWebPushDefaultEnabled";
+  const defaultEnabled = useLiveQuery(async () => prefs.webPushDefaultEnabled());
+  const handleChange = async (ev) => {
+    await prefs.setWebPushDefaultEnabled(ev.target.value);
+  };
+
+  // while loading
+  if (defaultEnabled == null) {
+    return null;
+  }
+
+  return (
+    <Pref
+      labelId={labelId}
+      title={t("prefs_notifications_web_push_default_title")}
+      description={t("prefs_notifications_web_push_default_description")}
+    >
+      <FormControl fullWidth variant="standard" sx={{ m: 1 }}>
+        <Select value={defaultEnabled} onChange={handleChange} aria-labelledby={labelId}>
+          {defaultEnabled === "initial" && <MenuItem value="initial">{t("prefs_notifications_web_push_default_initial")}</MenuItem>}
+          <MenuItem value="enabled">{t("prefs_notifications_web_push_default_enabled")}</MenuItem>
+          <MenuItem value="disabled">{t("prefs_notifications_web_push_default_disabled")}</MenuItem>
+        </Select>
+      </FormControl>
+    </Pref>
+  );
+};
+
 const Users = () => {
  const { t } = useTranslation();
  const [dialogKey, setDialogKey] = useState(0);
--- a/web/src/components/SubscribeDialog.jsx
+++ b/web/src/components/SubscribeDialog.jsx
@ -8,17 +8,20 @@ import {
  DialogContentText,
  DialogTitle,
  Autocomplete,
-  Checkbox,
  FormControlLabel,
  FormGroup,
  useMediaQuery,
+  Switch,
+  Stack,
 } from "@mui/material";
 import { useTranslation } from "react-i18next";
+import { Warning } from "@mui/icons-material";
+import { useLiveQuery } from "dexie-react-hooks";
 import theme from "./theme";
 import api from "../app/Api";
 import { randomAlphanumericString, topicUrl, validTopic, validUrl } from "../app/utils";
 import userManager from "../app/UserManager";
-import subscriptionManager from "../app/SubscriptionManager";
+import subscriptionManager, { NotificationType } from "../app/SubscriptionManager";
 import poller from "../app/Poller";
 import DialogFooter from "./DialogFooter";
 import session from "../app/Session";
@ -28,11 +31,13 @@ import ReserveTopicSelect from "./ReserveTopicSelect";
 import { AccountContext } from "./App";
 import { TopicReservedError, UnauthorizedError } from "../app/errors";
 import { ReserveLimitChip } from "./SubscriptionPopup";
+import notifier from "../app/Notifier";
+import prefs from "../app/Prefs";

 const publicBaseUrl = "https://ntfy.sh";

-export const subscribeTopic = async (baseUrl, topic) => {
-  const subscription = await subscriptionManager.add(baseUrl, topic);
+export const subscribeTopic = async (baseUrl, topic, opts) => {
+  const subscription = await subscriptionManager.add(baseUrl, topic, opts);
  if (session.exists()) {
    try {
      await accountApi.addSubscription(baseUrl, topic);
@ -52,14 +57,29 @@ const SubscribeDialog = (props) => {
  const [showLoginPage, setShowLoginPage] = useState(false);
  const fullScreen = useMediaQuery(theme.breakpoints.down("sm"));

-  const handleSuccess = async () => {
+  const webPushDefaultEnabled = useLiveQuery(async () => prefs.webPushDefaultEnabled());
+
+  const handleSuccess = async (notificationType) => {
    console.log(`[SubscribeDialog] Subscribing to topic ${topic}`);
    const actualBaseUrl = baseUrl || config.base_url;
-    const subscription = await subscribeTopic(actualBaseUrl, topic);
+    const subscription = await subscribeTopic(actualBaseUrl, topic, {
+      notificationType,
+    });
    poller.pollInBackground(subscription); // Dangle!
+
+    // if the user hasn't changed the default web push setting yet, set it to enabled
+    if (notificationType === "background" && webPushDefaultEnabled === "initial") {
+      await prefs.setWebPushDefaultEnabled(true);
+    }
+
    props.onSuccess(subscription);
  };

+  // wait for liveQuery load
+  if (webPushDefaultEnabled === undefined) {
+    return <></>;
+  }
+
  return (
    <Dialog open={props.open} onClose={props.onCancel} fullScreen={fullScreen}>
      {!showLoginPage && (
@ -72,6 +92,7 @@ const SubscribeDialog = (props) => {
          onCancel={props.onCancel}
          onNeedsLogin={() => setShowLoginPage(true)}
          onSuccess={handleSuccess}
+          webPushDefaultEnabled={webPushDefaultEnabled}
        />
      )}
      {showLoginPage && <LoginPage baseUrl={baseUrl} topic={topic} onBack={() => setShowLoginPage(false)} onSuccess={handleSuccess} />}
@ -79,6 +100,22 @@ const SubscribeDialog = (props) => {
  );
 };

+const browserNotificationsSupported = notifier.supported();
+const pushNotificationsSupported = notifier.pushSupported();
+const iosInstallRequired = notifier.iosSupportedButInstallRequired();
+
+const getNotificationTypeFromToggles = (browserNotificationsEnabled, backgroundNotificationsEnabled) => {
+  if (backgroundNotificationsEnabled) {
+    return NotificationType.BACKGROUND;
+  }
+
+  if (browserNotificationsEnabled) {
+    return NotificationType.BROWSER;
+  }
+
+  return NotificationType.SOUND;
+};
+
 const SubscribePage = (props) => {
  const { t } = useTranslation();
  const { account } = useContext(AccountContext);
@ -96,6 +133,30 @@ const SubscribePage = (props) => {
  const reserveTopicEnabled =
    session.exists() && (account?.role === Role.ADMIN || (account?.role === Role.USER && (account?.stats.reservations_remaining || 0) > 0));

+  // load initial value, but update it in `handleBrowserNotificationsChanged`
+  // if we interact with the API and therefore possibly change it (from default -> denied)
+  const [notificationsExplicitlyDenied, setNotificationsExplicitlyDenied] = useState(notifier.denied());
+  // default to on if notifications are already granted
+  const [browserNotificationsEnabled, setBrowserNotificationsEnabled] = useState(notifier.granted());
+  const [backgroundNotificationsEnabled, setBackgroundNotificationsEnabled] = useState(props.webPushDefaultEnabled === "enabled");
+
+  const handleBrowserNotificationsChanged = async (e) => {
+    if (e.target.checked && (await notifier.maybeRequestPermission())) {
+      setBrowserNotificationsEnabled(true);
+      if (props.webPushDefaultEnabled === "enabled") {
+        setBackgroundNotificationsEnabled(true);
+      }
+    } else {
+      setNotificationsExplicitlyDenied(notifier.denied());
+      setBrowserNotificationsEnabled(false);
+      setBackgroundNotificationsEnabled(false);
+    }
+  };
+
+  const handleBackgroundNotificationsChanged = (e) => {
+    setBackgroundNotificationsEnabled(e.target.checked);
+  };
+
  const handleSubscribe = async () => {
    const user = await userManager.get(baseUrl); // May be undefined
    const username = user ? user.username : t("subscribe_dialog_error_user_anonymous");
@ -133,12 +194,15 @@ const SubscribePage = (props) => {
    }

    console.log(`[SubscribeDialog] Successful login to ${topicUrl(baseUrl, topic)} for user ${username}`);
-    props.onSuccess();
+    props.onSuccess(getNotificationTypeFromToggles(browserNotificationsEnabled, backgroundNotificationsEnabled));
  };

  const handleUseAnotherChanged = (e) => {
    props.setBaseUrl("");
    setAnotherServerVisible(e.target.checked);
+    if (e.target.checked) {
+      setBackgroundNotificationsEnabled(false);
+    }
  };

  const subscribeButtonEnabled = (() => {
@ -193,8 +257,7 @@ const SubscribePage = (props) => {
            <FormControlLabel
              variant="standard"
              control={
-                <Checkbox
-                  fullWidth
+                <Switch
                  disabled={!reserveTopicEnabled}
                  checked={reserveTopicVisible}
                  onChange={(ev) => setReserveTopicVisible(ev.target.checked)}
@ -217,8 +280,9 @@ const SubscribePage = (props) => {
          <FormGroup>
            <FormControlLabel
              control={
-                <Checkbox
+                <Switch
                  onChange={handleUseAnotherChanged}
+                  checked={anotherServerVisible}
                  inputProps={{
                    "aria-label": t("subscribe_dialog_subscribe_use_another_label"),
                  }}
@ -244,6 +308,43 @@ const SubscribePage = (props) => {
            )}
          </FormGroup>
        )}
+        {browserNotificationsSupported && (
+          <FormGroup>
+            <FormControlLabel
+              control={
+                <Switch
+                  onChange={handleBrowserNotificationsChanged}
+                  checked={browserNotificationsEnabled}
+                  disabled={notificationsExplicitlyDenied}
+                  inputProps={{
+                    "aria-label": t("subscribe_dialog_subscribe_enable_browser_notifications_label"),
+                  }}
+                />
+              }
+              label={
+                <Stack direction="row" gap={1} alignItems="center">
+                  {t("subscribe_dialog_subscribe_enable_browser_notifications_label")}
+                  {notificationsExplicitlyDenied && <Warning />}
+                </Stack>
+              }
+            />
+            {pushNotificationsSupported && !anotherServerVisible && browserNotificationsEnabled && (
+              <FormControlLabel
+                control={
+                  <Switch
+                    onChange={handleBackgroundNotificationsChanged}
+                    checked={backgroundNotificationsEnabled}
+                    disabled={iosInstallRequired}
+                    inputProps={{
+                      "aria-label": t("subscribe_dialog_subscribe_enable_background_notifications_label"),
+                    }}
+                  />
+                }
+                label={t("subscribe_dialog_subscribe_enable_background_notifications_label")}
+              />
+            )}
+          </FormGroup>
+        )}
      </DialogContent>
      <DialogFooter status={error}>
        <Button onClick={props.onCancel}>{t("subscribe_dialog_subscribe_button_cancel")}</Button>
--- a/web/src/components/SubscriptionPopup.jsx
+++ b/web/src/components/SubscriptionPopup.jsx
@ -14,12 +14,26 @@ import {
  useMediaQuery,
  MenuItem,
  IconButton,
+  ListItemIcon,
+  ListItemText,
+  Divider,
 } from "@mui/material";
 import { useTranslation } from "react-i18next";
 import { useNavigate } from "react-router-dom";
-import { Clear } from "@mui/icons-material";
+import {
+  Check,
+  Clear,
+  ClearAll,
+  Edit,
+  EnhancedEncryption,
+  Lock,
+  LockOpen,
+  NotificationsOff,
+  RemoveCircle,
+  Send,
+} from "@mui/icons-material";
 import theme from "./theme";
-import subscriptionManager from "../app/SubscriptionManager";
+import subscriptionManager, { NotificationType } from "../app/SubscriptionManager";
 import DialogFooter from "./DialogFooter";
 import accountApi, { Role } from "../app/AccountApi";
 import session from "../app/Session";
@ -30,6 +44,7 @@ import api from "../app/Api";
 import { AccountContext } from "./App";
 import { ReserveAddDialog, ReserveDeleteDialog, ReserveEditDialog } from "./ReserveDialogs";
 import { UnauthorizedError } from "../app/errors";
+import notifier from "../app/Notifier";

 export const SubscriptionPopup = (props) => {
  const { t } = useTranslation();
@ -70,8 +85,7 @@ export const SubscriptionPopup = (props) => {
  };

  const handleSendTestMessage = async () => {
-    const { baseUrl } = props.subscription;
-    const { topic } = props.subscription;
+    const { baseUrl, topic } = props.subscription;
    const tags = shuffle([
      "grinning",
      "octopus",
@ -133,7 +147,7 @@ export const SubscriptionPopup = (props) => {

  const handleUnsubscribe = async () => {
    console.log(`[SubscriptionPopup] Unsubscribing from ${props.subscription.id}`, props.subscription);
-    await subscriptionManager.remove(props.subscription.id);
+    await subscriptionManager.remove(props.subscription);
    if (session.exists() && !subscription.internal) {
      try {
        await accountApi.deleteSubscription(props.subscription.baseUrl, props.subscription.topic);
@ -155,19 +169,72 @@ export const SubscriptionPopup = (props) => {
  return (
    <>
      <PopupMenu horizontal={placement} anchorEl={props.anchor} open={!!props.anchor} onClose={props.onClose}>
-        <MenuItem onClick={handleChangeDisplayName}>{t("action_bar_change_display_name")}</MenuItem>
-        {showReservationAdd && <MenuItem onClick={handleReserveAdd}>{t("action_bar_reservation_add")}</MenuItem>}
+        <NotificationToggle subscription={subscription} />
+        <Divider />
+        <MenuItem onClick={handleChangeDisplayName}>
+          <ListItemIcon>
+            <Edit fontSize="small" />
+          </ListItemIcon>
+
+          {t("action_bar_change_display_name")}
+        </MenuItem>
+        {showReservationAdd && (
+          <MenuItem onClick={handleReserveAdd}>
+            <ListItemIcon>
+              <Lock fontSize="small" />
+            </ListItemIcon>
+            {t("action_bar_reservation_add")}
+          </MenuItem>
+        )}
        {showReservationAddDisabled && (
          <MenuItem sx={{ cursor: "default" }}>
+            <ListItemIcon>
+              <Lock fontSize="small" color="disabled" />
+            </ListItemIcon>
+
            <span style={{ opacity: 0.3 }}>{t("action_bar_reservation_add")}</span>
            <ReserveLimitChip />
          </MenuItem>
        )}
-        {showReservationEdit && <MenuItem onClick={handleReserveEdit}>{t("action_bar_reservation_edit")}</MenuItem>}
-        {showReservationDelete && <MenuItem onClick={handleReserveDelete}>{t("action_bar_reservation_delete")}</MenuItem>}
-        <MenuItem onClick={handleSendTestMessage}>{t("action_bar_send_test_notification")}</MenuItem>
-        <MenuItem onClick={handleClearAll}>{t("action_bar_clear_notifications")}</MenuItem>
-        <MenuItem onClick={handleUnsubscribe}>{t("action_bar_unsubscribe")}</MenuItem>
+        {showReservationEdit && (
+          <MenuItem onClick={handleReserveEdit}>
+            <ListItemIcon>
+              <EnhancedEncryption fontSize="small" />
+            </ListItemIcon>
+
+            {t("action_bar_reservation_edit")}
+          </MenuItem>
+        )}
+        {showReservationDelete && (
+          <MenuItem onClick={handleReserveDelete}>
+            <ListItemIcon>
+              <LockOpen fontSize="small" />
+            </ListItemIcon>
+
+            {t("action_bar_reservation_delete")}
+          </MenuItem>
+        )}
+        <MenuItem onClick={handleSendTestMessage}>
+          <ListItemIcon>
+            <Send fontSize="small" />
+          </ListItemIcon>
+
+          {t("action_bar_send_test_notification")}
+        </MenuItem>
+        <MenuItem onClick={handleClearAll}>
+          <ListItemIcon>
+            <ClearAll fontSize="small" />
+          </ListItemIcon>
+
+          {t("action_bar_clear_notifications")}
+        </MenuItem>
+        <MenuItem onClick={handleUnsubscribe}>
+          <ListItemIcon>
+            <RemoveCircle fontSize="small" />
+          </ListItemIcon>
+
+          {t("action_bar_unsubscribe")}
+        </MenuItem>
      </PopupMenu>
      <Portal>
        <Snackbar
@ -267,6 +334,83 @@ const DisplayNameDialog = (props) => {
  );
 };

+const getNotificationType = (subscription) => {
+  if (subscription.mutedUntil === 1) {
+    return "muted";
+  }
+
+  return subscription.notificationType ?? NotificationType.BROWSER;
+};
+
+const checkedItem = (
+  <ListItemIcon>
+    <Check />
+  </ListItemIcon>
+);
+
+const NotificationToggle = ({ subscription }) => {
+  const { t } = useTranslation();
+  const type = getNotificationType(subscription);
+
+  const handleChange = async (newType) => {
+    try {
+      if (newType !== NotificationType.SOUND && !(await notifier.maybeRequestPermission())) {
+        return;
+      }
+
+      await subscriptionManager.setNotificationType(subscription, newType);
+    } catch (e) {
+      console.error("[NotificationToggle] Error setting notification type", e);
+    }
+  };
+
+  const unmute = async () => {
+    await subscriptionManager.setMutedUntil(subscription.id, 0);
+  };
+
+  if (type === "muted") {
+    return (
+      <MenuItem onClick={unmute}>
+        <ListItemIcon>
+          <NotificationsOff />
+        </ListItemIcon>
+        {t("notification_toggle_unmute")}
+      </MenuItem>
+    );
+  }
+
+  return (
+    <>
+      <MenuItem>
+        {type === NotificationType.SOUND && checkedItem}
+        <ListItemText inset={type !== NotificationType.SOUND} onClick={() => handleChange(NotificationType.SOUND)}>
+          {t("notification_toggle_sound")}
+        </ListItemText>
+      </MenuItem>
+      {!notifier.denied() && !notifier.iosSupportedButInstallRequired() && (
+        <>
+          {notifier.supported() && (
+            <MenuItem>
+              {type === NotificationType.BROWSER && checkedItem}
+              <ListItemText inset={type !== NotificationType.BROWSER} onClick={() => handleChange(NotificationType.BROWSER)}>
+                {t("notification_toggle_browser")}
+              </ListItemText>
+            </MenuItem>
+          )}
+          {notifier.pushSupported() && (
+            <MenuItem>
+              {type === NotificationType.BACKGROUND && checkedItem}
+              <ListItemText inset={type !== NotificationType.BACKGROUND} onClick={() => handleChange(NotificationType.BACKGROUND)}>
+                {t("notification_toggle_background")}
+              </ListItemText>
+            </MenuItem>
+          )}
+        </>
+      )}
+    </>
+  );
+};
+
 export const ReserveLimitChip = () => {
  const { account } = useContext(AccountContext);
  if (account?.role === Role.ADMIN || account?.stats.reservations_remaining > 0) {
--- a/web/src/components/hooks.js
+++ b/web/src/components/hooks.js
@ -2,7 +2,6 @@ import { useNavigate, useParams } from "react-router-dom";
 import { useEffect, useState } from "react";
 import subscriptionManager from "../app/SubscriptionManager";
 import { disallowedTopic, expandSecureUrl, topicUrl } from "../app/utils";
-import notifier from "../app/Notifier";
 import routes from "./routes";
 import connectionManager from "../app/ConnectionManager";
 import poller from "../app/Poller";
@ -10,6 +9,7 @@ import pruner from "../app/Pruner";
 import session from "../app/Session";
 import accountApi from "../app/AccountApi";
 import { UnauthorizedError } from "../app/errors";
+import webPushWorker from "../app/WebPushWorker";

 /**
 * Wire connectionManager and subscriptionManager so that subscriptions are updated when the connection
@ -41,7 +41,7 @@ export const useConnectionListeners = (account, subscriptions, users) => {
        const added = await subscriptionManager.addNotification(subscriptionId, notification);
        if (added) {
          const defaultClickAction = (subscription) => navigate(routes.forSubscription(subscription));
-          await notifier.notify(subscriptionId, notification, defaultClickAction);
+          await subscriptionManager.notify(subscriptionId, notification, defaultClickAction);
        }
      };

@ -61,7 +61,7 @@ export const useConnectionListeners = (account, subscriptions, users) => {
        }
      };

-      connectionManager.registerStateListener(subscriptionManager.updateState);
+      connectionManager.registerStateListener((id, state) => subscriptionManager.updateState(id, state));
      connectionManager.registerMessageListener(handleMessage);

      return () => {
@ -79,7 +79,7 @@ export const useConnectionListeners = (account, subscriptions, users) => {
    if (!account || !account.sync_topic) {
      return;
    }
-    subscriptionManager.add(config.base_url, account.sync_topic, true); // Dangle!
+    subscriptionManager.add(config.base_url, account.sync_topic, { internal: true }); // Dangle!
  }, [account]);

  // When subscriptions or users change, refresh the connections
@ -129,11 +129,30 @@ export const useAutoSubscribe = (subscriptions, selected) => {
 * and Poller.js, because side effect imports are not a thing in JS, and "Optimize imports" cleans
 * up "unused" imports. See https://github.com/binwiederhier/ntfy/issues/186.
 */
+
+const stopWorkers = () => {
+  poller.stopWorker();
+  pruner.stopWorker();
+  accountApi.stopWorker();
+};
+
+const startWorkers = () => {
+  poller.startWorker();
+  pruner.startWorker();
+  accountApi.startWorker();
+};
+
 export const useBackgroundProcesses = () => {
  useEffect(() => {
-    poller.startWorker();
-    pruner.startWorker();
-    accountApi.startWorker();
+    console.log("[useBackgroundProcesses] mounting");
+    startWorkers();
+    webPushWorker.startWorker();
+
+    return () => {
+      console.log("[useBackgroundProcesses] unloading");
+      stopWorkers();
+      webPushWorker.stopWorker();
+    };
  }, []);
 };

--- a/web/vite.config.js
+++ b/web/vite.config.js
@ -1,14 +1,73 @@
 /* eslint-disable import/no-extraneous-dependencies */
 import { defineConfig } from "vite";
 import react from "@vitejs/plugin-react";
+import { VitePWA } from "vite-plugin-pwa";
+
+// please look at develop.md for how to run your browser
+// in a mode allowing insecure service worker testing
+// this turns on:
+// - the service worker in dev mode
+// - turns off automatically opening the browser
+const enableLocalPWATesting = process.env.ENABLE_DEV_PWA;

 export default defineConfig(() => ({
  build: {
    outDir: "build",
    assetsDir: "static/media",
+    sourcemap: true,
  },
  server: {
    port: 3000,
+    open: !enableLocalPWATesting,
  },
-  plugins: [react()],
+  plugins: [
+    react(),
+    VitePWA({
+      registerType: "autoUpdate",
+      injectRegister: "inline",
+      strategies: "injectManifest",
+      devOptions: {
+        enabled: enableLocalPWATesting,
+        /* when using generateSW the PWA plugin will switch to classic */
+        type: "module",
+        navigateFallback: "index.html",
+      },
+      injectManifest: {
+        globPatterns: ["**/*.{js,css,html,mp3,png,svg,json}"],
+        globIgnores: ["config.js"],
+        manifestTransforms: [
+          (entries) => ({
+            manifest: entries.map((entry) =>
+              entry.url === "index.html"
+                ? {
+                    ...entry,
+                    url: "/",
+                  }
+                : entry
+            ),
+          }),
+        ],
+      },
+      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.",
+        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",
+          },
+        ],
+      },
+    }),
+  ],
 }));