Meet Web Push for Safari

RSS for tag

Discuss the WWDC22 Session Meet Web Push for Safari

Posts under wwdc2022-10098 tag

2 Posts
Sort by:
Post not yet marked as solved
6 Replies
3.4k Views
I managed to get my Progressive Web App to send notifications to users via Web Push. However, it seems that the definable actions are not working. In Chrome, there is a button in the notification. If you click it, you get an overview of the available actions that the user can click. When I look at the notification on iOS, I only see the "View" action. My self-defined actions seem to be ignored and not displayed. Also, the "notificationclick" event should be executed by the browser as soon as the notification is clicked. In the Serviceworker I listened to the event and tried to link to a specific page of the PWA. In Chrome and Firefox this works fine. In Safari / iOS I only get to the start page of the PWA. Are the notification actions not yet supported with WebKit 16.4 ?
Posted Last updated
.
Post not yet marked as solved
1 Replies
1.2k Views
I have implemented the web push notifications using the FCM, the thing is I am getting the notifications on safari(but count is only 3 and it varies some time to 4-6). I know that safari will revoke the notification permission, if we do not send the notification to notification center. But in my case I am already sending the notification to notification center, and and it displays the notification on screen(up right corner), after that also it revokes the permission. Is their specific we need to handle in case of service worker ? that user have to mandatory open the notifications upon receiving otherwise it will revoke the permission. Do we have any sample code specific for web push notifications (not local notifications), on how to handle the background messages(through service workers), and the foreground messages(when tab is active). In case of tab active(generally onMessage), I am showing the notification using the following code : let notification = new Notification('title', { 'body': 'some test body' }); And in case of background message(service worker is handling it, specifically I am not doing any thing to show the notification). My service worker code : importScripts("https://www.gstatic.com/firebasejs/9.20.0/firebase-app-compat.js"); importScripts("https://www.gstatic.com/firebasejs/9.20.0/firebase-messaging-compat.js"); self.addEventListener('notificationclick', (event) => { console.log("background worker trigger"); event.notification.close() const pathname = event.notification?.data?.FCM_MSG?.data?.link if (!pathname) return const url = new URL(pathname, self.location.origin).href event.waitUntil( self.clients .matchAll({ type: 'window', includeUncontrolled: true }) .then((clientsArr) => { const hadWindowToFocus = clientsArr.some((windowClient) => windowClient.url === url ? (windowClient.focus(), true) : false ) if (!hadWindowToFocus) self.clients .openWindow(url) .then((windowClient) => //windowClient ? windowClient.focus() : null console.log("opened window") ) }) ) }) if (!firebase.apps.length) { firebase.initializeApp({ apiKey: "somekey", authDomain: "somekey", projectId: "somekey", storageBucket: "somekey", messagingSenderId: "somekey", appId: "somekey", vapidKey: 'somekey' }); } else { firebase.app(); // if already initialized, use that one } const messaging = firebase.messaging(); messaging.onBackgroundMessage(function(payload) { console.log('[firebase-messaging-sw.js] Received background message ', payload); })
Posted Last updated
.