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

[veneliniliev]

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]

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

[aaltepet]

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

[veneliniliev]

@aaltepet I use this solution: firebase/firebase-js-sdk#8817 (comment)