Add Angular service worker.

ilduario · Sep 1, 2019 · a9561ef · a9561ef
1 parent eb41016
commit a9561ef
Show file tree

Hide file tree

Showing 8 changed files with 217 additions and 29 deletions.
diff --git a/angular.json b/angular.json
@@ -29,7 +29,8 @@
                 "glob": "**/*.svg",
                 "input": "node_modules/ionicons/dist/ionicons/svg",
                 "output": "./svg"
-              }
+              },
+              "src/manifest.webmanifest"
             ],
             "styles": [
               {
@@ -68,7 +69,9 @@
                   "maximumWarning": "2mb",
                   "maximumError": "5mb"
                 }
-              ]
+              ],
+              "serviceWorker": true,
+              "ngswConfigPath": "ngsw-config.json"
             },
             "ci": {
               "progress": false
@@ -114,7 +117,8 @@
                 "glob": "**/*",
                 "input": "src/assets",
                 "output": "/assets"
-              }
+              },
+              "src/manifest.webmanifest"
             ]
           },
           "configurations": {

diff --git a/ngsw-config.json b/ngsw-config.json
@@ -0,0 +1,29 @@
+{
+  "$schema": "./node_modules/@angular/service-worker/config/schema.json",
+  "index": "/index.html",
+  "assetGroups": [
+    {
+      "name": "app",
+      "installMode": "prefetch",
+      "resources": {
+        "files": [
+          "/favicon.ico",
+          "/index.html",
+          "/manifest.webmanifest",
+          "/*.css",
+          "/*.js"
+        ]
+      }
+    }, {
+      "name": "assets",
+      "installMode": "lazy",
+      "updateMode": "prefetch",
+      "resources": {
+        "files": [
+          "/assets/**",
+          "/*.(eot|svg|cur|jpg|png|webp|gif|otf|ttf|woff|woff2|ani)"
+        ]
+      }
+    }
+  ]
+}
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -23,7 +23,9 @@
     "@angular/forms": "^8.2.4",
     "@angular/platform-browser": "^8.2.4",
     "@angular/platform-browser-dynamic": "^8.2.4",
+    "@angular/pwa": "^0.803.2",
     "@angular/router": "^8.2.4",
+    "@angular/service-worker": "^8.2.4",
     "@ionic-native/android-full-screen": "^5.13.0",
     "@ionic-native/app-version": "^5.13.0",
     "@ionic-native/ble": "^5.13.0",

diff --git a/src/app/app.component.ts b/src/app/app.component.ts
@@ -1,14 +1,16 @@
 import { Component, Inject, OnInit, OnDestroy } from '@angular/core';
 
+import { SwUpdate } from '@angular/service-worker';
+
 import { TranslateService } from '@ngx-translate/core';
 
 import { Subscription, from } from 'rxjs';
-import { distinctUntilChanged, first, mergeMap, timeout } from 'rxjs/operators';
+import { first, mergeMap, timeout } from 'rxjs/operators';
 
 import { AppSettings } from './app-settings';
 import { Backend } from './backend';
 import { ControlUnit } from './carrera';
-import { AppService, ControlUnitService, I18nToastService, LoggingService, SpeechService } from './services';
+import { AppService, ControlUnitService, I18nAlertService, I18nToastService, LoggingService, SpeechService } from './services';
 
 const CONNECTION_TIMEOUT = 3000;
 
@@ -30,11 +32,13 @@ export class AppComponent implements OnInit, OnDestroy {
     private app: AppService,
     public cu: ControlUnitService,
     @Inject(Backend) private backends: Backend[],
+    private alert: I18nAlertService,
     private logger: LoggingService,
     private settings: AppSettings,
     private speech: SpeechService,
     private toast: I18nToastService,
-    private translate: TranslateService)
+    private translate: TranslateService,
+    private updates: SwUpdate)
   {
     app.orientation.subscribe(orientation => {
       app.enableFullScreen(orientation == AppService.LANDSCAPE);
@@ -72,11 +76,34 @@ export class AppComponent implements OnInit, OnDestroy {
         this.cu.next(null);
       }
     });
+    // TODO: wait for app becoming stable
+    if (this.updates.isEnabled) {
+      this.logger.info("Service worker enabled");
+      this.updates.available.subscribe(() => {
+        this.logger.info("Update available");
+        this.update();
+      });
+    } else {
+      this.logger.info("Service worker not enabled");
+    }
   }
 
   ngOnDestroy() {
     this.cu.next(null);
   }
+
+  private update() {
+    this.alert.show({
+      message: 'A new version of Open Lap is available. Do you want to update now?',
+      buttons: [{
+        text: 'Cancel',
+        role: 'cancel',
+      }, {
+        text: 'OK',
+        handler: () => document.location.reload()
+      }]
+    });
+  }
 
   private setLanguage(language: string) {
     this.translate.use(language || this.translate.getBrowserLang() || 'en').toPromise().then(obj => {

diff --git a/src/app/app.module.ts b/src/app/app.module.ts
@@ -5,8 +5,9 @@ import { ErrorHandler, Injectable, NgModule } from '@angular/core';
 import { HttpClient, HttpClientModule } from '@angular/common/http';
 import { BrowserModule } from '@angular/platform-browser';
 import { RouteReuseStrategy } from '@angular/router';
+import { ServiceWorkerModule, SwRegistrationOptions } from '@angular/service-worker';
 
-import { IonicModule, IonicRouteStrategy } from '@ionic/angular';
+import { IonicModule, IonicRouteStrategy, Platform } from '@ionic/angular';
 
 import { BLE } from '@ionic-native/ble/ngx';
 import { Serial } from '@ionic-native/serial/ngx';
@@ -30,6 +31,8 @@ import { LoggingService } from './services';
 import { AppComponent } from './app.component';
 import { AppRoutingModule } from './app-routing.module';
 
+import { environment } from '../environments/environment';
+
 @Injectable()
 export class LoggingErrorHandler implements ErrorHandler {
 
@@ -45,6 +48,13 @@ export function createTranslateLoader(http: HttpClient) {
     return new TranslateHttpLoader(http, './assets/i18n/', '.json');
 }
 
+export function swRegistrationOptions(platform: Platform) {
+  return {
+    enabled: !platform.is('cordova') && environment.production,
+    registrationStrategy: 'registerImmediately'
+  }
+}
+
 @NgModule({
   declarations: [
     AppComponent
@@ -67,15 +77,21 @@ export function createTranslateLoader(http: HttpClient) {
     SettingsModule,
     SharedModule,
     TuningModule,
-    AppRoutingModule
+    AppRoutingModule,
+    ServiceWorkerModule.register('ngsw-worker.js')
   ],
   providers: [
     BLE,
     Serial,
     TextToSpeech,
     Toast,
     { provide: RouteReuseStrategy, useClass: IonicRouteStrategy },
-    { provide: ErrorHandler, useClass: LoggingErrorHandler }
+    { provide: ErrorHandler, useClass: LoggingErrorHandler },
+    {
+      provide: SwRegistrationOptions,
+      useFactory: swRegistrationOptions,
+      deps: [Platform]
+    },
   ],
   bootstrap: [AppComponent]
 })

diff --git a/src/index.html b/src/index.html
@@ -2,31 +2,34 @@
 <html lang="en">
 
 <head>
-  <meta charset="utf-8" />
+  <meta charset="utf-8"/>
   <title>Open Lap</title>
 
-  <base href="/" />
+  <base href="/"/>
 
-  <meta name="viewport" content="viewport-fit=cover, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
-  <meta name="format-detection" content="telephone=no" />
-  <meta name="msapplication-tap-highlight" content="no" />
+  <meta name="viewport" content="viewport-fit=cover, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
+  <meta name="format-detection" content="telephone=no"/>
+  <meta name="msapplication-tap-highlight" content="no"/>
 
-  <link rel="icon" type="image/png" href="assets/icons/icon-72x72.png" sizes="72x72" />
-  <link rel="icon" type="image/png" href="assets/icons/icon-96x96.png" sizes="96x96" />
-  <link rel="icon" type="image/png" href="assets/icons/icon-128x128.png" sizes="128x128" />
-  <link rel="icon" type="image/png" href="assets/icons/icon-144x144.png" sizes="144x144" />
-  <link rel="icon" type="image/png" href="assets/icons/icon-152x152.png" sizes="152x152" />
-  <link rel="icon" type="image/png" href="assets/icons/icon-192x192.png" sizes="192x192" />
-  <link rel="icon" type="image/png" href="assets/icons/icon-384x384.png" sizes="384x384" />
-  <link rel="icon" type="image/png" href="assets/icons/icon-512x512.png" sizes="512x512" />
+  <link rel="icon" type="image/png" href="assets/icons/icon-72x72.png" sizes="72x72"/>
+  <link rel="icon" type="image/png" href="assets/icons/icon-96x96.png" sizes="96x96"/>
+  <link rel="icon" type="image/png" href="assets/icons/icon-128x128.png" sizes="128x128"/>
+  <link rel="icon" type="image/png" href="assets/icons/icon-144x144.png" sizes="144x144"/>
+  <link rel="icon" type="image/png" href="assets/icons/icon-152x152.png" sizes="152x152"/>
+  <link rel="icon" type="image/png" href="assets/icons/icon-192x192.png" sizes="192x192"/>
+  <link rel="icon" type="image/png" href="assets/icons/icon-384x384.png" sizes="384x384"/>
+  <link rel="icon" type="image/png" href="assets/icons/icon-512x512.png" sizes="512x512"/>
 
   <!-- add to homescreen for ios -->
-  <meta name="apple-mobile-web-app-capable" content="yes" />
-  <meta name="apple-mobile-web-app-status-bar-style" content="black" />
+  <meta name="apple-mobile-web-app-capable" content="yes"/>
+  <meta name="apple-mobile-web-app-status-bar-style" content="black"/>
+  <link rel="manifest" href="manifest.webmanifest">
+  <meta name="theme-color" content="#1976d2">
 </head>
 
 <body>
   <app-root></app-root>
+  <noscript>Please enable JavaScript to continue using this application.</noscript>
 </body>
 
 </html>