Service Workers and Angular CLI

person carlosrojasofolder_openUncategorizedaccess_time December 20, 2017
Service Workers and Angular CLI

Angular CLI is a great tool that makes it easy to create an application that works with Angular and best practices. Recently was released Angular CLI 1.6 have a bunch of good stuff but the cool thing for us is that we can activate easily NGSW.

NGSW is a JSON that allows us to configure our Service Worker easily. Personally, I think this is awesome.

Have a shiny PWA with Angular is easy using Angular CLI, All you have to do is.

1. Install Angular CLI


$npm install -g @angular/cli

2. Create a new App


$ng new pwaApp


$cd pwaApp/

3. Enable service worker build support in the CLI


$npm install @angular/service-worker


$ng set apps.0.serviceWorker=true

4. Import and register the service worker

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

...

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

5. Create the configuration file, 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/**"
      ]
    }
  }]
}

6. Build the project


$ng build --prod

That’s it.

Now you can have your progressive web app waiting for you in dist/ folder.

Optional: Testing your PWA

Install a HTTP Server


$npm install -g http-server

Run http-server


$cd dist/


$http-server -p 8080

Hoping this info can be handy. Until a new Post 🙂

Liked it? Take a second to support carlosrojaso on Patreon!