Angular PWA Course

Author: jhades

gen-vapid-keys.js

@@ -0,0 +1,32 @@
+
+
+console.log("Generating VAPID keys ...");
+
+
+const webpush = require('web-push');
+
+
+// VAPID keys should only be generated only once.
+const vapidKeys = webpush.generateVAPIDKeys();
+
+
+console.log("VAPID Public Key: ", vapidKeys.publicKey);
+
+
+console.log("VAPID Private Key: ", vapidKeys.privateKey);
+
+
+
+/*
+
+    VAPID key pair:  Voluntary Application Server Identification
+
+    publicKey: "BIvC8I6yoFc-DZNgFTANsy9cae80mjWzTym7aB5zY45vBVZQK9VureFHvoh5ijW8EKG2I-g1YaN5rcKe_5AYrvM",
+
+    privateKey: "Xox-dZU4rnLLkRlE5EzblVUrI3LbYj3a719F0a87UWI"
+
+*/
+
+
+
+

package.json

@@ -8,6 +8,7 @@
     "server": "./node_modules/.bin/ts-node ./server/server.ts",
     "build": "ng build",
     "start:prod": "ng build --prod && cd dist && http-server -c-1 -P http://localhost:9000 .",
+    "gen-vapid-keys": "node ./gen-vapid-keys.js",
     "test": "ng test",
     "lint": "ng lint",
     "e2e": "ng e2e"
@@ -22,20 +23,21 @@
     "@angular/http": "^5.1.2",
     "@angular/platform-browser": "^5.1.2",
     "@angular/platform-browser-dynamic": "^5.1.2",
+    "@angular/platform-server": "^5.1.2",
     "@angular/router": "^5.1.2",
     "@angular/service-worker": "^5.1.2",
-    "core-js": "^2.4.1",
-    "rxjs": "^5.5.2",
-    "zone.js": "^0.8.14",
     "@types/express": "^4.0.36",
     "@types/lodash": "^4.14.70",
     "body-parser": "^1.17.2",
     "command-line-args": "^4.0.6",
     "cookie-parser": "^1.4.3",
+    "core-js": "^2.4.1",
     "http-server": "^0.10.0",
     "moment": "^2.18.1",
     "nodemon": "^1.11.0",
-    "@angular/platform-server": "^5.1.2"
+    "rxjs": "^5.5.2",
+    "web-push": "^3.2.5",
+    "zone.js": "^0.8.14"
   },
   "devDependencies": {
     "@angular/cli": "^1.6.0",

server/add-push-subscriber.route.ts

@@ -0,0 +1,16 @@
+
+
+
+import {USER_SUBSCRIPTIONS} from "./in-memory-db";
+
+export function addPushSubscriber(req, res) {
+
+    const sub = req.body;
+
+    console.log('Received Subscription on the server: ', sub);
+
+    USER_SUBSCRIPTIONS.push(sub);
+
+    res.status(200).json({message: "Subscription added successfully."});
+}
+

server/in-memory-db.ts

@@ -0,0 +1,5 @@
+
+
+
+export let USER_SUBSCRIPTIONS = [];
+

server/send-newsletter.route.ts

@@ -0,0 +1,18 @@
+
+import {USER_SUBSCRIPTIONS} from "./in-memory-db";
+
+const webpush = require('web-push');
+
+
+export function sendNewsletter(req, res) {
+
+    console.log('All Newsletter subscriptions', JSON.stringify(USER_SUBSCRIPTIONS));
+
+    Promise.all(USER_SUBSCRIPTIONS.map(sub => webpush.sendNotification(sub, 'Newsletter Available ...')))
+        .then(() => res.sendStatus(200))
+        .catch(err => {
+            console.error("Error sending notification, reason: ", err);
+            res.sendStatus(500);
+        });
+}
+

server/server.ts

@@ -2,8 +2,22 @@
 import * as express from 'express';
 import {Application} from "express";
 import {readAllLessons} from "./read-all-lessons.route";
+import {addPushSubscriber} from "./add-push-subscriber.route";
+import {sendNewsletter} from "./send-newsletter.route";
 const bodyParser = require('body-parser');
 
+const webpush = require('web-push');
+
+const vapidKeys = {
+    publicKey: "BIvC8I6yoFc-DZNgFTANsy9cae80mjWzTym7aB5zY45vBVZQK9VureFHvoh5ijW8EKG2I-g1YaN5rcKe_5AYrvM",
+    privateKey: "Xox-dZU4rnLLkRlE5EzblVUrI3LbYj3a719F0a87UWI"
+};
+
+webpush.setVapidDetails(
+    'mailto:example@yourdomain.org',
+    vapidKeys.publicKey,
+    vapidKeys.privateKey
+);
 
 
 const app: Application = express();
@@ -16,6 +30,13 @@ app.use(bodyParser.json());
 app.route('/api/lessons')
     .get(readAllLessons);
 
+app.route('/api/notifications')
+    .post(addPushSubscriber);
+
+app.route('/api/newsletter')
+    .post(sendNewsletter);
+
+
 
 // launch an HTTP Server
 const httpServer = app.listen(9000, () => {

src/app/app.module.ts

@@ -21,6 +21,7 @@ import 'rxjs/add/operator/first';
 import 'rxjs/add/observable/of';
 import {BrowserAnimationsModule} from "@angular/platform-browser/animations";
 import {AppRoutingModule} from "./app-routing.module";
+import {NewsletterService} from "./services/newsletter.service";
 
 
 
@@ -36,11 +37,12 @@ import {AppRoutingModule} from "./app-routing.module";
         BrowserAnimationsModule,
         AppRoutingModule,
         ReactiveFormsModule,
-        ServiceWorkerModule.register('/ngsw-worker.js', { enabled: environment.production })
+        ServiceWorkerModule.register('/ngsw-worker.js', { enabled: environment.production }),
 
     ],
     providers: [
-        LessonsService
+        LessonsService,
+        NewsletterService
     ],
     bootstrap: [AppComponent]
 })

src/app/lessons/lessons.component.html

@@ -2,7 +2,11 @@
 <div class="lessons-list-container v-h-center-block-parent" >
 
     <div class="buttons">
-        <button class="button button-danger" (click)="loadLessons()">Reload Lessons</button>
+
+        <button class="button button-primary" (click)="subscribeToNotifications()">Subscribe</button>
+
+        <button class="button button-danger" (click)="sendNewsletter()">Send</button>
+
     </div>
 
     <h2>All Lessons - V8</h2>

src/app/lessons/lessons.component.ts

@@ -2,6 +2,8 @@ import {Component, OnInit} from '@angular/core';
 import {LessonsService} from "../services/lessons.service";
 import {Observable} from "rxjs/Observable";
 import {Lesson} from "../model/lesson";
+import {SwPush} from "@angular/service-worker";
+import {NewsletterService} from "../services/newsletter.service";
 
 @Component({
     selector: 'lessons',
@@ -13,7 +15,12 @@ export class LessonsComponent implements OnInit {
     lessons$: Observable<Lesson[]>;
     isLoggedIn$: Observable<boolean>;
 
-    constructor(private lessonsService: LessonsService) {
+    readonly VAPID_PUBLIC_KEY = "BIvC8I6yoFc-DZNgFTANsy9cae80mjWzTym7aB5zY45vBVZQK9VureFHvoh5ijW8EKG2I-g1YaN5rcKe_5AYrvM";
+
+    constructor(
+        private lessonsService: LessonsService,
+        private swPush: SwPush,
+        private newsletterService: NewsletterService) {
 
     }
 
@@ -26,4 +33,38 @@ export class LessonsComponent implements OnInit {
         this.lessons$ = this.lessonsService.loadAllLessons().catch(err => Observable.of([]));
     }
 
+    subscribeToNotifications() {
+
+        this.swPush.requestSubscription({
+            serverPublicKey: this.VAPID_PUBLIC_KEY
+        })
+        .then(sub => {
+
+            console.log("Notification Subscription: ", sub);
+
+            // Passing subscription object to our backend
+            this.newsletterService.addPushSubscriber(sub)
+                .subscribe(
+                    () => console.log('Sent push subscription object to server: '),
+                    err =>  console.log('Could not send subscription object to server, reason: ', err)
+                );
+        })
+        .catch(err => console.error("Could not subscribe to notifications", err));
+
+    }
+
+
+    sendNewsletter() {
+
+        console.log("Sending Newsletter to all Subscribers ...");
+
+        this.newsletterService.send().subscribe();
+
+
+    }
+
+
+
+
+
 }

src/app/services/newsletter.service.ts

@@ -0,0 +1,25 @@
+
+
+import {Injectable} from "@angular/core";
+import {HttpClient} from "@angular/common/http";
+
+
+
+@Injectable()
+export class NewsletterService {
+
+    constructor(private http: HttpClient) {
+
+    }
+
+    addPushSubscriber(sub:any) {
+        return this.http.post('/api/notifications', sub);
+    }
+
+    send() {
+        return this.http.post('/api/newsletter', null);
+    }
+
+}
+
+