angular/angularfire

ServiceWorker registration fails in Facebook/Instagram in-app browser on iOS

veneliniliev opened this issue · 3 comments

veneliniliev commented

When using the Firebase Messaging service with Angular 19.1.4 in the Facebook/Instagram in-app browser on iOS devices, the following error occurs:

TypeError: undefined is not an object (evaluating 'navigator.serviceWorker.addEventListener')

Environment

  • Platform: iOS
  • Browser: Facebook/Instagram in-app browser
  • Framework: Angular 19.1.4
  • Dependencies:
    • @angular/core: 19.1.4
    • @angular/common: 19.1.4
    • @angular/platform-browser: 19.1.4
  • Service: Firebase Cloud Messaging

Technical Details

The error occurs during the messaging service initialization when attempting to add an event listener to the ServiceWorker. The specific line causing the issue is:

navigator.serviceWorker.addEventListener('message', e => messageEventListener(messaging as MessagingService, e));

Root Cause

The Facebook/Instagram in-app browser on iOS does not support or properly expose the ServiceWorker API, causing navigator.serviceWorker to be undefined. This issue persists even with the latest Angular 19 framework.

Impact

  • Firebase Cloud Messaging service initialization fails
  • Push notifications cannot be registered or received
  • Affects only users accessing the Angular 19 application through Facebook/Instagram in-app browser on iOS devices
google-oss-bot commented

This issue does not seem to follow the issue template. Make sure you provide all the required information.

aaltepet commented

+1 I have the same problem with an ionic app that uses @angular/fire/messaging. When the app is built for ios, starting the native ios app throws the same error.