HTTPS and Service workers

Author: Anna Morawska

-

HTTPS & Service workers

Let's talk about the last two requirements that we need to meet before our app becomes installable - https and service workers. As you will see, those two elements are tightly connected.

Install baner

What is a service worker?

A service worker is a type of web worker, an exciting concept which has opened modern browsers to the world of offline experiences. In shorts, it is a script that runs on a separate thread, independently from the website. What does it mean?

When you took your first steps into the world of javascript, you probably saw how infinite loops in your code affected the UI - they blocked the main thread and then the UI freezed.

Service workers or in general, Javascript workers run in a thread separate to the browser thread. They work independently. You can think of it as additional computing power, to which you can delegate some heavy-lifting operations (which otherwise would reduce your website's performance) or tasks which should continue to run even when a user closes the browser.

Well, it is unlikely you would like to run some infinite loops there, but it's a perfect place for scripts which take care of things such as push notifications or offline access.

A service worker is a specific type of Javascript worker, which sits between the browser and the network and act as a proxy server. It can intercept requests made by the website and redirect them to the cacher. That enables us to use assets previously saved in the browser memory, so no internet connection is needed.

However, before we get too excited, let's talk about their drawbacks.

As it has been mentioned before, this is a new technology, so it's only supported by modern browsers. Also, the power of service workers comes with a risk, that they can be used for evil purposes. That's why they are restricted to running across HTTPS.

During development, you'll be able to use service worker through localhost (we can assume, you don't want to hack yourself, do you?). That said, to deploy it on a site you'll need to have HTTPS setup on your server, for security reasons.

Service Workers & CRA

Enough talk, let's get to work! Open you project directory and ... wait, we already have there a file called serviceWorker.js. It's provided by the creacte-react-app boilerplate.

All we have to do is to open src/index.js file and change one line. Change serviceWorker.unregister() to


            serviceWorker.register();
          

We have already deployed our applications to Firebase Hosting, so we also don't need to worry about HTTPS - our domain is already HTTPS-certified. So let's update our hosted app:


            npm run deploy
          

Now, let's test it. If you open your website, after a few seconds you should see an install banner. Install the app.

Install baner

Do you see this? Our nice app icon is staring at us from the smartphone's home screen!

Homescren View

In the next lesson, we will make our application work offline

Something doesn't work for you? Then check the code for this lesson in our repository


Rate this lesson

Previous lesson Next lesson

Spread the word:
Do you need help? Use our support forum

About the author