Special case ios detection for push (still broken)

This commit is contained in:
Armin Ronacher 2025-06-25 15:27:46 +02:00
parent e847223a32
commit 2441453287
2 changed files with 69 additions and 4 deletions

View file

@ -206,6 +206,20 @@ export class NotificationSettings extends LitElement {
}
}
private isIOSSafari(): boolean {
const userAgent = navigator.userAgent.toLowerCase();
const isIOS = /iphone|ipad|ipod/.test(userAgent);
return isIOS;
}
private isStandalone(): boolean {
return (
window.matchMedia('(display-mode: standalone)').matches ||
('standalone' in window.navigator &&
(window.navigator as Navigator & { standalone?: boolean }).standalone === true)
);
}
render() {
if (!this.visible) {
return html``;
@ -214,6 +228,8 @@ export class NotificationSettings extends LitElement {
const isSupported = pushNotificationService.isSupported();
const hasSubscription = this.subscription || pushNotificationService.isSubscribed();
const canTest = this.permission === 'granted' && hasSubscription;
const isIOSSafari = this.isIOSSafari();
const isStandalone = this.isStandalone();
return html`
<!-- Modal backdrop -->
@ -247,9 +263,22 @@ export class NotificationSettings extends LitElement {
<div
class="p-3 bg-status-warning bg-opacity-10 border border-status-warning rounded"
>
<p class="text-sm text-status-warning">
Push notifications are not supported in this browser.
</p>
${
isIOSSafari && !isStandalone
? html`
<p class="text-sm text-status-warning mb-2">
Push notifications require installing this app to your home screen.
</p>
<p class="text-xs text-status-warning opacity-80">
Tap the share button in Safari and select "Add to Home Screen" to enable push notifications.
</p>
`
: html`
<p class="text-sm text-status-warning">
Push notifications are not supported in this browser.
</p>
`
}
</div>
`
: html`

View file

@ -273,7 +273,43 @@ export class PushNotificationService {
* Check if push notifications are supported
*/
isSupported(): boolean {
return 'serviceWorker' in navigator && 'PushManager' in window && 'Notification' in window;
// Basic feature detection
const hasBasicSupport =
'serviceWorker' in navigator && 'PushManager' in window && 'Notification' in window;
if (!hasBasicSupport) {
return false;
}
// iOS Safari PWA specific detection
// iOS Safari supports push notifications only in standalone PWA mode (iOS 16.4+)
if (this.isIOSSafari()) {
// Check if running in standalone mode (PWA installed)
return this.isStandalone();
}
return true;
}
/**
* Check if running on iOS (Safari or PWA)
*/
private isIOSSafari(): boolean {
const userAgent = navigator.userAgent.toLowerCase();
const isIOS = /iphone|ipad|ipod/.test(userAgent);
return isIOS;
}
/**
* Check if running in standalone mode (PWA installed)
*/
private isStandalone(): boolean {
// Check if running in standalone mode
return (
window.matchMedia('(display-mode: standalone)').matches ||
('standalone' in window.navigator &&
(window.navigator as Navigator & { standalone?: boolean }).standalone === true)
);
}
/**