feat(service workers): added service workers support

.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.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",

src/app/app.component.html

@@ -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.ts

@@ -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.module.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/assets/css/styles.scss

@@ -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/i18n/en.json

@@ -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/es.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!"
 }

src/assets/i18n/pt-br.json

@@ -47,5 +47,6 @@
   "error404": "Erro 404",
   "mayTheForce": "Que a força te acompanhe",
   "updateBrowser": "Você está usando um navegador antigo, atualize a versão e recarregue a página.",
-  "firstTwoHeroesById": "Heróis (1-2)"
+  "firstTwoHeroesById": "Heróis (1-2)",
+  "offlineMessage": "Sem conexão não podemos carregar nada!"
 }

src/assets/i18n/zh.json

@@ -47,5 +47,6 @@
   "error404": "404 错误",
   "mayTheForce": "愿力量与你同在",
   "updateBrowser": "您正在使用一个旧版本浏览器，请更新它并重新加载页面。",
-  "firstTwoHeroesById": "英雄 (1-2)"
+  "firstTwoHeroesById": "英雄 (1-2)",
+  "offlineMessage": "沒有連接，我們無法加載任何東西!"
 }

src/index.html

@@ -12,6 +12,7 @@
           wss:
 
           http://*.google-analytics.com
+          http://*.googletagmanager.com
 
           https://*.google-analytics.com
           https://angularexampleapp.com

src/ngsw-config.json

@@ -0,0 +1,27 @@
+{
+  "index": "/index.html",
+  "assetGroups": [{
+    "name": "app",
+    "installMode": "prefetch",
+    "resources": {
+      "files": [
+        "/favicon.ico",
+        "/index.html"
+      ],
+      "versionedFiles": [
+        "/*.bundle.css",
+        "/*.bundle.js",
+        "/*.chunk.js"
+      ]
+    }
+  }, {
+    "name": "assets",
+    "installMode": "lazy",
+    "updateMode": "prefetch",
+    "resources": {
+      "files": [
+        "/assets/**"
+      ]
+    }
+  }]
+}