feat(service workers): add service workers support

Author: Ismael Ramos

README.md

@@ -55,34 +55,35 @@
 
 ## What's included
 
-* CRUD: create, update and remove heroes with Firebase
-* Angular Universal (SSR)
-* Use of [preboot](https://github.com/angular/preboot) module to share state between browser and server
-* Security Headers using [helmet](https://helmetjs.github.io). Report [here](https://securityheaders.com/?q=https%3A%2F%2Fwww.angularexampleapp.com).
-* Internationalization with the official i18n. Separated builds for english and spanish.
-* Lazy loading modules
-* Example of Angular Resolver for Hero Detail
-* More logical directory structure (from [here](https://itnext.io/choosing-a-highly-scalable-folder-structure-in-angular-d987de65ec7))
-* Basic example library
-* Following the [best practices](https://angular.io/guide/styleguide)!
-* Search bar, to look for heroes
-* Custom loading page
-* Lazy loading images with [ng-lazyload-image](https://github.com/tjoskar/ng-lazyload-image)
-* Modal and toasts (snakbar)!
-* Scroll restoration and anchor examples
-* Responsive layout (flex layout module)
-* SASS (most common used functions and mixins) and BEM styles
-* Animations with [ng-animate](https://jiayihu.github.io/ng-animate/)
-* Angular Pipes
-* Interceptors and Events (Progress bar active, if a request is pending)
-* Scroll to first invalid input in forms. ([ngx-scroll-to-first-invalid](https://github.com/Ismaestro/ngx-scroll-to-first-invalid))
-* Modernizr (browser features detection)
-* Browser filter (Bowser) because of IE ^^
-* [Sentry](https://sentry.io)! (logs every error in the app)
-* Google Tag Manager
-* ES6 Promises and Observables
-* Unit tests with Jasmine and Karma including code coverage (Use of [ng-bullet](https://www.npmjs.com/package/ng-bullet), [karma-mocha-reporter](https://github.com/litixsoft/karma-mocha-reporter)) and [ng-mocks](https://github.com/ike18t/ng-mocks)
-* End-to-end tests with Protractor
+- [x] CRUD: create, update and remove heroes with Firebase
+- [x] Angular Universal (SSR)
+- [x] Use of [preboot](https://github.com/angular/preboot) module to share state between browser and server
+- [x] Security Headers using [helmet](https://helmetjs.github.io). Report [here](https://securityheaders.com/?q=https%3A%2F%2Fwww.angularexampleapp.com).
+- [x] Internationalization with the official i18n. Separated builds for english and spanish.
+- [x] Lazy loading modules
+- [x] Service Workers enabled!
+- [x] Example of Angular Resolver for Hero Detail
+- [x] More logical directory structure (from [here](https://itnext.io/choosing-a-highly-scalable-folder-structure-in-angular-d987de65ec7))
+- [x] Basic example library
+- [x] Following the [best practices](https://angular.io/guide/styleguide)!
+- [x] Search bar, to look for heroes
+- [x] Custom loading page
+- [x] Lazy loading images with [ng-lazyload-image](https://github.com/tjoskar/ng-lazyload-image)
+- [x] Modal and toasts (snakbar)!
+- [x] Scroll restoration and anchor examples
+- [x] Responsive layout (flex layout module)
+- [x] SASS (most common used functions and mixins) and BEM styles
+- [x] Animations with [ng-animate](https://jiayihu.github.io/ng-animate/)
+- [x] Angular Pipes
+- [x] Interceptors and Events (Progress bar active, if a request is pending)
+- [x] Scroll to first invalid input in forms. ([ngx-scroll-to-first-invalid](https://github.com/Ismaestro/ngx-scroll-to-first-invalid))
+- [x] Modernizr (browser features detection)
+- [x] Browser filter (Bowser) because of IE ^^
+- [x] [Sentry](https://sentry.io)! (logs every error in the app)
+- [x] Google Tag Manager
+- [x] ES6 Promises and Observables
+- [x] Unit tests with Jasmine and Karma including code coverage (Use of [ng-bullet](https://www.npmjs.com/package/ng-bullet), [karma-mocha-reporter](https://github.com/litixsoft/karma-mocha-reporter)) and [ng-mocks](https://github.com/ike18t/ng-mocks)
+- [x] End-to-end tests with Protractor
 
 ### Angular Ivy
 

angular.json

@@ -71,7 +71,9 @@
               "mergeStrategies": {
                 "externals": "prepend"
               }
-            }
+            },
+            "serviceWorker": true,
+            "ngswConfigPath": "ngsw-config.json"
           },
           "configurations": {
             "en": {
@@ -213,7 +215,8 @@
                 "glob": "CNAME",
                 "input": "src/assets",
                 "output": "/"
-              }
+              },
+              "src/manifest.webmanifest"
             ],
             "stylePreprocessorOptions": {
               "includePaths": [
@@ -348,4 +351,4 @@
     }
   },
   "defaultProject": "angularexampleapp"
-}
+}

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",
+          "/*.css",
+          "/*.js"
+        ]
+      }
+    },
+    {
+      "name": "assets",
+      "installMode": "lazy",
+      "updateMode": "prefetch",
+      "resources": {
+        "files": [
+          "/assets/**",
+          "/*.(eot|svg|cur|jpg|png|webp|gif|otf|ttf|woff|woff2|ani)"
+        ]
+      }
+    }
+  ]
+}

package-lock.json

@@ -50,7 +50,9 @@
     "@angular/platform-browser": "8.0.2",
     "@angular/platform-browser-dynamic": "8.0.2",
     "@angular/platform-server": "8.0.2",
+    "@angular/pwa": "0.800.6",
     "@angular/router": "8.0.2",
+    "@angular/service-worker": "8.0.2",
     "@angular/upgrade": "8.0.2",
     "@ismaestro/ngx-scroll-to-first-invalid": "3.0.0",
     "@nguniversal/common": "7.1.1",

package.json

@@ -47,6 +47,7 @@ app.use(helmet.contentSecurityPolicy({
     ],
     scriptSrc: [
       '\'self\'',
+      '\'unsafe-inline\'',
       'http://*.googletagmanager.com',
       'https://*.google-analytics.com'
     ]

server.ts

@@ -2,14 +2,17 @@ import {NgModule} from '@angular/core';
 import {REQUEST} from '@nguniversal/express-engine/tokens';
 import {AppModule} from './app.module';
 import {AppComponent} from './app.component';
+import {ServiceWorkerModule} from '@angular/service-worker';
+import {environment} from '../environments/environment';
 
 export function getRequest(): any {
   return {headers: {cookie: document.cookie}};
 }
 
 @NgModule({
   imports: [
-    AppModule
+    AppModule,
+    ServiceWorkerModule.register('ngsw-worker.js', {enabled: environment.production})
   ],
   providers: [
     {

src/app/app.browser.module.ts

@@ -3,8 +3,7 @@
   <router-outlet *ngIf="isOnline;else isOffline"></router-outlet>
   <ng-template #isOffline>
     <div>
-      <p class="offline-error" i18n="@@offlineMessage">Without connection we can not load
-        anything!&nbsp;&nbsp;&nbsp;</p><span>:&nbsp;)</span>
+      <p class="offline-error" i18n="@@offlineMessage">Without connection we can not load anything!</p>
     </div>
   </ng-template>
 </div>

src/app/app.component.html

@@ -15,7 +15,7 @@ const routesNames = {
 };
 
 export const RoutesConfig: any = {
-  routesNames: routesNames,
+  routesNames,
   routes: {
     home: `/${routesNames.home}`,
     error404: `/${routesNames.error404}`,