From fd49ca3349270a75e7c28326fef0ea4056d26009 Mon Sep 17 00:00:00 2001
From: Josh Hawkins <32435876+hawkeye217@users.noreply.github.com>
Date: Sun, 31 May 2026 12:02:31 -0500
Subject: [PATCH] tweak iOS PWA message in notifications settings

---
 web/public/locales/en/views/settings.json     |  3 ++-
 .../NotificationsSettingsExtras.tsx           | 25 ++++++++++++++++---
 2 files changed, 23 insertions(+), 5 deletions(-)

diff --git a/web/public/locales/en/views/settings.json b/web/public/locales/en/views/settings.json
index 805eb65e8e..1e0d37de4d 100644
--- a/web/public/locales/en/views/settings.json
+++ b/web/public/locales/en/views/settings.json
@@ -1154,7 +1154,8 @@
     },
     "notificationUnavailable": {
       "title": "Notifications Unavailable",
-      "desc": "Web push notifications require a secure context (<code>https://…</code>). This is a browser limitation. Access Frigate securely to use notifications."
+      "desc": "Web push notifications require a secure context (<code>https://…</code>). This is a browser limitation. Access Frigate securely to use notifications.",
+      "descPwa": "On iOS, web push notifications are only available when Frigate is installed to your Home Screen. Open the <strong>Share</strong> menu, choose <strong>Add to Home Screen</strong>, then open Frigate from the new icon to register this device for notifications."
     },
     "globalSettings": {
       "title": "Global Settings",
diff --git a/web/src/components/config-form/sectionExtras/NotificationsSettingsExtras.tsx b/web/src/components/config-form/sectionExtras/NotificationsSettingsExtras.tsx
index cf8b6778c6..337f37f23a 100644
--- a/web/src/components/config-form/sectionExtras/NotificationsSettingsExtras.tsx
+++ b/web/src/components/config-form/sectionExtras/NotificationsSettingsExtras.tsx
@@ -48,6 +48,8 @@ import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
 import { Trans, useTranslation } from "react-i18next";
 import { useDateLocale } from "@/hooks/use-date-locale";
 import { useDocDomain } from "@/hooks/use-doc-domain";
+import { isPWA } from "@/utils/isPWA";
+import { isIOS } from "react-device-detect";
 import { CameraNameLabel } from "@/components/camera/FriendlyNameLabel";
 import { useIsAdmin } from "@/hooks/use-is-admin";
 import { cn } from "@/lib/utils";
@@ -437,6 +439,12 @@ export default function NotificationsSettingsExtras({
   }
 
   if (!("Notification" in window) || !window.isSecureContext) {
+    // iOS only exposes web push to apps installed to the Home Screen, so a
+    // secure-context iOS browser tab that isn't an installed PWA has no
+    // Notification API. Android supports web push in a normal tab, so it never
+    // reaches this case and keeps the generic secure-context message.
+    const requiresPwaInstall = isIOS && window.isSecureContext && !isPWA;
+
     return (
       <div className="scrollbar-container order-last mb-2 mt-2 flex h-full w-full flex-col overflow-y-auto pb-2 md:order-none">
         <div className="w-full max-w-5xl">
@@ -465,12 +473,21 @@ export default function NotificationsSettingsExtras({
                   {t("notification.notificationUnavailable.title")}
                 </AlertTitle>
                 <AlertDescription>
-                  <Trans ns="views/settings">
-                    notification.notificationUnavailable.desc
-                  </Trans>
+                  <Trans
+                    ns="views/settings"
+                    i18nKey={
+                      requiresPwaInstall
+                        ? "notification.notificationUnavailable.descPwa"
+                        : "notification.notificationUnavailable.desc"
+                    }
+                  />
                   <div className="mt-3 flex items-center">
                     <Link
-                      to={getLocaleDocUrl("configuration/authentication")}
+                      to={getLocaleDocUrl(
+                        requiresPwaInstall
+                          ? "configuration/notifications"
+                          : "configuration/authentication",
+                      )}
                       target="_blank"
                       rel="noopener noreferrer"
                       className="inline"