Angular PWA Course

Author: jhades

src/app/app.component.ts

@@ -1,6 +1,7 @@
 import {Component, OnInit} from '@angular/core';
 import {Observable} from "rxjs/Observable";
 import {SwUpdate} from "@angular/service-worker";
+import {MatSnackBar} from "@angular/material/snack-bar";
 
 @Component({
   selector: 'app-root',
@@ -10,14 +11,24 @@ import {SwUpdate} from "@angular/service-worker";
 export class AppComponent  implements OnInit {
 
 
-    constructor(private swUpdate:SwUpdate) {
+    constructor(private swUpdate:SwUpdate, private snackBar: MatSnackBar) {
 
     }
 
     ngOnInit() {
 
         this.swUpdate.checkForUpdate();
 
+        this.swUpdate.available.subscribe(() => {
+
+            console.log("New Version available...");
+
+            const snackRef = this.snackBar.open("New Version Available!", "Click To Use New Version");
+
+            snackRef.onAction().subscribe(() => window.location.reload());
+
+        });
+
     }
 
 

src/app/app.module.ts

@@ -13,6 +13,7 @@ import {Router, RouterModule} from "@angular/router";
 
 import {environment} from '../environments/environment.prod';
 import {ServiceWorkerModule} from '@angular/service-worker';
+import {MatSnackBarModule} from '@angular/material/snack-bar';
 
 import 'rxjs/add/operator/switchMap';
 import 'rxjs/add/operator/map';
@@ -22,6 +23,7 @@ import 'rxjs/add/operator/filter';
 import 'rxjs/add/operator/catch';
 import 'rxjs/add/operator/first';
 import 'rxjs/add/observable/of';
+import {BrowserAnimationsModule} from "@angular/platform-browser/animations";
 
 
 
@@ -34,7 +36,9 @@ import 'rxjs/add/observable/of';
     imports: [
         BrowserModule,
         HttpClientModule,
+        BrowserAnimationsModule,
         RouterModule.forRoot(routesConfig),
+        MatSnackBarModule,
         ReactiveFormsModule,
         ServiceWorkerModule.register('/ngsw-worker.js', { enabled: environment.production })
     ],

src/app/lessons/lessons.component.html

@@ -1,13 +1,11 @@
 
 <div class="lessons-list-container v-h-center-block-parent" >
 
-
-
     <div class="buttons">
         <button class="button button-danger" (click)="loadLessons()">Reload Lessons</button>
     </div>
 
-    <h2>All Lessons - V7</h2>
+    <h2>All Lessons - V15</h2>
 
     <table class="table lessons-list card card-strong">
         <tbody>

src/styles.css

@@ -1 +1,7 @@
 /* You can add global styles to this file, and also import other style files */
+
+
+
+@import "~@angular/material/prebuilt-themes/indigo-pink.css";
+
+