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

[adampfw]

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-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

[adampfw]

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.

[adampfw]

@jbalidiong Do you have any info or update about this one?

[Merwan1010]

@adampfw
Can you share a github link ? Thank you

[Cyril212]

Have the same issue. Hope it will be resolved soon.

[givip]

The root issue discussion is here https://bugs.webkit.org/show_bug.cgi?id=268797

[dlarocque]

The root issue discussion is here https://bugs.webkit.org/show_bug.cgi?id=268797

@givip I was relieved to see that there's already an open WebKit bug for this, but unfortunately I can't reproduce the behaviour described in the bug. I've tried a variety of cases, and notificationclick events seem to always be fired. I'm interested to see whether the WebKit team can reproduce this.

[dlarocque]

Hey @adampfw, are you still experiencing this issue?

Could you confirm whether you're able to reproduce the behaviour described in the open WebKit bug https://bugs.webkit.org/show_bug.cgi?id=268797?