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

Open
#3,630 3 comments 0 reactions 0 assignees View on GitHub

Maintainers usually reply within 3 days

Nobody has claimed this yet.

Assessment

Difficulty
3/5
Estimated time
1-2 days
Newbie friendliness
45/100
Issue type
Bug
Clarity
Mostly clear
Activity status
Stale
Tech stack
angular, firebase, typescript
Domain
frontend

Research direction

Start at the messaging-service initialization call shown in the issue and reproduce it in Facebook/Instagram's iOS in-app browser. Trace how navigator.serviceWorker is accessed; done means initialization no longer throws when the API is unavailable, with push behavior verified where supported.

Written by the indexing model from the issue text.

Description

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
Dominant language
TypeScript
Stars
7.8k
Forks
2.1k
Avg merge
2d 22h
Merged PRs (30d)
25

Getting set up

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

More from angular/angularfire

All issues in angular/angularfire

Similar issues

More TypeScript issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.