DEV Community

loading...

Service Workers

danicodes01 profile image daniel knowles ・3 min read

A service worker is a single JS scrip that gets registered with the browser. It stays with the browser if even if there is no connection, this makes it possible for the user to have access to certain information even if they are offline. This is great for PWAs (Progressive Web Applications) because it gives it more of a native app feel.

Service workers are separate from the rest of the code that makes up the app. This means that they cannot directly access the DOM structure. The Service Worker instead talks with pages that it controls through messages sent by the 'Post Message Interface'. Those messages can then interact with the DOM.

Service Workers and Requests

Alt Text

Normally when you search a url, the browser fetches it and the remote server will return the info. When a Service Worker is registered it adds another step. The Service Worker acts as a virtual proxy between the browser and the network. It can intercept a request and determine what to do with it. You can specify wether you want to show the offline version, the remote version, or even show your own customized offline pages.

When using a Service Worker you need to use https, unless you are on a local environment and using a local host. Https uses cryptography to encrypt your request. The 's' stands for secure. If you are using a remote server to deploy you also need to make sure it has https installed and enabled.

So what can i do with Service Workers?

There are multiple things you can do with service workers. Such as Offline Content Loading, push, notifications, and background sync.
Alt Text
Offline loading lets you load a page from a browser cache in case you do not have internet connectivity. This allows you to access previously visited web pages while offline.
Alt Text
A push Notification is a message that pop up on a users device. They are usually used by the App Publisher to advertise some Event. Users can receive these notifications even when they are not connected to the internet. This is a great tool for marketing and advertising, and makes it easy to grab the users attention.

Background Sync lets you defer actions until the user has a stable connection. Let's say you like a friends photo but you do not have a stable internet connection. The browser sync api will defer or hold the post in the cache until connectivity is restored.

Alt Text

Life Cycle

Service Workers have a life cycle. The life cycle of a Service Worker is as follows
a. Register worker
b. Install Worker by using the 'install' event
c. Activate Worker with 'activate' event
Only after all these will it be able to receive
functional events like 'fetch', 'push', & 'sync'

Register Worker

After we create our Service Worker file we need to register it in a separate Js file.
Alt Text
First We make sure the Service Worker is supported
Then we add a event listener to the window object
when the window object loads we register the Service Worker file we created.

Install Event

This is where we call the Install Event. First attach an event listener to the actual worker. We use the install event, followed by a callback with an event parameter. Next we can log a message to the console saying that the Service Worker is installed.
Alt Text
The install event is also where we will handle caching our assets. First we take the event handler and tell it to wait until the promise is fulfilled.
We use the caches storage api to pen a cache, and cache to cache object with the addAll() method. With this process we are actually adding our files to the cache.

Activate Event

Before we do the fetch event we use our activate event.
Alt Text
The Activate Event is also where we can handle removing any unwanted caches. Under the console.log we can tell the event to wait. We then loop through the caches with a condition, if the current cache is not the cace we are looping through then we delete it.

Finally we can call our Fetch Event
Alt Text

Discussion (0)

Forem Open with the Forem app