[Angular] Upgrade existing Angular app to Progressive Web App

If you alread have an existing Angular application and want to upgrade to progressive web app. 

1. Install @angular/service-worker:

npm i --save @angular/service-worker

 

2. Create a file: src/ngsw-config.json

{
  "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/**"
        ]
      }
    }
  ]
}

 

3. Create a src/manifest.json file:

{
  "dir": "ltr",
  "lang": "en",
  "name": "Application Name",
  "scope": "/",
  "display": "fullscreen",
  "start_url": "http://localhost:8000/",
  "short_name": "Application name",
  "theme_color": "transparent",
  "description": "All about your app",
  "orientation": "any",
  "background_color": "transparent",
  "related_applications": [],
  "prefer_related_applications": false,
  "icons": [
    {
      "src": "/favicon.ico",
      "sizes": "16x16 32x32"
    },
    {
      "src": "/assets/android-icon-36x36.png",
      "sizes": "36x36",
      "type": "image/png",
      "density": "0.75"
    },
    {
      "src": "/assets/android-icon-48x48.png",
      "sizes": "48x48",
      "type": "image.png",
      "density": "1.0"
    },
    {
      "src": "/assets/android-icon-72x72.png",
      "sizes": "72x72",
      "type": "image/png",
      "density": "1.5"
    },
    {
      "src": "/assets/android-icon-96x96.png",
      "sizes": "96x96",
      "type": "image/png",
      "density": "2.0"
    },
    {
      "src": "/assets/android-icon-144x144.png",
      "sizes": "144x144",
      "type": "image/png",
      "density": "3.0"
    },
    {
      "src": "/assets/android-icon-192x192.png",
      "sizes": "192x192",
      "type": "image/png",
      "density": "4.0"
    }
  ]
}

 

4. Update .angular-cli.json file:

{
  "apps": [
    {
      "root": "src",
      ...
      "environments": {
        "dev": "environments/environment.ts",
        "prod": "environments/environment.prod.ts"
      },
      "serviceWorker": true
    }
}

 

5. Import ServiceWorkerModule in app.module.ts file:

import {ServiceWorkerModule} from '@angular/service-worker';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    ...
    ServiceWorkerModule.register('/ngsw-worker.js', {enabled: environment.production})
  ],
  ...
  bootstrap: [AppComponent]
})
export class AppModule {
}

'ngsw-worker.js' will be created in dist folder after we build the application in production mode.

 

6. Run:

ng build --prod

 

7. cd to dist folder, run in local server.