feat(fcm): Lazy messaging, for compatibility with SSR (#1827)

Author: jamesdaniels

src/core/angularfire2.ts

@@ -35,4 +35,16 @@ export class FirebaseZoneScheduler {
       });
     });
   }
+}
+
+export const runOutsideAngular = (zone: NgZone) => <T>(obs$: Observable<T>): Observable<T> => {
+  return new Observable<T>(subscriber => {
+    return zone.runOutsideAngular(() => {
+      return obs$.subscribe(
+        value => zone.run(() => subscriber.next(value)),
+        error => zone.run(() => subscriber.error(error)),
+        ()    => zone.run(() => subscriber.complete()),
+      );
+    });
+  });
 }

src/messaging/messaging.module.ts

@@ -1,7 +1,5 @@
 import { NgModule } from '@angular/core';
-import { AngularFireModule, FirebaseApp } from 'angularfire2';
 import { AngularFireMessaging } from './messaging';
-import 'firebase/messaging';
 
 @NgModule({
   providers: [ AngularFireMessaging ]

src/messaging/messaging.ts

@@ -1,15 +1,14 @@
 import { Injectable, Inject, Optional, NgZone, PLATFORM_ID } from '@angular/core';
 import { isPlatformBrowser } from '@angular/common';
 import { messaging } from 'firebase';
-import { requestPermission } from './observable/request-permission';
 import { Observable, empty, from, of, throwError } from 'rxjs';
-import { mergeMap, catchError } from 'rxjs/operators';
-import { FirebaseOptions, FirebaseAppConfig } from 'angularfire2';
+import { mergeMap, catchError, map, switchMap, concat, defaultIfEmpty } from 'rxjs/operators';
+import { FirebaseOptions, FirebaseAppConfig, runOutsideAngular } from 'angularfire2';
 import { FirebaseOptionsToken, FirebaseNameOrConfigToken, _firebaseAppFactory, FirebaseZoneScheduler } from 'angularfire2';
 
 @Injectable()
 export class AngularFireMessaging {
-  messaging: messaging.Messaging;
+  messaging: Observable<messaging.Messaging>;
   requestPermission: Observable<void>;
   getToken: Observable<string|null>;
   tokenChanges: Observable<string|null>;
@@ -23,52 +22,58 @@ export class AngularFireMessaging {
     @Inject(PLATFORM_ID) platformId: Object,
     zone: NgZone
   ) {
-    const scheduler = new FirebaseZoneScheduler(zone, platformId);
-    this.messaging = zone.runOutsideAngular(() => {
-      const app = _firebaseAppFactory(options, nameOrConfig);
-      return app.messaging();
-    });
 
     if (isPlatformBrowser(platformId)) {
 
-      this.requestPermission = scheduler.runOutsideAngular(
-        requestPermission(this.messaging)
-      );
-
-      this.getToken = scheduler.runOutsideAngular(
-        from(this.messaging.getToken())
-      );
-
-      this.tokenChanges = scheduler.runOutsideAngular(
-        new Observable(subscriber => {
-          this.messaging.getToken().then(t => subscriber.next(t));
-          this.messaging.onTokenRefresh(subscriber.next);
-        })
-      );
+      const requireMessaging = from(require('firebase/messaging'));
 
-      this.messages = scheduler.runOutsideAngular(
-        new Observable(subscriber => {
-          this.messaging.onMessage(subscriber.next);
-        })
+      this.messaging = requireMessaging.pipe(
+        map(() => _firebaseAppFactory(options, nameOrConfig)),
+        map(app => app.messaging()),
+        runOutsideAngular(zone)
       );
 
-      this.requestToken = this.requestPermission.pipe(
-        catchError(() => of(null)),
-        mergeMap(() => this.tokenChanges),
+      this.requestPermission = this.messaging.pipe(
+        switchMap(messaging => messaging.requestPermission()),
+        runOutsideAngular(zone)
       );
 
     } else {
 
+      this.messaging = empty();
       this.requestPermission = throwError('Not available on server platform.');
-      this.getToken = of(null);
-      this.tokenChanges = of(null);
-      this.messages = empty();
-      this.requestToken = of(null);
 
     }
 
-    this.deleteToken = (token: string) => scheduler.runOutsideAngular(
-      from(this.messaging.deleteToken(token))
+    this.getToken = this.messaging.pipe(
+      switchMap(messaging => messaging.getToken()),
+      defaultIfEmpty(null),
+      runOutsideAngular(zone)
+    );
+
+    const tokenChanges = this.messaging.pipe(
+      switchMap(messaging => new Observable(messaging.onTokenRefresh)),
+      runOutsideAngular(zone)
+    );
+
+    this.tokenChanges = this.getToken.pipe(
+      concat(tokenChanges)
+    );
+
+    this.messages = this.messaging.pipe(
+      switchMap(messaging => new Observable(messaging.onMessage)),
+      runOutsideAngular(zone)
+    );
+
+    this.requestToken = this.requestPermission.pipe(
+      catchError(() => of(null)),
+      mergeMap(() => this.tokenChanges)
+    );
+
+    this.deleteToken = (token: string) => this.messaging.pipe(
+      switchMap(messaging => messaging.deleteToken(token)),
+      defaultIfEmpty(false),
+      runOutsideAngular(zone)
     );
   }
 

src/messaging/observable/request-permission.ts

@@ -1,3 +1,2 @@
-export * from './observable/request-permission';
 export * from './messaging';
 export * from './messaging.module';