Service worker configuration for Part 1 if Angular pwa tutorial.

pwa-tutorial-0-0-main.ts

// src/main.ts
import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { AppModule } from './app/app.module';
import { environment } from './environments/environment';

if (environment.production) {
  enableProdMode();
}

platformBrowserDynamic().bootstrapModule(AppModule)
  .catch(err => console.log(err));

// ** New Code ** //
// https://github.com/angular/angular-cli/issues/9021
// https://blog.angular-university.io/service-workers/
// https://juristr.com/blog/2018/01/ng-app-runtime-config/

if ('serviceWorker' in navigator && environment.production) {
 console.log("Service Worker in main.ts");
 window.addEventListener('load', () => {
   console.log("on page Load Service Worker in main.ts");
   navigator.serviceWorker.register('/ngsw-worker.js', {
     scope: '/',
   })
     .then(registration => {
       console.log("Service Worker registration completed main.ts", registration);
     });
 });
}

pwa-tutorial-0-0-manifest.json

{
  "name": "Atila",
  "short_name": "Atila",
  "start_url": "index.html",
  "display": "standalone",
  "icons": [{
    "src": "assets/img/favicon-bg.png",
    "sizes": "512x512",
    "type": "image/png"
  }],
  "background_color": "#194f87",
  "theme_color": "#194f87"
}

pwa-tutorial-0-0-ngsw-config.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/**"
      ]
    }
  }]
}

pwa-tutorial-0-2-ngsw-config.json

{
  "index": "/index.html",
  "assetGroups": [{
    "name": "app",
    "installMode": "prefetch",
    "resources": {
      "files": [
        "/favicon.ico",
        "/index.html",
        "/*.css",
        "/*.js"
      ],
      "urls": [
        "https://firebasestorage.googleapis.com/v0/b/atila-7.appspot.com/o/user-profiles%2F1%2Fprofile-pictures%2Ffacebook-profile-picture.jpg?alt=media&token=8754c657-bbdc-4d8e-ae1d-d4047ac09c6d",
        "https://lh6.googleusercontent.com/U1oHmeuzUcMbPLHFhpDHc_8KsFWq7IX_jE6kUBl1svTSnffIukAjJ0QDgfXJCdZ_rONXiZzhtNnz3CrFMDEnrIrMc5MpnWcSuUfEURbNRFM9lxYPN6qDMSMHPqC02h9o0pO9UlUP",
        "https://atila-7.herokuapp.com/api/blog/blog-slug/tomiwa/how-i-got-interviews-at-google-facebook-and-bridgewater/",
        "https://api.myjson.com/bins/18mldc"
      ]
    }
  }, {
    "name": "assets",
    "installMode": "lazy",
    "updateMode": "prefetch",
    "resources": {
      "files": [
        "/assets/**"
      ]
    }
  }],
  "dataGroups": [
    {
      "name": "demo.atila.ca",
      "urls": [
        "https://atila-7.herokuapp.com/api/**",
        "https://api.myjson.com/bins/**"
      ],
      "cacheConfig": {
        "maxSize": 3,
        "maxAge": "7d",
        "strategy": "freshness"
      }
    }]

    }