search

firebase / firebase-js-sdk

Firebase Javascript SDK
https://firebase.google.com/docs/web/setup
Other
4.86k stars 893 forks source link

iOS PWA Device Restart Suppresses Notifications #8444

Open dlarocque opened 3 months ago

dlarocque commented 3 months ago

Operating System

iOS 17.5.1

Environment (if applicable)

Safari PWA

Firebase SDK Version

10.7.2

Firebase SDK Product(s)

Messaging

Project Tooling

React App deployed to Firebase Hosting.

Detailed Problem Description

After adding the application to the home screen on iOS, notifications come in successfully. After restarting the device, notifications stop being received. Once the PWA is opened, all of the notifications that were previously suppressed are sent all at once.

If I replace 

messaging.onBackgroundMessage((event) => {
  return self.registration.showNotification('hello', {});
})

with 

self.addEventListener('push', (event) => {
  return self.registration.showNotification('hello', {});
})

then the notifications come in just fine, so this is in fact a Firebase Messaging issue, where the event handler doesn't get triggered.

Steps and code to reproduce issue

Deploy an application with the following

  1. Register the app to receive notifications 
    
import { initializeApp } from 'firebase/app';
import { getMessaging, getToken, onMessage } from 'firebase/messaging';

const firebaseConfig = { /**/ };

const app = initializeApp(firebaseConfig); const messaging = getMessaging(app);

const requestPermission = () => { Notification.requestPermission().then((permission) => { if (permission === 'granted') { console.log("Notification permission granted."); getToken(messaging, { vapidKey: 'KEY' }) .then((currentToken) => { if (currentToken) { console.log(Token: ${currentToken}); } else { console.log("No registration token avaiable"); } }) .catch((err) => { console.error(err); }) } else { console.warn("Notification permission denied"); } }) }

2. Register the `firebase-messaging-sw.js`:
```js
importScripts('https://www.gstatic.com/firebasejs/10.7.2/firebase-app-compat.js');
importScripts('https://www.gstatic.com/firebasejs/10.7.2/firebase-messaging-compat.js');

firebase.initializeApp({ /* */ });

const messaging = firebase.messaging();

messaging.onBackgroundMessage((event) => {
  return self.registration.showNotification('hello', {});
})

Once the application is deployed, make sure WebKit Notifications are enabled on the device by going to Settings > Safari > Advanced > Feature Flags > Notifications. Then, visit the app in Safari, add it to the home screen, grant access to receive notifications, and send a notification on the device. Once you've confirmed you see notifications, restart the device. If you send notifications again, you'll notice they don't come in anymore, until you open the app again.

dlarocque commented 2 months ago

After further investigation, it looks like push event listeners and onBackground message share the same behaviour.

The behaviour I'm now seeing is:

  1. Add PWA to home screen
  2. Grant permissions for notifications
  3. Restart device
  4. Notifications no longer come in
  5. Open PWA, exit PWA
  6. Notifications don't come in
  7. Kill PWA in background
  8. Open PWA, exit PWA
  9. Notifications successfully come in

My guess is that the service worker isn't registered when the device first boots up. I am not sure whether this is the expected behaviour of PWAs, or if this is a WebKit bug.

atgillette commented 2 months ago

Take a look at this related issue, https://github.com/firebase/firebase-js-sdk/issues/7309#issuecomment-2312996180

dlarocque commented 2 months ago

This has been added to a list of known issues with FCM in iOS PWAs caused by WebKit bugs in our Wiki: https://github.com/firebase/firebase-js-sdk/wiki/Known-Issues