firebase-js-sdk icon indicating copy to clipboard operation
firebase-js-sdk copied to clipboard

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

Open adampfw opened this issue 2 years ago • 12 comments

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 avatar Oct 13 '23 14:10 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 avatar Oct 19 '23 16:10 adampfw

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

adampfw avatar Nov 29 '23 10:11 adampfw

@adampfw Can you share a github link ? Thank you

Merwan1010 avatar Jan 14 '24 16:01 Merwan1010

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

Cyril212 avatar Jan 31 '24 20:01 Cyril212

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

givip avatar Aug 03 '24 08:08 givip