firebase / firebase/firebase-js-sdk
navigator.serviceWorker not available on iOS in-app browsers.
- 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
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