From bb66235faad84cc997bfc83dd77a52e7effddb75 Mon Sep 17 00:00:00 2001
From: flolu <fllu@pm.me>
Date: Sat, 25 Apr 2020 13:29:34 +0200
Subject: [PATCH] feat(example): service worker update handling

---
 examples/angular/src/app/BUILD.bazel          |  2 ++
 examples/angular/src/app/app.component.ts     |  5 +++
 examples/angular/src/app/app.module.ts        |  2 ++
 .../angular/src/app/service-worker.service.ts | 34 +++++++++++++++++++
 4 files changed, 43 insertions(+)
 create mode 100644 examples/angular/src/app/service-worker.service.ts

diff --git a/examples/angular/src/app/BUILD.bazel b/examples/angular/src/app/BUILD.bazel
index e5ba6c1a4d..2217ee3505 100644
--- a/examples/angular/src/app/BUILD.bazel
+++ b/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",
     ],
 )
 
diff --git a/examples/angular/src/app/app.component.ts b/examples/angular/src/app/app.component.ts
index 92c8901181..f982718675 100644
--- a/examples/angular/src/app/app.component.ts
+++ b/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()
+  }
 }
diff --git a/examples/angular/src/app/app.module.ts b/examples/angular/src/app/app.module.ts
index 4f49f3ab5e..793fd94636 100644
--- a/examples/angular/src/app/app.module.ts
+++ b/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],
 })
diff --git a/examples/angular/src/app/service-worker.service.ts b/examples/angular/src/app/service-worker.service.ts
new file mode 100644
index 0000000000..a319a0375e
--- /dev/null
+++ b/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;
+  }
+}