Notification & Service Worker Update (#13)

* changed service worker to use the one that comes with angular

* added notificaiton service, and added delete confirmation on edit screen

* modified notifications so caller can delete them

* Any outstanding messages will be destroyed on component change

* made gtag https

* Service worker now will ask if you want to update

.angular-cli.json

@@ -11,7 +11,7 @@
         "assets",
         "favicon.ico",
         "robots.txt",
-        "service-worker.js"
+        "gtag.js"
       ],
       "index": "index.html",
       "main": "main.ts",
@@ -20,6 +20,7 @@
       "tsconfig": "tsconfig.app.json",
       "testTsconfig": "tsconfig.spec.json",
       "prefix": "tt",
+      "serviceWorker": true,
       "styles": [
         "styles.scss"
       ],
@@ -57,6 +58,7 @@
   },
   "defaults": {
     "styleExt": "scss",
-    "component": {}
+    "component": {
+    }
   }
 }

firebase.json

@@ -11,6 +11,27 @@
         "source": "**",
         "destination": "/index.html"
       }
+    ],
+    "headers": [
+      {
+        "source": "**/nsgw.json",
+        "headers": [
+          {
+            "key": "Cache-Control",
+            "value": "max-age=0"
+          }
+        ]
+      },
+      {
+        "source": "**/ngsw-worker.js",
+        "headers": [
+          {
+            "key": "Cache-Control",
+            "value": "max-age=0"
+          }
+        ]
+      }
+
     ]
   }
-}
+}

package.json

@@ -10,7 +10,7 @@
     "lint": "ng lint",
     "e2e": "ng e2e",
     "sw": "sw-precache --root=dist --config=sw-precache-config.js",
-    "deploy": "ng build --prod & firebase deploy -P dev",
+    "deploy": "ng build --prod && firebase deploy -P dev",
     "deploy-prod": "npm run build & firebase deploy -P default"
   },
   "private": true,
@@ -24,6 +24,7 @@
     "@angular/platform-browser": "^5.2.0",
     "@angular/platform-browser-dynamic": "^5.2.0",
     "@angular/router": "^5.2.0",
+    "@angular/service-worker": "^5.2.1",
     "bootstrap": "^4.0.0",
     "core-js": "^2.4.1",
     "font-awesome": "^4.7.0",

src/app/_classes/notification.ts

@@ -0,0 +1,13 @@
+import { Subject } from 'rxjs/Subject';
+
+export class Button {
+  name: string;
+  color?: string;
+}
+
+export class Notification {
+  id?: Symbol;
+  message: string;
+  response?: Subject<string>;
+  buttons?: Button[];
+}

src/app/_services/counter.service.ts

@@ -15,11 +15,9 @@ export class CounterService {
   constructor() {
     const savedCounters = localStorage.getItem('counters');
     if (savedCounters) {
-      console.log('Saved Counters Found');
       const parsedCounters: Counter[] = JSON.parse(savedCounters);
       this.counters$.next(parsedCounters);
     } else {
-      console.log('No Saved Counters Found');
       this.counters$.next(this._defaultCounters);
       this.save();
     }

src/app/_services/notification.service.spec.ts

@@ -0,0 +1,15 @@
+import { TestBed, inject } from '@angular/core/testing';
+
+import { NotificationService } from './notification.service';
+
+describe('NotificationService', () => {
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      providers: [NotificationService]
+    });
+  });
+
+  it('should be created', inject([NotificationService], (service: NotificationService) => {
+    expect(service).toBeTruthy();
+  }));
+});

src/app/_services/notification.service.ts

@@ -0,0 +1,38 @@
+import { Injectable } from '@angular/core';
+import { Subject } from 'rxjs/Subject';
+import { Notification } from '../_classes/notification';
+
+interface NotificationEvent {
+  event: 'add' | 'delete';
+  notification?: Notification;
+  id?: Symbol;
+}
+
+@Injectable()
+export class NotificationService {
+
+  notifications$ = new Subject<NotificationEvent>();
+
+  constructor() { }
+
+  add(notification: Notification) {
+    const response = new Subject<string>();
+    notification.id = Symbol();
+    notification.response = response;
+    const event: NotificationEvent = {
+      event: 'add',
+      notification: notification
+    };
+    this.notifications$.next(event);
+    return notification;
+  }
+
+  delete(id: Symbol) {
+    const event: NotificationEvent = {
+      event: 'delete',
+      id: id
+    };
+    this.notifications$.next(event);
+  }
+
+}

src/app/_services/sw-update.service.spec.ts

@@ -0,0 +1,15 @@
+import { TestBed, inject } from '@angular/core/testing';
+
+import { SwUpdateService } from './sw-update.service';
+
+describe('SwUpdateService', () => {
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      providers: [SwUpdateService]
+    });
+  });
+
+  it('should be created', inject([SwUpdateService], (service: SwUpdateService) => {
+    expect(service).toBeTruthy();
+  }));
+});

src/app/_services/sw-update.service.ts

@@ -0,0 +1,32 @@
+import { Injectable } from '@angular/core';
+import { NotificationService } from './notification.service';
+import { SwUpdate } from '@angular/service-worker';
+
+@Injectable()
+export class SwUpdateService {
+
+  constructor(private _notifySvc: NotificationService, updates: SwUpdate) {
+    updates.available.subscribe(event => {
+      const updateConfirm = this._notifySvc.add({
+        message: 'New Version Available.',
+        buttons: [
+          { name: 'update' },
+          { name: 'cancel', color: 'red' }
+        ]
+      });
+      updateConfirm.response.subscribe(response => {
+        if (response === 'update') {
+          console.log('Updating Application');
+          updates.activateUpdate().then(() => location.reload());
+        }
+      });
+    });
+    updates.activated.subscribe(event => {
+      console.log('Update Activated', event);
+    });
+    updates.checkForUpdate();
+  }
+
+
+
+}

src/app/app.component.html

@@ -6,4 +6,5 @@
 <div class="navbutton" routerLink="home" routerLinkActive="active-nav">
   <i class="fa fa-home" aria-hidden="true"></i>
 </div> -->
-<router-outlet></router-outlet>
+<router-outlet></router-outlet>
+<tt-notification-container></tt-notification-container>

src/app/app.component.ts

@@ -1,10 +1,13 @@
 import { Component, OnInit } from '@angular/core';
+import { SwUpdateService } from './_services/sw-update.service';
 
 @Component({
   selector: 'tt-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.scss']
 })
 export class AppComponent {
-  title = 'Tabletop';
+  title = 'Tabletop Helper';
+
+  constructor(private _appUpdate: SwUpdateService) { }
 }

src/app/app.module.ts

@@ -1,7 +1,8 @@
 import { BrowserModule } from '@angular/platform-browser';
 import { NgModule } from '@angular/core';
 import { AppRoutingModule } from './app-routing.module';
-
+import { ServiceWorkerModule } from '@angular/service-worker';
+import { environment } from '../environments/environment';
 
 import { AppComponent } from './app.component';
 import { CounterComponent } from './counter/counter.component';
@@ -11,6 +12,10 @@ import { EditComponent } from './edit/edit.component';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { NavComponent } from './nav/nav.component';
 import { SliderComponent } from './slider/slider.component';
+import { NotificationService } from './_services/notification.service';
+import { NotificationContainerComponent } from './notification-container/notification-container.component';
+import { NotificationComponent } from './notification/notification.component';
+import { SwUpdateService } from './_services/sw-update.service';
 
 
 @NgModule({
@@ -20,15 +25,18 @@ import { SliderComponent } from './slider/slider.component';
     CounterContainerComponent,
     EditComponent,
     NavComponent,
-    SliderComponent
+    SliderComponent,
+    NotificationContainerComponent,
+    NotificationComponent
   ],
   imports: [
     BrowserModule,
     AppRoutingModule,
     FormsModule,
-    ReactiveFormsModule
+    ReactiveFormsModule,
+    ServiceWorkerModule.register('/ngsw-worker.js', { enabled: environment.production })
   ],
-  providers: [CounterService],
+  providers: [CounterService, NotificationService, SwUpdateService],
   bootstrap: [AppComponent]
 })
 export class AppModule { }

src/app/counter/counter.component.ts

@@ -19,21 +19,25 @@ export class CounterComponent implements OnInit {
   ngOnInit() {
   }
 
+  /** Increment the counter, default by one */
   up(amount = 1) {
     this.value += amount;
     this.save();
   }
 
+  /** Decrease the counter, default by one */
   down(amount = 1) {
     this.value -= amount;
     this.save();
   }
 
+  /** Resets the value of the counter to the initial value */
   reset() {
     this.value = this.initial;
     this.save();
   }
 
+  /** Saves the counters value so it persists */
   save() {
     this._counterSvc.updateValue(this.index, this.value);
   }