feat(example): service worker update handling

Author: flolu

examples/angular/src/app/BUILD.bazel

@@ -16,11 +16,13 @@ ng_ts_library(
         "//src/app/todos",
         "//src/app/todos/reducers",
         "//src/shared/material",
+        "@npm//@angular/common",
         "@npm//@angular/core",
         "@npm//@angular/platform-browser",
         "@npm//@angular/router",
         "@npm//@angular/service-worker",
         "@npm//@ngrx/store",
+        "@npm//rxjs",
     ],
 )
 

examples/angular/src/app/app.component.ts

@@ -1,5 +1,10 @@
 import {Component} from '@angular/core';
 
+import { ServiceWorkerService } from './service-worker.service';
+
 @Component({selector: 'app-component', templateUrl: 'app.component.html'})
 export class AppComponent {
+  constructor(private swService: ServiceWorkerService) {
+    this.swService.launchUpdateCheckingRoutine()
+  }
 }

examples/angular/src/app/app.module.ts

@@ -11,6 +11,7 @@ import {AppRoutingModule} from './app-routing.module';
 import {AppComponent} from './app.component';
 import {HomeModule} from './home/home';
 import {todoReducer} from './todos/reducers/reducers';
+import { ServiceWorkerService } from './service-worker.service';
 
 @NgModule({
   declarations: [AppComponent],
@@ -20,6 +21,7 @@ import {todoReducer} from './todos/reducers/reducers';
     BrowserModule.withServerTransition({ appId: 'angular-bazel-example' }),
     ServiceWorkerModule.register('ngsw-worker.js')
   ],
+  providers:[ServiceWorkerService],
   exports: [AppComponent],
   bootstrap: [AppComponent],
 })

examples/angular/src/app/service-worker.service.ts

@@ -0,0 +1,34 @@
+import {ApplicationRef, Injectable, Inject, PLATFORM_ID} from '@angular/core';
+import {SwUpdate} from '@angular/service-worker';
+import {concat, interval} from 'rxjs';
+import {first} from 'rxjs/operators';
+import {isPlatformBrowser} from '@angular/common';
+
+@Injectable()
+export class ServiceWorkerService {
+  constructor(
+    private appRef: ApplicationRef,
+    private swUpdate: SwUpdate,
+    @Inject(PLATFORM_ID) private platform: string
+  ) {}
+
+  launchUpdateCheckingRoutine(checkIntervaSeconds: number = 6 * 60 * 60) {
+    if (!this.isAvailable()) return;
+
+    const timeInterval$ = concat(
+      this.appRef.isStable.pipe(first((isStable) => !!isStable)),
+      interval(checkIntervaSeconds * 1000)
+    );
+
+    timeInterval$.subscribe(() => this.swUpdate.checkForUpdate());
+    this.swUpdate.available.subscribe(() => this.forceUpdateNow());
+  }
+
+  private forceUpdateNow() {
+    this.swUpdate.activateUpdate().then(() => document.location.reload());
+  }
+
+  private isAvailable() {
+    return isPlatformBrowser(this.platform) && this.swUpdate.isEnabled;
+  }
+}