administrator/frigate
1
0
Fork 0
mirror of https://github.com/blakeblackshear/frigate.git synced 2026-07-07 20:41:13 +03:00
Code Issues Actions 2 Packages Projects Releases Wiki Activity

tweak iOS PWA message in notifications settings

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
web/public/locales/en/views/settings.json
View File

@ -1154,7 +1154,8 @@
}, },
"notificationUnavailable": { "notificationUnavailable": {
"title": "Notifications Unavailable", "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": { "globalSettings": {
"title": "Global Settings", "title": "Global Settings",

25
web/src/components/config-form/sectionExtras/NotificationsSettingsExtras.tsx
View File

@ -48,6 +48,8 @@ import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
import { Trans, useTranslation } from "react-i18next"; import { Trans, useTranslation } from "react-i18next";
import { useDateLocale } from "@/hooks/use-date-locale"; import { useDateLocale } from "@/hooks/use-date-locale";
import { useDocDomain } from "@/hooks/use-doc-domain"; 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 { CameraNameLabel } from "@/components/camera/FriendlyNameLabel";
import { useIsAdmin } from "@/hooks/use-is-admin"; import { useIsAdmin } from "@/hooks/use-is-admin";
import { cn } from "@/lib/utils"; import { cn } from "@/lib/utils";
@ -437,6 +439,12 @@ export default function NotificationsSettingsExtras({
} }
if (!("Notification" in window) || !window.isSecureContext) { 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 ( 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="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"> <div className="w-full max-w-5xl">
@ -465,12 +473,21 @@ export default function NotificationsSettingsExtras({
{t("notification.notificationUnavailable.title")} {t("notification.notificationUnavailable.title")}
</AlertTitle> </AlertTitle>
<AlertDescription> <AlertDescription>
<Trans ns="views/settings"> <Trans
notification.notificationUnavailable.desc ns="views/settings"
</Trans> i18nKey={
requiresPwaInstall
? "notification.notificationUnavailable.descPwa"
: "notification.notificationUnavailable.desc"
}
/>
<div className="mt-3 flex items-center"> <div className="mt-3 flex items-center">
<Link <Link
to={getLocaleDocUrl("configuration/authentication")} to={getLocaleDocUrl(
requiresPwaInstall
? "configuration/notifications"
: "configuration/authentication",
)}
target="_blank" target="_blank"
rel="noopener noreferrer" rel="noopener noreferrer"
className="inline" className="inline"