feat(messaging): Add Messaging

Author: davideast

src/messaging/messaging.ts

@@ -1,6 +1,6 @@
 import { Inject, Injectable, InjectionToken, NgZone, Optional, PLATFORM_ID } from '@angular/core';
-import firebase from 'firebase/app';
-import { concat, EMPTY, Observable, of, throwError, fromEvent } from 'rxjs';
+import { FirebaseMessaging, getMessaging, getToken, onMessage, deleteToken, MessagePayload } from 'firebase/messaging';
+import { concat, EMPTY, Observable, of, throwError } from 'rxjs';
 import { catchError, defaultIfEmpty, map, mergeMap, observeOn, switchMap, switchMapTo, shareReplay, filter, subscribeOn } from 'rxjs/operators';
 import {
   FIREBASE_APP_NAME,
@@ -20,18 +20,19 @@ import { ɵfetchInstance } from '@angular/fire';
 export const VAPID_KEY = new InjectionToken<string>('angularfire2.messaging.vapid-key');
 export const SERVICE_WORKER = new InjectionToken<Promise<ServiceWorkerRegistration>>('angularfire2.messaging.service-worker-registeration');
 
-// SEMVER(7): drop
-const firebaseLTv8 = parseInt(firebase.SDK_VERSION, 10) < 8;
+export interface AngularFireMessaging extends Omit<ɵPromiseProxy<FirebaseMessaging>, 'deleteToken' | 'getToken' | 'requestPermission'> {
+}
 
-export interface AngularFireMessaging extends Omit<ɵPromiseProxy<firebase.messaging.Messaging>, 'deleteToken' | 'getToken' | 'requestPermission'> {
+function isMessagingSupported() {
+  return 'Notification' in window;
 }
 
 @Injectable({
   providedIn: 'any'
 })
 export class AngularFireMessaging {
 
-  public readonly requestPermission: Observable<void>;
+  public readonly requestPermission: Observable<NotificationPermission>;
   public readonly getToken: Observable<string | null>;
   public readonly tokenChanges: Observable<string | null>;
   public readonly messages: Observable<{}>;
@@ -56,15 +57,9 @@ export class AngularFireMessaging {
       switchMap(() => isPlatformServer(platformId) ? EMPTY : import('firebase/messaging')),
       map(() => ɵfirebaseAppFactory(options, zone, nameOrConfig)),
       switchMap(app => ɵfetchInstance(`${app.name}.messaging`, 'AngularFireMessaging', app, async () => {
-        const messaging = app.messaging();
-        if (firebaseLTv8) {
-          if (vapidKey) {
-            messaging.usePublicVapidKey(vapidKey);
-          }
-          if (serviceWorker) {
-            messaging.useServiceWorker(await serviceWorker);
-          }
-        }
+        const messaging = getMessaging(app);
+        // MARK: Breaking change
+        // Removed: useVapidKey removed?
         return messaging;
       }, [vapidKey, serviceWorker])),
       shareReplay({ bufferSize: 1, refCount: false })
@@ -74,20 +69,16 @@ export class AngularFireMessaging {
       subscribeOn(schedulers.outsideAngular),
       observeOn(schedulers.insideAngular),
       // tslint:disable-next-line
-      switchMap(messaging => firebase.messaging.isSupported() ? messaging.requestPermission() : throwError('Not supported.'))
+      switchMap(messaging => isMessagingSupported() ? Notification.requestPermission() : throwError('Not supported.'))
     );
 
     this.getToken = messaging.pipe(
       subscribeOn(schedulers.outsideAngular),
       observeOn(schedulers.insideAngular),
       switchMap(async messaging => {
-        if (firebase.messaging.isSupported() && Notification.permission === 'granted') {
-          if (firebaseLTv8) {
-            return await messaging.getToken();
-          } else {
-            const serviceWorkerRegistration = serviceWorker ? await serviceWorker : null;
-            return await messaging.getToken({ vapidKey, serviceWorkerRegistration });
-          }
+        if (isMessagingSupported() && Notification.permission === 'granted') {
+          const serviceWorkerRegistration = serviceWorker ? await serviceWorker : null;
+          return await getToken({ vapidKey, serviceWorkerRegistration });
         } else {
           return null;
         }
@@ -110,15 +101,15 @@ export class AngularFireMessaging {
     this.tokenChanges = messaging.pipe(
       subscribeOn(schedulers.outsideAngular),
       observeOn(schedulers.insideAngular),
-      switchMap(() => firebase.messaging.isSupported() ? concat(this.getToken, tokenChange$) : EMPTY)
+      switchMap(() => isMessagingSupported() ? concat(this.getToken, tokenChange$) : EMPTY)
     );
 
 
     this.messages = messaging.pipe(
       subscribeOn(schedulers.outsideAngular),
       observeOn(schedulers.insideAngular),
-      switchMap(messaging => firebase.messaging.isSupported() ? new Observable<string>(emitter =>
-        messaging.onMessage(next => emitter.next(next), err => emitter.error(err), () => emitter.complete())
+      switchMap(messaging => isMessagingSupported() ? new Observable<MessagePayload>(subscriber =>
+        onMessage(messaging, subscriber)
       ) : EMPTY),
     );
 
@@ -131,10 +122,12 @@ export class AngularFireMessaging {
     );
 
     // SEMVER(7): drop token
+    // MARK: Breaking change
+    // previous: this.deleteToken = (token?: string) => messaging.pipe(
     this.deleteToken = (token?: string) => messaging.pipe(
       subscribeOn(schedulers.outsideAngular),
       observeOn(schedulers.insideAngular),
-      switchMap(messaging => messaging.deleteToken(token || undefined)),
+      switchMap(messaging => deleteToken(messaging)),
       defaultIfEmpty(false)
     );