Building a progressive web app has now become a web development trend every enterprise wants to follow. And if you aren’t talking about PWAs you are seriously missing out. In recent years, progressive web apps have grown to be the most adopted optimization trick for and a huge selling point of PWAs is that these operate under poor network connectivity or even with no connectivity at all! Big players such as Twitter and Flipboard recently launched their progressive web apps to deliver mobile experiences to users, without requiring them to actually install the app.
PWA’s accomplish this by caching the web app’s assets and also downloading any updates in the background, as and when possible. Another major benefit of PWAs is that they allow web apps to access native app-like features such as push notifications. And they can also be added to the user’s home screen for ease of access. In this article, you will learn how to build a progressive web app using React. So, let’s get started.
Service Workers – An essential element of Progressive Web App with React JS is the Service Workers, which enables the execution of scripts in the background of the web browser. The exact function is to cache and serve the cached files which provide uninterrupted user experience, as a helpful man-in-the-middle between our browser and the network.
In normal web apps, we can only navigate through our website if we are connected to a network, but service workers have changed the game. They cache the web pages along with other resources but not the text, in a separate storage area called CacheStorage. And as soon as the network connectivity is poor or unavailable, the service workers kicks in and fetches the cached pages from the CacheStorage.
For creating a PWA with react JS, the audit tool Lighthouse is perfect for evaluating the resultant PWA. Lighthouse creates audit reports that help you analyze your app with respect to the global standards of PWA performance under emulated mobile conditions. This is what a sample Lighthouse report looks like.
Lighthouse is available as a Chrome extension and also as a CLI. For more information, visit the Lighthouse getting started guide. Basically, it compares your PWA for performance against a collection of modern web best practices refined for a mobile world –
- A network connection is secure
- User can be prompted to Add to Homescreen
- The installed web app will launch with a custom splash screen
- The app can load on offline/flaky connections
- Page load performance is fast
- Design is mobile-friendly
- Site is progressively enhanced
- Address bar matches brand colours
Let’s start with building a PWA with React. The entire process has been divided into four major sections – Creating an app, Service Worker, Converting to PWA, Deploy. Audit reports from Lighthouse are provided along with step-by-step procedures for creating an effective PWA. Remember, the code to build a sample PWA can also be used as boilerplate for further PWA developments.
PWA using React
1. We can create our own SPA app using React. We will scaffold our React using create-react-app. If you don’t have it installed globally in your system, run this command:
2. After this, we create a React app.
3. You’ll find these files created in your react-app folder.
4. In the public folder, the manifest.json records the information (metadata) that will control how your app appears to the user and also define its appearance at the launch.
5. short_name: The name your app will take when added to the Home screen. name: The name Chrome used to prompt the Add to the Home screen, this specifies the name your app will take when added to your Home screen. The prompt goes like this “Add your_app_name to Home Screen”, here the your_app_name is replaced by the value of the name property in your manifest.json. If name is not present short_name will be used. Icons: This specifies the icon displayed along with your app name in your Home screen. start_url: The URL where your app starts so it doesn’t start from a random page or where you left off. display: Here you can customize the browser view. You can hide the address bar and the Chrome browser to make the app look native, make the app go fullscreen, run on its own window. theme_color: The color of the browser toolbar background_color:The color of the splash screen that shows when the app is launched by clicking on its icon in the Home screen. The manifest.json in linked in our public/index.html file:
6. See how %PUBLIC_URL% has been used in the tags above. During the build, it will be replaced with the URL of the public folder, and only the files inside the public folder can be referenced from the HTML. Having a manifest.json is required by Chrome to add your PWA to Home screen. The serviceWorker.js registers our service worker file. You may ask where is the worker file it will be registering? The file will be generated by create-react-app when the app is built, ie when are building for production:
7. The command builds our project and stores it in the build folder.
8. The static folder holds all the js and CSS files. The index.html is our main page that loads all our React files stored in the static/js folder and also our CSS that is stored in the static/CSS folder. We can the service-worker.js file, that’s where all service worker code is stored. The precache-manifest.*.js file holds all the files the service worker caches in an array. We see the manifest.json file, as we already know it tells the browser how our PWA will behave. To see everything play out, we will load the build folder in our browser but first, we need a browser. Install the http-server
9. After this, add start to the scripts section of package.json.
10. Here, we are telling the http-server to serve the files in the build folder. Now run npm run start-sw in your terminal. Navigate to 18.104.22.168:8080 in your Chrome browser.
11. How do we check if the app is a PWA? Simple, we check in the Devtools tab. Open your Devtools and click on Application. On the right tab click on Service Workers.
12. Oops!!! Nothing is there, so therefore our app is not recognized as a PWA. But why? we had service-worker.js and prefetch.*.js files generated. The answer lies in our index.js:
13. See the service worker is not registered. To make our app a PWA we need to change the unregister() call to register()
14. We will rebuild our project, so let’s run the command:
15. Now, reload your browser. You will see service-worker.js appear in your Devtools > Application > Service Worker tab:
16. To see which files have been cached, move to the CacheStorage tab and click on it:
17. See it cached the index.html file, which is our main page, the CSS/JS files, and React logo. It didn’t cache the manifest.json or asset-manifest.json because our page doesn’t it to display its contents. To test whether our app will work when offline. We can simply shut down the server by doing Ctrl + C and running the server again when we want to go online again. It’ll regularly shut down and start oftentimes. We can save ourselves the stress by simply making the browser itself go offline, ie making simulate offline mode so our server will keep running by simply going to Application > Service Worker and clicking on the offline checkbox:
18. A yellow triangle icon will show on the Network tab. If we go to the Network tab, you will see that the offline checkbox is checked:
19. Our browser is now in offline mode. If we reload our browser you will see our page will load without “ error fetching page”, but before we do that make sure you disable your browser cache so we know the browser isn’t serving the page from its cache. You can do that by clicking on the disable cache checkbox in the Network tab.
20. A very important advantage from PWA’s is the home screen accessibility these allow. Now we’ll discuss ways to incorporate the “add to homescreen” experience for your app (favicons, application name displayed, orientation and more). One way to do it is through the Web Application Manifest. Customizing the cross-browser (and OS) favicons involves quite a bit of work, though tools like realfavicongenerator.net have taken a lot of the pain out of the experience.
21. The increased usage of PWA’s has generated a discussion on the “minimum” number of favicons a site requires so it can work in most places. Lighthouse has proposed shipping a 192px icon for the homescreen icon and a 512px one for your splash screen.
22. Moving on, the Web App manifest setup allows you to further access the features of the app installer banners. It paves the way for promoting the native user to install your PWA, if they find themselves engaging with it on a frequent basis. It’s also possible to defer the prompt until a time when a user has a useful interaction with your app. Flipkart found the best time to show the prompt was on their order confirmation page. The Chrome DevTools Application Panel supports inspecting your Web App Manifest via Application > Manifest:
23. This parses out the favicons listed in your manifest and previews properties like the start URL and theme colours.
And just like that, we’re done!
We now have a working base for building a progressive web app with React JS. And with, we’re ready for the future of web applications.
If this article has been helpful to you and if you like to develop your own progressive web app, then contact us at https://webkon.co/contact/