firebase / firebase/firebase-js-sdk

navigator.serviceWorker not available on iOS in-app browsers.

Open
#7,535 0 comments 0 reactions 0 assignees View on GitHub
api: messaging needs-attention question stack:Vue
Dominant language
TypeScript
Stars
5.1k
Forks
1k
Avg merge
2d 21h
Merged PRs (30d)
37

Description

### Operating System

iOS 16.0

### Browser Version

in app browser, i can't see the version, browser that open when click a link on instagram for example.

### Firebase SDK Version

^9.22.2

### Firebase SDK Product:

Messaging

### Describe your project's tooling

Vue 3 app with Vite and Quasar in PWA mode

### Describe the problem

## The issue
When I import the `firebase/messaging` it executes the method `registerMessagingInWindow()` globally in the `packages/messaging/src/index.ts#45` and it's a problem because the `navigator.serviceWorker` don't exists in the in-app browser of iOS braking all the page.

## Workaround solution:
I'm importing dynamically the `firebase/messaging` like

```
export async function getToken (opt: { vapidKey: string }) {
const messagingModule = await import('firebase/messaging');
const messaging = messagingModule.getMessaging(app);

return messagingModule.getToken(messaging, { vapidKey: opt.vapidKey });
}
```

And I'm checking if the browser is in-app browser with:
```
const ua = navigator.userAgent || navigator.vendor || window.opera || '';
const inAppBrowser = /instagram|fbav|twitter|GSA|tiktok/i.test(ua);

if (inAppBrowser) {
return;
}
```

if it's an in-app browser i don't want to handle messaging cuz they don't should do it.

### Steps and code to reproduce issue

Just create any project with Webpack or Vite and import `firebase/messaging` in any place of your code statically and try to open this page in the iOS 16 in-app browser like Instagram or Google.

Contributor guide

Open the contributing guide

Research direction

Start at packages/messaging/src/index.ts#45 and reproduce the static-import failure in an iOS 16 in-app browser using a Vite or Webpack app. Done means importing firebase/messaging no longer breaks the page when navigator.serviceWorker is unavailable, while supported browsers retain messaging behavior.

Written by the indexing model from the issue text.

Assessment

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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.