React Progressive Web Apps — Part 1

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.

Edit August 28th — Part 2 of this article has been published

React Progressive Web Apps — Part 2

What is Progressive Web App?

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.

But to summarise:

1. Works for every user irrespective of the browsers.
2. Responsive, I guess need no further explanation on that.
3. Has to be served only via HTTPS (except for local host), thereby making it secure
4. It gives an app like experience without the need of approvals and uploads to various app stores. You add the app from url directly.
5. Easily installable by just adding it to your homes screen, and then using it as any other app.
6. Offline first experience to allow users to use the app on no or minimal connectivity.

And here are few useful resources which I think you should look at too.

• Progressive Web App Training by Google.
• Understand the Service Worker & Cache Storage APIs. This will help you understand the code snippet on how offline first experience is done.
• Read about Web App Manifest.
• And also about Fetch API.

I must say, I love the documentation from Mozilla Foundation. I refer their pages for information on APIs and documentations related to JS all the time :)

Video of the PWA app I created

Video makes it much easier than writing and long story and boring you guys.

The above video can be split into 4 parts:-

1. The first refresh, with the throttling set to offline, you can see that no content was loaded.

Well this is how our app would normally behave when it doesn’t have connectivity.

And this is exactly what we are trying to overcome.

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

And this is exactly what we are trying to achieve with the principles of PWA to make an offline first experience

4. Adding the app to our homescreen. see here

What is covered in Part 1?

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.

So what will be your take away from this article?

1. How to create your first PWA app and/or convert your existing app into PWA.
2. How to test your localhost web app on Android Virtual Device.
3. Adding your app to the Home Screen.
4. Using lighthouse to generate report of your webpage by checking against the best practices for web app development. This is a really cool tool to use.

So let us look at each of the above points in detail.

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.

• Register the Service Worker(SW)

If a browser supports SW, then the service worker will be registered. Here is the code snippet from index.html

Register SW if browser supports

• Download the SW.

If the above registration step was successful, then the SW file will be downloaded. In our case myServiceWorker.js.

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.

• Install the SW.

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 affect the previous version of SW which is active.

• Activate the SW.

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.

• Updating Cache / Making network calls — Fetch event

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

yarn start

And voila! you can access your app on localhost:8080.

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

Just follow this easy step:-

• Bring up your Android Virtual Device.
• Once your AVD is ready, in Chrome developer tools > Remote Devices > Settings as you see above, put the port forwarding as shown above.

And then you are good to go :)

Now you can open localhost:8080 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.

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. Well if you didn’t read it earlier, you can click this link to know more about it. And also look at myManifest.json 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

Edit on 19th Aug 2017: Thanks to Jof Arnold, for informing that lighthouse is now available under Chrome Dev Tools > Audit tab. (From Chrome 60, so you don’t need to add it as an extension anymore).

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.

Webpack run on dev mode yarn start

Webpack dev server with prod build yarn start:PROD

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.

Github repo

You can refer to the source code in the below git repo.

Gethyl/ReactPWA

Conclusion

My idea is to run this article on PWA like a series of articles starting from the very basic React PWA which was covered here and as we progress create a more complex React app.

Provided I find time 😛

Why did I choose to write about PWA this time? Well I noticed that many are still not aware about PWA and realise the huge potential behind it.

PWA is gaining popularity don’t wait and miss the tide, but jump onto it with your surfboard ;-)

I hope this article is of good use for you.

Until my next article…..

Happy Learning!! 🖒