Make a
Progressive Web App with Angular

How Angular 5 Make PWA Easier.

1 - We can generate a project with service-worker

$ng new simple-pwa --service-worker

What's new in Angular boiler-plate?

2 - A new file ngsw-config.json in order to configure our service worker

3 - A ServiceWorker module available in order to manage it programmatically

ngsw-config

{
    appData,
    index,
    assetGroups : [{
        name,
        installMode,
        updateMode,
        resources
    }],
    dataGroups : [{
        name,
        urls,
        version,
        cacheConfig
    }]
}

source : https://angular.io/guide/service-worker-config

assetGroups : Static resources
dataGroups : Dynamic resources

SwUpdate Service

/**
 * Subscribe to update notifications from the Service Worker, trigger update
 * checks, and forcibly activate updates.
 *
 * @experimental
 */
export declare class SwUpdate {
    private sw;
    readonly available: Observable<UpdateAvailableEvent>;
    readonly activated: Observable<UpdateActivatedEvent>;
    constructor(sw: NgswCommChannel);
    /**
     * Returns true if the Service Worker is enabled (supported by the browser and enabled via
     * ServiceWorkerModule).
     */
    readonly isEnabled: boolean;
    checkForUpdate(): Promise<void>;
    activateUpdate(): Promise<void>;
}

Test service worker

#ng build --prod

#cd dist/

#http-server -p 8080

build it for prod env

go to generated directory

serve generated files

Because ng serve does not work with service workers, you must use a seperate HTTP server to test your project locally. You can use any HTTP server.

Allow acess to manifest.json

.angular-cli-json

 
...
"assets": [
  "assets",
  "favicon.ico",
  "manifest.json"
]
...

Debug SW

refresh SW

Unregister SW :
chrome://serviceworker-internals/