firebase / firebase/firebase-js-sdk
iOS PWA notification click doesn't open the app with proper URL when the app is killed
- Dominant language
- TypeScript
- Stars
- 5.1k
- Forks
- 1k
- Avg merge
- 2d 21h
- Merged PRs (30d)
- 37
Description
### 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](https://rubyonrails.org/) and [Turbo](https://turbo.hotwired.dev/), 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:
```json
{
"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:
```javascript
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:
```javascript
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:
```javascript
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:
```javascript
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:
```javascript
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-clicked` handler fires and I redirect user using Turbo ✅
* iOS device
* when PWA is killed
* PWA gets open on start url ❌
* when PWA is in the background
* PWA gets focused, `notification-clicked` handler fires and I redirect user using Turbo ✅
On Android devices when the app is killed
Contributor guide
Assessment
This issue has not been assessed yet.