Photo by Sticker Mule on Unsplash

Update: This article is obsolete for Angular 6+. Please head to the new version here.

Service workers are an easy way to make web applications work offline. What service workers do is that they cache all of your Javascript / CSS / HTML so that your web application can still do something without any internet connection.

With Angular CLI 1.6, all you have to do to create a project with service worker support is use the service-worker flag:

ng new my-project --service-worker

This simple command will take care of all of the steps listed below, so feel free to take a look to see what Angular CLI does for us here.

What if I want to add service worker to an existing project?

In that case, you have to install the service worker package:

npm install @angular/service-worker --save

Then in your Angular CLI config file .angular-cli.json , add a new entry in your app as follows:

"serviceWorker": true

The next step is to provide a service worker configuration file, ngsw-config.json . You can copy-paste the following template, which works great for most apps. This will cache all of the static assets, HTML, CSS, and Javascript for your app:

{

"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/**"

]

}

}]

}

Finally, you have to register your new service worker in your app.module, using the brand new ServiceWorkerModule from @angular/service-worker:

Note that the above code only enables service worker in production, which you can of course tweak for testing purposes.

How do I generate the service worker?

Automatically, of course! Now when you run a production build from Angular CLI, a service worker will be generated to cache all of your static assets and code:

ng build --prod

The service worker is only generated in production mode as caching Javascript in probably not what you want to do in development mode, where live debugging might be needed using the code you just wrote.

What if I need to customize caching?

You can edit the ngsw-config.json file at the root of your project to define custom caching.

For instance, let’s say you need to cache some files from external URLs, like fonts. You can specify that in the manifest as follows:

"external": {

"urls": [

{"url": "https://fonts.googleapis.com/..."},

{"url": "https://fonts.gstatic.com/s/..."}

]

}

The manifest can also be used to ignore specific URLs or specify a particular caching strategy like so:

{

"name": "offline",

"urls": { "https://mysite.com/data.json": {"match": "prefix"}},

"cache": {

"optimizeFor": "freshness",

"maxAgeMs": 360000000,

"maxEntries": 1,

"strategy": "lru"

}

}

More information

The documentation for all this is also evolving on this GitHub page. There is also an official page for Service Worker on Angular.io.

Note the ServiceWorkerModule can also be used to listen for push notifications through the service worker.

Again, this is still work in progress but feel free to give it a try, as it is surprisingly easy to get your app offline with @angular/service-worker .