Service worker

Service worker is a script that runs in background in the browser. You can run long running task in service worker without blocking the UI rendering. But then you might be wondering that what is difference between the service worker and async promises. We can also run task in async function without blocking UI. There are other benefits in using a service worker which cannot be achieved by async functions or promises.

  • They make your App offline capable. They can be used for performance improvement. (App shell technique).
  • It provides as a base for the features like notification API push API extra.

Service worker do not have access to DOM (Document Object Model)

Prerequisites for service worker

In order to run service worker you need https connection. And to get https connection, the only way was to purchase a certificate, but now we have services like letsencrypt which provide https certificate for free with two months validity and it can be auto renewed automatically. You can also use GitHub pages to host your site. Github pages which provides https certificate. Anyways, we will use localhost for development for service worker.

Registration of service worker

We have something called navigator.serviceworker. This is available in all the supported browsers. We have to call the register method of navigator.serviceworker to register the service worker file. This file path is relative to the root of the project, and not relative path of url. So even if you are registering the service worker file at this path techdoma.in/abc/pqr/index.html, and the service worker file is present at techdoma.in/sw.js, then you will use

navigator.serviceWorker.register('sw.js')

Using a service worker

We will intercept the fetch call inside the service worker and give our response.

index.html
<script>
    navigator.serviceWorker.register('sw.js')
</script>
sw.js
self.addEventListener('fetch', function(event) {
    event.respondWith(new Response("Hello world"));
});

So now we know that we can create your own response and intercept the network call in a service worker. We can use this to our advantage to return the file from cache instead of making a network call. We can use the caches feature to cache the files.

Cache feature is not specific to service worker, and can be used independently as well ()

In order to cache a file, you have to use

caches.open('v2').then(function(cache) {
    return cache.add('/test/');
})

Difference between browser cache and service worker cache

The service worker cache gives you complete control over the request but the browser cache does not. Even the browser will serve the request from the cache for static request like CSS and JavaScript files. If the browser cache is sufficient for your needs, then there is no need to require service worker. But browser cache cannot make your App offline capable.

Cache stratergy using service worker

The caching API is independent of service worker, you can use the cache appear to stored the files yourself outside of the service worker file.

There are three major strategies using service worker for caching

Serve from cache, fallback to network

In this approach when the request is made by browser, the service worker will intercept it and check if the request is cached or not. If the request is cached then the service worker send the response from the cache. If the request is not cached then the service worker will create a network request and then send the response from the network (updating the cache after the network response)

Serve from network, fallback to cache

In this approach, the service worker will make the request to the network. If the user is not online, then the network response will fail. So the service worker will route the request to the cache and serve from the cache.

Serve from both cache and network

As you know the cache he is not specific to the service worker you can cache the response even outside the service worker. In this approach, the UI will make the request to the cache as well as to the service worker.It will show the response from the cache. Meanwhile the service worker will make the request to the network and get the results. These results are updated in the cache and also sent to the UI.