FCM sample app

angular · jamesdaniels · Aug 25, 2021 · Aug 20, 2021 · Aug 24, 2021 · Aug 24, 2021
commit 64e297e5e30d5d7d48deb20f29580ae6bba1b95c
diff --git a/sample/angular.json b/sample/angular.json
@@ -29,9 +29,12 @@
             "main": "src/main.ts",
             "polyfills": "src/polyfills.ts",
             "tsConfig": "tsconfig.app.json",
+            "statsJson": true,
             "assets": [
               "src/favicon.ico",
-              "src/assets"
+              "src/assets",
+              "src/firebase-messaging-sw.js",
+              "src/manifest.webmanifest"
             ],
             "styles": [
               "src/styles.css"
@@ -41,16 +44,18 @@
             "extractLicenses": false,
             "buildOptimizer": false,
             "sourceMap": true,
-            "optimization": false,
-            "namedChunks": true
+            "optimization": true,
+            "namedChunks": true,
+            "serviceWorker": true,
+            "ngswConfigPath": "ngsw-config.json"
           },
           "configurations": {
             "production": {
               "budgets": [
                 {
                   "type": "initial",
                   "maximumWarning": "500kb",
-                  "maximumError": "1mb"
+                  "maximumError": "5mb"
                 },
                 {
                   "type": "anyComponentStyle",
@@ -104,7 +109,9 @@
             "karmaConfig": "karma.conf.js",
             "assets": [
               "src/favicon.ico",
-              "src/assets"
+              "src/assets",
+              "src/firebase-messaging-sw.js",
+              "src/manifest.webmanifest"
             ],
             "styles": [
               "src/styles.css"

diff --git a/sample/ngsw-config.json b/sample/ngsw-config.json
@@ -0,0 +1,30 @@
+{
+  "$schema": "./node_modules/@angular/service-worker/config/schema.json",
+  "index": "/index.html",
+  "assetGroups": [
+    {
+      "name": "app",
+      "installMode": "prefetch",
+      "resources": {
+        "files": [
+          "/favicon.ico",
+          "/index.html",
+          "/manifest.webmanifest",
+          "/*.css",
+          "/*.js"
+        ]
+      }
+    },
+    {
+      "name": "assets",
+      "installMode": "lazy",
+      "updateMode": "prefetch",
+      "resources": {
+        "files": [
+          "/assets/**",
+          "/*.(eot|svg|cur|jpg|png|webp|gif|otf|ttf|woff|woff2|ani)"
+        ]
+      }
+    }
+  ]
+}
diff --git a/sample/package.json b/sample/package.json
@@ -27,6 +27,7 @@
     "@angular/platform-browser-dynamic": "^12.0.0",
     "@angular/platform-server": "^12.0.0",
     "@angular/router": "^12.0.0",
+    "@angular/service-worker": "^12.0.0",
     "@nguniversal/express-engine": "12.1.0",
     "cross-fetch": "^3.1.4",
     "express": "^4.15.2",

diff --git a/sample/src/app/app.browser.module.ts b/sample/src/app/app.browser.module.ts
@@ -7,6 +7,8 @@ import { getFunctions, provideFunctions } from '@angular/fire/functions';
 
 import { AppModule } from './app.module';
 import { AppComponent } from './app.component';
+import { ServiceWorkerModule } from '@angular/service-worker';
+import { environment } from '../environments/environment';
 
 @NgModule({
   imports: [
@@ -16,6 +18,10 @@ import { AppComponent } from './app.component';
     provideMessaging(() => getMessaging()),
     providePerformance(() => getPerformance()),
     provideFunctions(() => getFunctions()),
+    ServiceWorkerModule.register('ngsw-worker.js', {
+      enabled: environment.production,
+      registrationStrategy: 'registerWhenStable:30000'
+    }),
   ],
   bootstrap: [AppComponent],
 })

diff --git a/sample/src/app/app.component.ts b/sample/src/app/app.component.ts
@@ -6,12 +6,16 @@ import { Firestore, FirestoreInstances, getDoc, doc, DocumentSnapshot } from '@a
 import { DocumentData } from 'rxfire/firestore/lite/interfaces';
 import { distinctUntilChanged } from 'rxjs/operators';
 import { Storage, StorageInstances } from '@angular/fire/storage';
-import { Messaging, MessagingInstances } from '@angular/fire/messaging';
+import { Messaging, MessagingInstances, onMessage } from '@angular/fire/messaging';
 import { RemoteConfig, RemoteConfigInstances } from '@angular/fire/remote-config';
 import { Functions, FunctionsInstances } from '@angular/fire/functions';
 import { Database, DatabaseInstances } from '@angular/fire/database';
 import { Analytics, AnalyticsInstances } from '@angular/fire/analytics';
 import { Performance, PerformanceInstances } from '@angular/fire/performance';
+import { getToken } from 'firebase/messaging';
+import { SwPush, ServiceWorkerModule } from '@angular/service-worker';
+
+import { environment } from '../environments/environment';
 
 @Component({
   selector: 'app-root',
@@ -48,6 +52,8 @@ export class AppComponent {
     @Optional() performance: Performance,
     @Optional() performanceInstances: PerformanceInstances,
     appRef: ApplicationRef,
+    swPush: SwPush,
+    @Optional() serviceWorkerModule: ServiceWorkerModule,
   ) {
     console.log({
       app, auth, apps, authInstances, firestore, firestoreInstances,
@@ -59,6 +65,12 @@ export class AppComponent {
     authState(auth).subscribe(it => console.log('authState', it));
     appRef.isStable.pipe(distinctUntilChanged()).subscribe(it => console.log('isStable', it));
     this.myDocData = getDoc(doc(firestore, 'animals/NJdGQCv1P92SWsp4nSE7'));
-    this.myDocData.then(it => console.log(it.data()));
+    navigator.serviceWorker.register('firebase-messaging-sw.js', { type: 'module' }).then(serviceWorkerRegistration => {
+      getToken(messaging, {
+        serviceWorkerRegistration,
+        vapidKey: environment.vapidKey,
+      }).then(it => console.log(it));
+    });
+    onMessage(messaging, it => console.log('onMessage', it));
   }
 }
diff --git a/sample/src/assets/icons/icon-128x128.png b/sample/src/assets/icons/icon-128x128.png
diff --git a/sample/src/assets/icons/icon-144x144.png b/sample/src/assets/icons/icon-144x144.png
diff --git a/sample/src/assets/icons/icon-152x152.png b/sample/src/assets/icons/icon-152x152.png
diff --git a/sample/src/assets/icons/icon-192x192.png b/sample/src/assets/icons/icon-192x192.png
diff --git a/sample/src/assets/icons/icon-384x384.png b/sample/src/assets/icons/icon-384x384.png
diff --git a/sample/src/assets/icons/icon-512x512.png b/sample/src/assets/icons/icon-512x512.png
diff --git a/sample/src/assets/icons/icon-72x72.png b/sample/src/assets/icons/icon-72x72.png
diff --git a/sample/src/assets/icons/icon-96x96.png b/sample/src/assets/icons/icon-96x96.png
diff --git a/sample/src/firebase-messaging-sw.js b/sample/src/firebase-messaging-sw.js
@@ -0,0 +1,19 @@
+import { initializeApp } from 'https://www.gstatic.com/firebasejs/9.0.0-beta.8/firebase-app.js';
+import { getMessaging, onBackgroundMessage } from 'https://www.gstatic.com/firebasejs/9.0.0-beta.8/firebase-messaging-sw.js';
+
+const app = initializeApp({
+  apiKey: 'AIzaSyA7CNE9aHbcSEbt9y03QReJ-Xr0nwKg7Yg',
+  authDomain: 'aftest-94085.firebaseapp.com',
+  databaseURL: 'https://aftest-94085.firebaseio.com',
+  projectId: 'aftest-94085',
+  storageBucket: 'aftest-94085.appspot.com',
+  messagingSenderId: '480362569154',
+  appId: '1:480362569154:web:2fe6f75104cdfb82f50a5b',
+  measurementId: 'G-CBRYER9PJR'
+});
+
+const messaging = getMessaging(app);
+
+onBackgroundMessage(messaging, ({ notification: { title, body, image } }) => {
+  self.registration.showNotification(title, { body, icon: image || '/assets/icons/icon-72x72.png' });
+});
diff --git a/sample/src/index.html b/sample/src/index.html
@@ -6,8 +6,11 @@
   <base href="/">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="icon" type="image/x-icon" href="favicon.ico">
+  <link rel="manifest" href="manifest.webmanifest">
+  <meta name="theme-color" content="#1976d2">
 </head>
 <body>
   <app-root></app-root>
+  <noscript>Please enable JavaScript to continue using this application.</noscript>
 </body>
 </html>
diff --git a/sample/src/manifest.webmanifest b/sample/src/manifest.webmanifest
@@ -0,0 +1,59 @@
+{
+  "name": "sample",
+  "short_name": "sample",
+  "theme_color": "#1976d2",
+  "background_color": "#fafafa",
+  "display": "standalone",
+  "scope": "./",
+  "start_url": "./",
+  "icons": [
+    {
+      "src": "assets/icons/icon-72x72.png",
+      "sizes": "72x72",
+      "type": "image/png",
+      "purpose": "maskable any"
+    },
+    {
+      "src": "assets/icons/icon-96x96.png",
+      "sizes": "96x96",
+      "type": "image/png",
+      "purpose": "maskable any"
+    },
+    {
+      "src": "assets/icons/icon-128x128.png",
+      "sizes": "128x128",
+      "type": "image/png",
+      "purpose": "maskable any"
+    },
+    {
+      "src": "assets/icons/icon-144x144.png",
+      "sizes": "144x144",
+      "type": "image/png",
+      "purpose": "maskable any"
+    },
+    {
+      "src": "assets/icons/icon-152x152.png",
+      "sizes": "152x152",
+      "type": "image/png",
+      "purpose": "maskable any"
+    },
+    {
+      "src": "assets/icons/icon-192x192.png",
+      "sizes": "192x192",
+      "type": "image/png",
+      "purpose": "maskable any"
+    },
+    {
+      "src": "assets/icons/icon-384x384.png",
+      "sizes": "384x384",
+      "type": "image/png",
+      "purpose": "maskable any"
+    },
+    {
+      "src": "assets/icons/icon-512x512.png",
+      "sizes": "512x512",
+      "type": "image/png",
+      "purpose": "maskable any"
+    }
+  ]
+}
diff --git a/sample/yarn.lock b/sample/yarn.lock
@@ -290,6 +290,13 @@
   dependencies:
     tslib "^2.2.0"
 
+"@angular/service-worker@^12.0.0":
+  version "12.2.2"
+  resolved "https://registry.yarnpkg.com/@angular/service-worker/-/service-worker-12.2.2.tgz#5c1b5e49033925eb04a5edb308a1ce69b175ad8c"
+  integrity sha512-WW9Y4PKtJeJNtkoBRsmRiY2w8VtWh91pHmw83M/2/t+1h2sBk1LbDAE1X2AzuUDKFH+XTCjYIopcsRXFARcOiQ==
+  dependencies:
+    tslib "^2.2.0"
+
 "@apidevtools/json-schema-ref-parser@^9.0.3":
   version "9.0.9"
   resolved "https://registry.yarnpkg.com/@apidevtools/json-schema-ref-parser/-/json-schema-ref-parser-9.0.9.tgz#d720f9256e3609621280584f2b47ae165359268b"