Start working with service-workers

In this blog I will share my personal experience with service-workers.

A service worker is a script that your browser runs in the background, separated from a web page enabling capabilites to do things like cache browsing, push notifications and some other stuff.

The main focus in this blog is the ability to intercept and handle network requests for caching purpouses.

service-worker diagram

Register

The first thing we have to do is to register our worker-service.
In the imagine bellow you can see how we check if the browser has suport. If the browser does have suport it we procced to register our worker in another case. The applications are going to work normal.

service-worker-registration

WORKER LIFE CYCLE

The service worker has a lifecycle that is completely separated from your web page.

When you register a service-worker it will execute the following steeps. First it will execute the installation, if everything goesok, it will execute the activate steep. After that the worker is ready to manage all the network request.

In this link you can see when is the best time to store the reources in the cache.

In this post we are using the instalation steep to store in Cache.  The resource we want to cache is in every requested worker check if this reourse is in cache.
worker-life-cycle

RUNNING

After registration if you want to check wheather the service-worker is running or not, you must go to Application -> Service-Workers and check.
service-worker-running

BEGIN  TO CREATE WORKERS

In this post we are going to use two tools to generate worker codes so we don´t need to implement it.
We are not going to go deep  into the manual implementeation of worker-service but if you want to learn more about it please folow this link

  • Manual implementation
  • sw-precache
  • angular-2-service-worker

angular2-service-worker

This is an npm package that you can easily install with this command.
The github repo is here It doesn´t have to much documentation beacuse it is alpha version.

npm install angular2-service-worker

In this sample you can see that when we run npm start it will create dist folder whith the following structure, and runs a server.
This package will generate mnifest.appcache file with the files that we want to cache. if you take a loog at the code this file is generated on gulp using gulpGenManifest function.

dist
--- js
------ custom.js
--- styles
------ styles.css
--- index.html
--- manifest.appcache
--- worker.js

If you run the example and refresh the page you are going to see that some resources came from Service-worker because these are cashed on Cahce storage.

network-inspection

sw-precache

In this post we are going to show only a how to create a service-worker file from config file using node or gulp.
Bellow you can see a image with the gulp result, it create a service-worker file that cache 4 files.
So if you change the index file referencing the new service-worker you can run and experience the cache in your browser.

gulp-result

The full documentation about sw-precache is in this link
In conclusion both packages are good tools if you do not want to create your own service worker code. It will be easy to use a cache with that tools.

if you want to download the code please go to github

Related posts

Leave a Comment