Merge pull request #788 from nimbleghost/clarify-web-push-other-server

Clarify that web push is not supported on other servers

Author: binwiederhier

Diff for: docs/known-issues.md

@@ -1,5 +1,5 @@
 # Known issues
-This is an incomplete list of known issues with the ntfy server, Android app, and iOS app. You can find a complete
+This is an incomplete list of known issues with the ntfy server, web app, Android app, and iOS app. You can find a complete
 list [on GitHub](https://github.com/binwiederhier/ntfy/labels/%F0%9F%AA%B2%20bug), but I thought it may be helpful
 to have the prominent ones here to link to.
 
@@ -27,7 +27,7 @@ Be sure that in your selfhosted server:
 * Set `upstream-base-url: "https://ntfy.sh"` (**not your own hostname!**)
 * Ensure that the URL you set in `base-url` **matches exactly** what you set the Default Server in iOS to 
 
-## Firefox on Android not automatically subscribing to web push
+## Firefox on Android not automatically subscribing to web push (see [#789](https://github.com/binwiederhier/ntfy/issues/789))
 ntfy defaults to web-push based subscriptions when installed as a [progressive web app](./subscribe/pwa.md). Firefox
 Android has an [open bug](https://bugzilla.mozilla.org/show_bug.cgi?id=1796434) where it reports the PWA mode incorrectly.
 This causes ntfy to not automatically subscribe to web push, and requires you to go to the ntfy Settings page to enable
@@ -36,3 +36,7 @@ it manually.
 ## Safari does not play sounds for web push notifications
 Safari does not support playing sounds for web push notifications, and treats them all as silent. This will be fixed with
 iOS 17 / Safari 17, which will be released later in 2023.
+
+## PWA on iOS sometimes crashes with an IndexedDB error (see [#787](https://github.com/binwiederhier/ntfy/issues/787))
+When resuming the installed PWA from the background, it sometimes crashes with an error from IndexedDB/Dexie, due to a
+[WebKit bug]( https://bugs.webkit.org/show_bug.cgi?id=197050). A reload will fix it until a permanent fix is found.

Diff for: web/public/static/langs/en.json

@@ -171,6 +171,7 @@
   "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_use_another_background_info": "Notifications from other servers will not be received when the web app is not open",
   "subscribe_dialog_subscribe_base_url_label": "Service URL",
   "subscribe_dialog_subscribe_button_generate_topic_name": "Generate name",
   "subscribe_dialog_subscribe_button_cancel": "Cancel",
@@ -333,9 +334,9 @@
   "prefs_notifications_delete_after_one_week_description": "Notifications are auto-deleted after one week",
   "prefs_notifications_delete_after_one_month_description": "Notifications are auto-deleted after one month",
   "prefs_notifications_web_push_title": "Background notifications",
-  "prefs_notifications_web_push_enabled_description": "Notifications are received even when web app is not running (via Web Push)",
-  "prefs_notifications_web_push_disabled_description": "Notification are received when web app is running (via WebSocket)",
-  "prefs_notifications_web_push_enabled": "Enabled",
+  "prefs_notifications_web_push_enabled_description": "Notifications are received even when the web app is not running (via Web Push)",
+  "prefs_notifications_web_push_disabled_description": "Notification are received when the web app is running (via WebSocket)",
+  "prefs_notifications_web_push_enabled": "Enabled for {{server}}",
   "prefs_notifications_web_push_disabled": "Disabled",
   "prefs_users_title": "Manage users",
   "prefs_users_description": "Add/remove users for your protected topics here. Please note that username and password are stored in the browser's local storage.",

Diff for: web/src/components/Preferences.jsx

@@ -36,7 +36,7 @@ import { Info } from "@mui/icons-material";
 import { useOutletContext } from "react-router-dom";
 import theme from "./theme";
 import userManager from "../app/UserManager";
-import { playSound, shuffle, sounds, validUrl } from "../app/utils";
+import { playSound, shortUrl, shuffle, sounds, validUrl } from "../app/utils";
 import session from "../app/Session";
 import routes from "./routes";
 import accountApi, { Permission, Role } from "../app/AccountApi";
@@ -253,7 +253,7 @@ const WebPushEnabled = () => {
     >
       <FormControl fullWidth variant="standard" sx={{ m: 1 }}>
         <Select value={enabled ?? false} onChange={handleChange} aria-labelledby={labelId}>
-          <MenuItem value>{t("prefs_notifications_web_push_enabled")}</MenuItem>
+          <MenuItem value>{t("prefs_notifications_web_push_enabled", { server: shortUrl(config.base_url) })}</MenuItem>
           <MenuItem value={false}>{t("prefs_notifications_web_push_disabled")}</MenuItem>
         </Select>
       </FormControl>

Diff for: web/src/components/SubscribeDialog.jsx

@@ -14,6 +14,7 @@ import {
   Switch,
 } from "@mui/material";
 import { useTranslation } from "react-i18next";
+import { useLiveQuery } from "dexie-react-hooks";
 import theme from "./theme";
 import api from "../app/Api";
 import { randomAlphanumericString, topicUrl, validTopic, validUrl } from "../app/utils";
@@ -28,6 +29,7 @@ import ReserveTopicSelect from "./ReserveTopicSelect";
 import { AccountContext } from "./App";
 import { TopicReservedError, UnauthorizedError } from "../app/errors";
 import { ReserveLimitChip } from "./SubscriptionPopup";
+import prefs from "../app/Prefs";
 
 const publicBaseUrl = "https://ntfy.sh";
 
@@ -96,6 +98,8 @@ const SubscribePage = (props) => {
   const reserveTopicEnabled =
     session.exists() && (account?.role === Role.ADMIN || (account?.role === Role.USER && (account?.stats.reservations_remaining || 0) > 0));
 
+  const webPushEnabled = useLiveQuery(() => prefs.webPushEnabled());
+
   const handleSubscribe = async () => {
     const user = await userManager.get(baseUrl); // May be undefined
     const username = user ? user.username : t("subscribe_dialog_error_user_anonymous");
@@ -233,12 +237,19 @@ const SubscribePage = (props) => {
                 inputValue={props.baseUrl}
                 onInputChange={updateBaseUrl}
                 renderInput={(params) => (
-                  <TextField
-                    {...params}
-                    placeholder={config.base_url}
-                    variant="standard"
-                    aria-label={t("subscribe_dialog_subscribe_base_url_label")}
-                  />
+                  <>
+                    <TextField
+                      {...params}
+                      placeholder={config.base_url}
+                      variant="standard"
+                      aria-label={t("subscribe_dialog_subscribe_base_url_label")}
+                    />
+                    {webPushEnabled && (
+                      <div style={{ width: "100%", color: "#aaa", fontSize: "0.75rem", marginTop: "0.5rem" }}>
+                        {t("subscribe_dialog_subscribe_use_another_background_info")}
+                      </div>
+                    )}
+                  </>
                 )}
               />
             )}