React Progressive Web Apps — Part 1 – Gethyl George Kurian – Medium

  • How to create your first PWA app and/or convert your existing app into PWA.In this example I created new React app with PWA in mind, but the idea should be quite similar if you have to convert your existing app into PWA.You need to understand the lifecycle of a SW, which are listed below, and you can read more about it in this link.Register the Service Worker(SW)If a browser supports SW, then the service worker will be registered.
  • Here is the code snippet from index.htmlRegister SW if browser supportsIf the above registration step was successful, then the SW file will be downloaded.
  • This would be ideal place to clean up the cache to remove any cache item which is no longer required maybe.Apart from the above lifecycle of SW, if you noticed in the earlier section, I mentioned to also go through the Fetch API.
  • Well that is because SW can intercept the fetch event, and this will help if you want to cache something from the network.Updating Cache / Making network calls — Fetch eventSW listens to fetch event, and in our example since we handle only the basic case of caching only the static files, you can see below, when there is a fetch event within the SW’s scope (Refer the registration step to see the scope),it is intercepted, and we checked if request has a response already in the cache, then we return the response from cache.
  • Adding your app to the Home Screen.Perfect!Step 1 above showed you the importance of SW and how it helps to make your app to be offline first.Step 2, tells you how you can run it from your virtual device.And now let us make it feel a bit more like an app, but letting you add this to your homepage, so that you can launch it anytime later without the need to remember the url or bookmark it.This is where you need to under about web manifest json file, which was one of the topic I mentioned would be good to know.

Progressive Web Apps(PWA) are gaining a lot of popularity these day, and with one of the updates this year (2017), the Create React App creates your project by default as PWA. If you haven’t heard of…

@ReactDOM: React Progressive Web Apps — Part 1 #progressivewebapp #reactjs #offlinefirst #react…

If you haven’t heard of PWA before and don’t know what it is about, then this is a good read before you proceed further.

2. Now, with No Throttling, you can see that the contents are loaded + our service worker is registered, installed and activated (activated only if there is no other SW currently running). see here

3. And now, if I set back throttling — offline, then you can see this time when I refresh, I don’t get the browser offline screen, but instead I see my app. see here

This article is going to be less of React and more regarding PWA. I have created a very simple React app which will fetch all my github repos and list them. Yup that’s it 🙂

It’s a basic React web app which gives an app like experience and help you understand the offline first experience better.

1. How to create your first PWA app and/or convert your existing app into PWA.

In this example I created new React app with PWA in mind, but the idea should be quite similar if you have to convert your existing app into PWA.

You need to understand the lifecycle of a SW, which are listed below, and you can read more about it in this link.

As per the official documentation:

The service worker is immediately downloaded when a user first accesses a service worker–controlled site/page.

After that it is downloaded every 24 hours or so. It may be downloaded more frequently, but it must be downloaded every 24h to prevent bad scripts from being annoying for too long.

But during development since I was restarting the dev-server I believe the download was more frequent.

Service Worker is event driven, and that is why you will notice that during the install/activate events, we listen on the event to perform some task.

During install would be an ideal time to pass the files you wish to cache. Do note that while a new version of the SW might get installed, while an old one is still active and used by clients. Therefore don’t attempt any tasks in install phase that could effect the previous version of SW which is active.

Next phase after the installation. This would be ideal place to clean up the cache to remove any cache item which is no longer required maybe.

Apart from the above lifecycle of SW, if you noticed in the earlier section, I mentioned to also go through the Fetch API. Well that is because SW can intercept the fetch event, and this will help if you want to cache something from the network.

SW listens to fetch event, and in our example since we handle only the basic case of caching only the static files, you can see below, when there is a fetch event within the SW’s scope (Refer the registration step to see the scope),

it is intercepted, and we checked if request has a response already in the cache, then we return the response from cache. Else we make request to the network and provide that response.

This is to keep it really simple, but there are quite a few strategies which can be adopted for cache/network based on the scenarios.

And this is where I would highly recommend you to read this offline cookbook which is super awesome and will help you understand the different strategies you can use for cache/network.

2. How to test your localhost web app on Android Virtual Device.

Great! Now you have setup everything required for your service worked to run. And if you are using this example, all you have to do is

But what if you want to test your localhost on your Android Virtual Device?

Just follow this easy step:-

And then you are good to go 🙂

from google chrome in your Android Simulator 😉

3. Adding your app to the Home Screen.

Perfect!

Step 1 above showed you the importance of SW and how it helps to make your app to be offline first.

Step 2, tells you how you can run it from your virtual device.

And now let us make it feel a bit more like an app, but letting you add this to your homepage, so that you can launch it anytime later without the need to remember the url or bookmark it.

in the example project I have shared.

And you can see how it helps to add the app to home screen

4. Using lighthouse to generate report of your webpage

This another really cool tool which I stumbled upon after reading and going through couple of blogs and tutorials on PWA. I would highly recommend you to use it to generate a report of you webpage.

Here is an example of this github example.

When I first ran the report, the scores where much worse, and I went through the suggestions provided against the areas the app scored bad and did some fine tuning.

React Progressive Web Apps — Part 1 – Gethyl George Kurian – Medium