tweak iOS PWA message in notifications settings

This commit is contained in:
Josh Hawkins 2026-05-31 12:02:31 -05:00
parent 7c9fb2ecb3
commit fd49ca3349
2 changed files with 23 additions and 5 deletions

View File

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

View File

@ -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"