feat(service workers): added service workers support

Author: Ismaestro

.angular-cli.json

@@ -21,9 +21,7 @@
       "tsconfig": "tsconfig.app.json",
       "testTsconfig": "tsconfig.spec.json",
       "prefix": "app",
-      "stylesUrls": [
-        ""
-      ],
+      "serviceWorker": true,
       "styles": [
         "assets/css/reset.css",
         "assets/css/loading.css",
@@ -63,6 +61,7 @@
   },
   "defaults": {
     "styleExt": "css",
-    "component": {}
+    "component": {
+    }
   }
 }

README.md

@@ -63,6 +63,7 @@ Live DEMO [here](http://angularexampleapp.com/)!
 * Lazy loading modules
 * Interceptors and Events (Progress bar active, if a request is pending)
 * CRUD: create, update and remove heroes
+* Service Workers!
 * Custom example library
 * Search bar, to look for heroes
 * Angular Pipes

package-lock.json

@@ -4,10 +4,11 @@
   "license": "MIT",
   "scripts": {
     "start": "ng serve --aot",
+    "http-server": "http-server dist/ -c-1",
     "build": "ng build --prod",
     "deploy": "ng build --prod --base-href / && angular-cli-ghpages",
     "test": "ng test --watch=false --code-coverage",
-    "e2e": "ng e2e --prod",
+    "e2e": "ng e2e",
     "e2e:home": "ng e2e --serve false --prod --specs=./e2e/home/**/*.e2e-spec.ts",
     "e2e:heroeslist": "ng e2e --serve false --prod --specs=./e2e/heroes-list/**/*.e2e-spec.ts",
     "lint": "ng lint",
@@ -44,6 +45,7 @@
     "@angular/language-service": "^5.2.9",
     "@angular/material": "5.1.1",
     "@angular/platform-server": "5.2.3",
+    "@angular/service-worker": "^5.2.9",
     "@ngx-translate/core": "9.1.1",
     "@ngx-translate/http-loader": "2.0.1",
     "@types/jasmine": "2.8.6",
@@ -54,6 +56,7 @@
     "codelyzer": "4.1.0",
     "coveralls": "3.0.0",
     "hammerjs": "2.0.8",
+    "http-server": "^0.11.1",
     "jasmine-core": "2.9.1",
     "jasmine-spec-reporter": "4.2.1",
     "karma": "2.0.0",

package.json

@@ -1,5 +1,10 @@
 <div>
     <app-nav></app-nav>
-    <router-outlet></router-outlet>
+    <router-outlet *ngIf="isOnline;else isOffline"></router-outlet>
+    <ng-template #isOffline>
+        <div>
+            <p class="offline-error">{{'offlineMessage' | translate}}&nbsp;&nbsp;&nbsp;<span>:&nbsp;)</span></p>
+        </div>
+    </ng-template>
 </div>
 <app-footer></app-footer>

src/app/app.component.html

@@ -15,6 +15,8 @@ declare const Modernizr;
 
 export class AppComponent {
 
+  isOnline = navigator.onLine;
+
   constructor(private translateService: TranslateService,
               private title: Title,
               private meta: Meta,

src/app/app.component.ts

@@ -19,9 +19,13 @@ import {ProgressInterceptor} from './shared/interceptors/progress.interceptor';
 import {TimingInterceptor} from './shared/interceptors/timing.interceptor';
 import {SampleModule} from 'angular-example-library';
 
+import {ServiceWorkerModule} from '@angular/service-worker';
+import {environment} from '../environments/environment';
+
 @NgModule({
   imports: [
     BrowserModule,
+    ServiceWorkerModule.register('/ngsw-worker.js', {enabled: environment.production}),
     BrowserAnimationsModule,
     FormsModule,
     HttpClientModule,

src/app/app.module.ts

@@ -104,4 +104,17 @@ pre {
   display: block;
   text-align: left;
   word-wrap: break-word;
+}
+
+.offline-error {
+  font-size: 1em;
+  font-weight: 300;
+  padding: 1rem;
+  text-align: center;
+
+  span {
+    transform: rotate(90deg);
+    font-size: 0.8em;
+    display: inline-flex;
+  }
 }

src/assets/css/styles.scss

@@ -47,5 +47,6 @@
   "error404": "404 Error",
   "mayTheForce": "May the force be with you",
   "updateBrowser": "You are using an old browser, please update it and reload the page.",
-  "firstTwoHeroesById": "Heroes (1-2)"
+  "firstTwoHeroesById": "Heroes (1-2)",
+  "offlineMessage": "Without connection we can not load anything!"
 }

src/assets/i18n/en.json

@@ -47,5 +47,6 @@
   "error404": "Error 404",
   "mayTheForce": "Que la fuerza te acompañe",
   "updateBrowser": "Estas usando un navegador antiguo, por favor actualiza la versión y recarga la página.",
-  "firstTwoHeroesById": "Heroes (1-2)"
+  "firstTwoHeroesById": "Heroes (1-2)",
+  "offlineMessage": "Sin conexión no podemos cargar nada!"
 }