Author: Anna Morawska
Free live lesson
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.
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?
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.
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
It's provided by the
All we have to do is to open src/index.js file and change one line. Change serviceWorker.unregister() to
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.
Do you see this? Our nice app icon is staring at us from the smartphone's home screen!
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
Previous lesson Next lesson
Spread the word: