fix: Fixing perf and fcm (#2597)

Author: jamesdaniels

sample/angular.json

@@ -23,6 +23,7 @@
               "src/favicon.ico",
               "src/assets",
               "src/manifest.webmanifest",
+              "src/main-sw.js",
               "src/firebase-messaging-sw.js"
             ],
             "styles": [
@@ -120,20 +121,34 @@
             "bundleDependencies": true,
             "externalDependencies": [
               "firebase",
-              "@firebase/app",
               "@firebase/analytics",
+              "@firebase/analytics-types",
               "@firebase/app",
+              "@firebase/app-types",
               "@firebase/auth",
+              "@firebase/auth-interop-types",
+              "@firebase/auth-types",
               "@firebase/component",
               "@firebase/database",
+              "@firebase/database-types",
               "@firebase/firestore",
+              "@firebase/firestore-types",
               "@firebase/functions",
+              "@firebase/functions-types",
               "@firebase/installations",
+              "@firebase/installations-types",
+              "@firebase/logger",
               "@firebase/messaging",
-              "@firebase/storage",
+              "@firebase/messaging-types",
               "@firebase/performance",
+              "@firebase/performance-types",
+              "@firebase/polyfill",
               "@firebase/remote-config",
-              "@firebase/util"
+              "@firebase/remote-config-types",
+              "@firebase/storage",
+              "@firebase/storage-types",
+              "@firebase/util",
+              "@firebase/webchannel-wrapper"
             ]
           },
           "configurations": {

sample/ngcc.config.js

@@ -26,7 +26,7 @@
     "@angular/router": "~10.1.3",
     "@angular/service-worker": "^10.1.3",
     "@nguniversal/express-engine": "~10.1.0",
-    "firebase": "~7.13.2",
+    "firebase": "^7.21.1",
     "first-input-delay": "^0.1.3",
     "proxy-polyfill": "^0.3.2",
     "rxjs": "~6.6.3",

sample/package.json

@@ -1,11 +1,10 @@
 import { Component, OnInit } from '@angular/core';
 import { AngularFireMessaging } from '@angular/fire/messaging';
 import { trace } from '@angular/fire/performance';
-import { Observable, fromEvent } from 'rxjs';
-import { tap, map, filter } from 'rxjs/operators';
-import * as firebase from 'firebase/app';
-import 'firebase/messaging';
+import { Observable } from 'rxjs';
+import { tap } from 'rxjs/operators';
 import { SwPush } from '@angular/service-worker';
+import { environment } from '../../environments/environment';
 
 @Component({
   selector: 'app-messaging',
@@ -25,8 +24,15 @@ export class MessagingComponent implements OnInit {
   message$: Observable<any>;
   showRequest = false;
 
-  constructor(public readonly messaging: AngularFireMessaging, swPush: SwPush) {
-    messaging.usePublicVapidKey('BIDPctnXHQDIjcOXxDS6qQcz-QTws7bL8v7UPgFnS1Ky5BZL3jS3-XXfxwRHmAUMOk7pXme7ttOBvVoIfX57PEo').then(() => {
+  constructor(public readonly messaging: AngularFireMessaging, readonly swpush: SwPush) {
+    swpush.messages.subscribe(it => console.log('swpush', it));
+    messaging.usePublicVapidKey(environment.vapidKey).then(async () => {
+      if (navigator && navigator.serviceWorker) {
+        const registration = await navigator.serviceWorker.getRegistration();
+        if (registration) {
+          await messaging.useServiceWorker(registration);
+        }
+      }
       this.message$ = messaging.messages;
       this.token$ = messaging.tokenChanges.pipe(
         trace('token'),

sample/src/app/messaging/messaging.component.ts

@@ -9,5 +9,6 @@ export const environment = {
     messagingSenderId: '480362569154',
     appId: '1:480362569154:web:2fe6f75104cdfb82f50a5b',
     measurementId: 'G-CBRYER9PJR'
-  }
+  },
+  vapidKey: 'BIDPctnXHQDIjcOXxDS6qQcz-QTws7bL8v7UPgFnS1Ky5BZL3jS3-XXfxwRHmAUMOk7pXme7ttOBvVoIfX57PEo'
 };

sample/src/environments/environment.prod.ts

@@ -13,7 +13,8 @@ export const environment = {
     messagingSenderId: '480362569154',
     appId: '1:480362569154:web:2fe6f75104cdfb82f50a5b',
     measurementId: 'G-CBRYER9PJR'
-  }
+  },
+  vapidKey: 'BIDPctnXHQDIjcOXxDS6qQcz-QTws7bL8v7UPgFnS1Ky5BZL3jS3-XXfxwRHmAUMOk7pXme7ttOBvVoIfX57PEo'
 };
 
 /*

sample/src/environments/environment.ts

@@ -1,5 +1,5 @@
-importScripts('https://www.gstatic.com/firebasejs/7.13.2/firebase-app.js');
-importScripts('https://www.gstatic.com/firebasejs/7.13.2/firebase-messaging.js');
+importScripts('https://www.gstatic.com/firebasejs/7.21.1/firebase-app.js');
+importScripts('https://www.gstatic.com/firebasejs/7.21.1/firebase-messaging.js');
 
 firebase.initializeApp({
     apiKey: 'AIzaSyA7CNE9aHbcSEbt9y03QReJ-Xr0nwKg7Yg',

sample/src/firebase-messaging-sw.js

@@ -0,0 +1,2 @@
+importScripts('/ngsw-worker.js');
+importScripts('/firebase-messaging-sw.js');