firebase-js-sdk
firebase-js-sdk copied to clipboard
iOS PWA notification click doesn't open the app with proper URL when the app is killed
Operating System
iOS 16.6, iOS 16.4.1
Browser Version
iOS Safari 16.6, iOS Safari 16.4
Firebase SDK Version
9.22.2
Firebase SDK Product:
Messaging
Describe your project's tooling
App is build with Rails and Turbo, compiled with Webpack.
Service Worker is pure JS file available at domain.com/firebase-messaging-sw.js.
Describe the problem
PWA notification click opens PWA with start url, it's not respecting correct URL passed in click_action property inside notification object.
It happens only when the PWA is killed - when the PWA is in the background it gets focused and I receive service worker message with notification-clicked type so I am able to do proper redirect.
It happens only on iOS devices - Android works perfect both when the app is killed and when the app is in the background.
Steps and code to reproduce issue
My manifest.json file has following code:
{
"name": "My app",
"short_name": "My app",
"start_url": "/page",
"scope": "/",
"description": "My app description",
"display": "standalone",
"theme_color": "#ffffff",
"background_color": "#ffffff",
"icons": [
{
"src": "https://cdn.mydomain.com/icon192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "https://cdn.mydomain.com/icon512.png",
"sizes": "512x512",
"type": "image/png"
}
],
"version": 1
}
My app registers Service Worker with:
navigator.serviceWorker.register('/firebase-messaging-sw.js', { scope: '/page' })
My Service Worker file is available at domain.com/firebase-messaging-sw.js with following code:
self.importScripts('https://www.gstatic.com/firebasejs/9.22.2/firebase-app-compat.js')
self.importScripts('https://www.gstatic.com/firebasejs/9.22.2/firebase-messaging-compat.js')
firebase.initializeApp({
apiKey: '***',
authDomain: '***',
projectId: '***',
messagingSenderId: '***',
appId: '',
})
const messaging = firebase.messaging()
self.addEventListener('fetch', function () {})
self.addEventListener('install', function () {})
self.addEventListener('activate', function () {})
When app initializes it execute following code to get messaging token and send it to backend:
const messaging = getMessaging()
getToken(messaging, {
serviceWorkerRegistration: serviceWorkerRegistration,
vapidKey: '***'
}).then((token) => {
registerTokenOnBackend()
})
Also the app has event listener to execute proper redirect on notificaton-click event:
navigator.serviceWorker.onmessage = (event) => {
if (event.data.messageType === 'notification-clicked') {
if (location.href !== event.data.notification.click_action) {
Turbo.visit(event.data.notification.click_action)
}
}
}
Backend sends FCM notification with following payload:
title: "Hello!",
body: "It's me!",
icon: "https://www.domain.com/favicon.png",
click_action: "https://www.domain.com/page/url_i_want_to_visit"
I receive corrent notification both on Android and iOS devices. But when I click a notification:
- Android device
- when PWA is killed
- PWA gets open on proper URL ✅
- when PWA is on the background
- PWA gets focused,
notification-clickedhandler fires and I redirect user using Turbo ✅
- PWA gets focused,
- when PWA is killed
- iOS device
- when PWA is killed
- PWA gets open on start url ❌
- when PWA is in the background
- PWA gets focused,
notification-clickedhandler fires and I redirect user using Turbo ✅
- PWA gets focused,
- when PWA is killed
On Android devices when the app is killed
Issue update:
Looks like the same thing happens when iOS app is in the background for several hours (about 6) - in this case notification click also opens the PWA on the root URL, without respecting click_action URL from notification payload.
@jbalidiong Do you have any info or update about this one?
@adampfw Can you share a github link ? Thank you
Have the same issue. Hope it will be resolved soon.
The root issue discussion is here https://bugs.webkit.org/show_bug.cgi?id=268797