Register 2 components one for sw and one for client

Author: zwu52

packages-exp/messaging-compat/src/messaging-compat.ts

@@ -24,11 +24,12 @@ import {
   MessagePayload,
   deleteToken,
   getToken,
-  onBackgroundMessage,
   onMessage
 } from '@firebase/messaging-exp';
 import { NextFn, Observer, Unsubscribe } from '@firebase/util';
 
+import { onBackgroundMessage } from '@firebase/messaging-exp/sw';
+
 export interface MessagingCompat {
   getToken(options?: {
     vapidKey?: string;

packages-exp/messaging-exp/src/api.ts

@@ -37,10 +37,28 @@ import { onMessage as _onMessage } from './api/onMessage';
  *
  * @public
  */
-export function getMessaging(app: FirebaseApp = getApp()): FirebaseMessaging {
+export function getMessagingInWindow(
+  app: FirebaseApp = getApp()
+): FirebaseMessaging {
   return _getProvider(getModularInstance(app), 'messaging-exp').getImmediate();
 }
 
+/**
+ * Retrieves a Firebase Cloud Messaging instance.
+ *
+ * @returns The Firebase Cloud Messaging instance associated with the provided firebase app.
+ *
+ * @public
+ */
+export function getMessagingInSw(
+  app: FirebaseApp = getApp()
+): FirebaseMessaging {
+  return _getProvider(
+    getModularInstance(app),
+    'messaging-sw-exp'
+  ).getImmediate();
+}
+
 /**
  * Subscribes the `FirebaseMessaging` instance to push notifications. Returns an Firebase Cloud
  * Messaging registration token that can be used to send push messages to that `FirebaseMessaging`

packages-exp/messaging-exp/src/helpers/register.ts

@@ -29,7 +29,6 @@ import {
   onSubChange
 } from '../listeners/sw-listeners';
 
-import { FirebaseMessaging } from '../interfaces/public-types';
 import { MessagingService } from '../messaging-service';
 import { ServiceWorkerGlobalScope } from '../util/sw-types';
 import { _registerComponent } from '@firebase/app-exp';
@@ -58,11 +57,14 @@ const WindowMessagingFactory: InstanceFactory<'messaging-exp'> = (
     container.getProvider('analytics-internal')
   );
 
-  registerListeners(messaging);
+  navigator.serviceWorker.addEventListener('message', e =>
+    messageEventListener(messaging as MessagingService, e)
+  );
 
   return messaging;
 };
 
+declare const self: ServiceWorkerGlobalScope;
 const SwMessagingFactory: InstanceFactory<'messaging-exp'> = (
   container: ComponentContainer
 ) => {
@@ -86,7 +88,15 @@ const SwMessagingFactory: InstanceFactory<'messaging-exp'> = (
     container.getProvider('analytics-internal')
   );
 
-  registerListeners(messaging);
+  self.addEventListener('push', e => {
+    e.waitUntil(onPush(e, messaging as MessagingService));
+  });
+  self.addEventListener('pushsubscriptionchange', e => {
+    e.waitUntil(onSubChange(e, messaging as MessagingService));
+  });
+  self.addEventListener('notificationclick', e => {
+    e.waitUntil(onNotificationClick(e));
+  });
 
   return messaging;
 };
@@ -97,29 +107,13 @@ export function registerMessagingInWindow(): void {
   );
 }
 
+/**
+ * The messaging instance registered in sw is named differently than that of in client. This is
+ * because both `registerMessagingInWindow` and `registerMessagingInSw` would be called in
+ * `messaging-compat` and component with the same name can only be registered once.
+ */
 export function registerMessagingInSw(): void {
   _registerComponent(
-    new Component('messaging-exp', SwMessagingFactory, ComponentType.PUBLIC)
+    new Component('messaging-sw-exp', SwMessagingFactory, ComponentType.PUBLIC)
   );
 }
-
-declare const self: ServiceWorkerGlobalScope;
-function registerListeners(messaging: FirebaseMessaging): void {
-  if (!!navigator) {
-    // in window
-    navigator.serviceWorker.addEventListener('message', e =>
-      messageEventListener(messaging as MessagingService, e)
-    );
-  } else {
-    // in sw
-    self.addEventListener('push', e => {
-      e.waitUntil(onPush(e, messaging as MessagingService));
-    });
-    self.addEventListener('pushsubscriptionchange', e => {
-      e.waitUntil(onSubChange(e, messaging as MessagingService));
-    });
-    self.addEventListener('notificationclick', e => {
-      e.waitUntil(onNotificationClick(e));
-    });
-  }
-}

packages-exp/messaging-exp/src/index.sw.ts

@@ -20,12 +20,12 @@ import '@firebase/installations-exp';
 import { FirebaseMessaging } from './interfaces/public-types';
 import { registerMessagingInSw } from './helpers/register';
 
-export { onBackgroundMessage, getMessaging } from './api';
+export { onBackgroundMessage, getMessagingInSw as getMessaging } from './api';
 export { isSwSupported as isSupported } from './api/isSupported';
 
 declare module '@firebase/component' {
   interface NameServiceMapping {
-    'messaging-exp': FirebaseMessaging;
+    'messaging-sw-exp': FirebaseMessaging;
   }
 }
 

packages-exp/messaging-exp/src/index.ts

@@ -30,7 +30,7 @@ export {
   getToken,
   deleteToken,
   onMessage,
-  getMessaging,
+  getMessagingInWindow as getMessaging,
   onBackgroundMessage
 } from './api';
 export { isWindowSupported as isSupported } from './api/isSupported';