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

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,

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>

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.",

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());