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

[veneliniliev]

Operating System

iOS (all versions)

Environment (if applicable)

Facebook/Instagram in-app browser on iOS

Firebase SDK Version

11.4.0 (latest)

Firebase SDK Product(s)

Messaging

Project Tooling

• Angular 19.1.4
• @angular/fire: latest
• firebase: latest

Detailed Problem Description

When initializing Firebase Cloud Messaging in an Angular SSR application, multiple critical issues occur:

1. ServiceWorker Registration Failure:
   The service worker registration fails specifically in the Facebook/Instagram in-app browser on iOS with the error:

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

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

2. Hydration Failure:

• The application fails during the hydration process
• Client-side JavaScript doesn't properly initialize
• The pre-rendered SSR content remains static
• Interactive elements become non-functional

3. Application Loading Issues:

• Application doesn't fully load
• Components remain in their server-rendered state
• Dynamic functionality is completely broken
• Router navigation may not work
• User interactions are not processed

The issue only occurs in the Facebook/Instagram in-app browser on iOS. Regular Safari and other mobile browsers work as expected.

Steps and code to reproduce issue

1. Create an Angular 19 SSR application with Firebase Messaging integration
2. Initialize Firebase Messaging
3. Deploy the application
4. Access the application through Facebook/Instagram in-app browser on iOS

[google-oss-bot]

I couldn't figure out how to label this issue, so I've labeled it for a human to triage. Hang tight.

[veneliniliev]

Just tested without SSR - same error occurs. ServiceWorker registration fails in Facebook/Instagram in-app browser on iOS, causing the app to break. This suggests the issue is with in-app browser's ServiceWorker API support rather than SSR implementation.

[DellaBitta]

Hi @veneliniliev,

For clarification, is the invocation of navigator.serviceWorker.addEventListener failing or is it the code placed inside the event listener that causes the failure? addEventListener is a function implemented by the browser. If invoking it fails then it appears that the Facebook in-app browser doesn't support service workers.

It's a best practice to gate your service worker registration by calling the isSupported() method in provided by the Messaging SDK, if you're not already. It checks for the elements of the browser that Messaging would require, including if the browser supports service workers.

import { isSupported } from "firebase/messaging";

if(isSupported()) {
  // configure & use messaging
}

I hope this helps!

[veneliniliev]

@DellaBitta thanks, this solution works.