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

[diegofer25]

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.