Let’s discuss the Service Worker
As talked before I wanted to learn you all something about the service worker. While the service worker is not that new, but not that many people have written something about it.The only problem about the service worker is how many options it has. That is why I’m going to split this article into two parts. In the first part I’ll try to tell you about the possibilities and all user needs. Here I’ll show you some examples of websites I know that use a service worker. I won’t go into depth with code in the first part, I’ll save this for the second part. In the second article I’m going to explain the service worker using some examples of how to set up a simple service worker and what we can achieve with it.
What is a service worker?
Before we use a service worker we have to know some things about the service worker.
- A service worker is not a script that has a window property. It does run in the browser but it is separated from the page. That being said, the service worker can’t control direct page manipulation.
- The service worker isn’t always there. A service worker has to be installed before you can use it. If you install a service worker in your browser the service worker will take over the requests from this point. A service worker — once it has been installed — is always there, even when your browser is turned off.
- A service worker is a script that can intercept network requests so that you can treat the network as an enhancement
- A service worker has its own cache and can store and get data from it. This cache will stay there as long as the user doesn’t delete it from his browser.
So now we know the basic of a service worker but we don’t know anything about what it actually is and how it can be used.
A service worker is a script that runs in the browser. The service worker has to be installed first in order for it to work. But once it has been installed it isn’t a script that will be loaded from the server. but it is the first script that will be loaded when you do a page request. With this script you have the ability to control any requests and page loads from here. For example, a service worker can from here give you a website saved from his cache instead of the live website. This way the user will render a fast website.
The purpose of the serivce worker
The service worker is designed for creating a fast offline experience. When I say offline there are two different ways to be offline. The first way is to have no internet, really annoying but you now know you have no connection. The second way is way more annoying and harder to solve. It’s when you have a internet connection but it isn’t that fast. For example when you are in the train and you have a lot of connection loss. The service worker can be a solution for both actions. I’ll explain some actions with both principles assuming you have installed the service worker.
Let’s say you are completely offline but you are still trying to load the page. A service worker can now detect the user is offline by using the simple `navigator.onLine` state. If this is false a service worker can step in by loading the files stored in the cache. This way, even when you are offline, you have a working website.
The other option is when you have slow internet. The ‘navigator.onLine’ state will return true so that means you can’t use this fallback. Instead we wan’t to load the cache content first. The user will now have a fast first page. The service worker will then load the new content in the background and when it’s ready it will swap the content. This way the user can already read most of the page.
You can see a service worker as a server that runs between your browser and the actual real server. Before a page contacts the server for the requested files he goes to the service worker. The service worker is managing everything between the browser and the server from here. Because the service worker is still available in the browser this process is really fast and most importantly available offline.
A service worker can also be active when the page isn’t. The service worker can download data and also send the user notifications when something happened. A service worker is almost a app on its own. The only difference between native and the service worker is that a native app is by default offline while a service worker is by default online.
So what is a service worker
A service worker is a script that can handle all request before going online. This script runs in the browsers and is for that reason super fast. It handles as a server but it isn’t being served by a server. A service worker can handle offline files and send push notifications to the user. A service worker basically functions as an application in the browser.