Hello friends! Long time no see! I’ve wanted to write a post on service workers for a long time now, that’s why i will share my personal experience with them. Let’s get started.
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.
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 support. If the browser does have support, we proceed to register our worker in another case. The applications are going to work normal.
WORKER LIFE CYCLE
The service worker has a lifecycle that is completely separated from your web page.
When you register a service-worker will execute the following steeps.
First it will execute the installation, if everything goes ok, it will execute the activate steep. After that the worker is ready to manage all the network requests.
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.
RUNNING
After registration if you want to check wether the service-worker is running or not, for that you must go to Application -> Service-Workers and check.
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 look 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.
sw-precache
In this post we are going to show only how to create a service-worker file from config file using node or gulp.
Bellow you can see am image with the gulp result, which creates 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.
The full documentation about sw-precache is in this link
I came to the conclusion that both packages are good tools if you don’t 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
Thanks for reading and see you next time!
Guille
