How to Install PWA with angular 7

Angular CLI allows you to quickly add PWA features to an existing Angular application. You can turn your application into a PWA by running the following command in your terminal from the root of the project:

$ ng add @angular/pwa

This command will automatically add PWA features to Angular application, such as:

A manifest.json file,
Different sizes of icons in the src/assets/icons folder,
The ngsw-worker.js service worker.
Open the dist/ folder. You’ll find various files but concentrate on the files related to PWA features:

A manifest.json file with the following content:

{
    "name": "pwademo",
    "short_name": "pwademo",
    "theme_color": "#1976d2",
    "background_color": "#fafafa",
    "display": "standalone",
    "scope": "/",
    "start_url": "/",
    "icons": [
        {
        "src": "assets/icons/icon-72x72.png",
        "sizes": "72x72",
        "type": "image/png"
    },
    {
        "src": "assets/icons/icon-96x96.png",
        "sizes": "96x96",
        "type": "image/png"
    },
    {
        "src": "assets/icons/icon-128x128.png",
        "sizes": "128x128",
        "type": "image/png"
    },
    {
        "src": "assets/icons/icon-144x144.png",
        "sizes": "144x144",
        "type": "image/png"
    },
    {
        "src": "assets/icons/icon-152x152.png",
        "sizes": "152x152",
        "type": "image/png"
    },
    {
        "src": "assets/icons/icon-192x192.png",
        "sizes": "192x192",
        "type": "image/png"
    },
    {
        "src": "assets/icons/icon-384x384.png",
        "sizes": "384x384",
        "type": "image/png"
    },
    {
        "src": "assets/icons/icon-512x512.png",
        "sizes": "512x512",
        "type": "image/png"
    }
    ]
}

As you can see, the added manifest.json file has all the informations which are required for a PWA such as the name, description and start_url etc.

The manifest.json file, hookup to icons with different sizes, that were also added automatically in the assets/icons folder. You will, of course, need to change those icons with your own once you are ready to build the final version of your PWA.

In the index.html file, the manifest.json file is accredit using:

The ngsw-worker.js file, was also accordingly added, which contains the service worker. The code to install this service worker is accordingly inserted in the src/app/app.module.ts file:

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

@NgModule({
declarations: [
AppComponent
],

imports: [
...
ServiceWorkerModule.register('/ngsw-worker.js', { enabled:  environment.production })
],

The @angular/service-worker is installed by the ng add command and worked as a dependency to pwademo/package.json:

"dependencies": {
...
"@angular/service-worker": "^6.1.0"
}

The SW (Service Worker) build support is also enabled in the CLI. In the angular.json file a "serviceWorker": true configuration option will be add.

In the index.html file a meta tag for theme-color with a value of "#1976d2" will be added:

The theme color tells the browser what color to complexion UI elements such as the address bar.

Adding the theme color to both the index.html and manifest.json files fixes the address bar brand colors audit.

------------------------------------------------------------------------------------------------------------------------------------------------------------