firebase / firebase/firebase-js-sdk

iOS PWA notification click doesn't open the app with proper URL when the app is killed

Open
#7,698 14 comments 10 reactions 0 assignees View on GitHub
api: messaging browser-compatibility-issue bug
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

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.