Build a Realtime PWA with React
Tags: JavaScript, React, Pwa, Cryptocurrency

Building a PWA with Create React App

We’re going to be building a realtime PWA with the help of create-react-app.

It’s common for developers who are just getting into React to have a difficult time getting set up and configuring their apps. create-react-app eliminates all of that by allowing developers to build React apps with little or no build configuration. All you have to do to get a working React app is to install the npm module and run a single command.

More importantly, the production build of create-react-app is a fully functional Progressive Web Application. This is done with the help of the sw-precache-webpack-plugin , which is integrated into the production configuration.

Let’s get started with building the React app. Install the create-react-app tool with the following command:

npm install -g create-react-app

Once the installation process has been completed, you can now create a new React app by using the command create-react-app pushercoins .

This generates a new folder with all the files required to run the React app and a service worker file. A manifest file is also created inside the public folder.

The manifest.json file in the public folder is a simple JSON file that gives you, the ability to control how your app appears to the user and define its appearance at launch.

We notify the app of the manifest.json file by linking to it in line 12 of the index.html file.

<link rel="manifest" href="%PUBLIC_URL%/manifest.json">

Next up, let’s go through the registerServiceWorker.js file and see how the service worker file works. The service worker file can be seen in the src folder on GitHub.

The service worker code basically registers a service worker for the React app. We first check if the app is being served from localhost via the isLocalhost const value that will either return a truthy or falsy value. The register() function helps to register the service worker to the React app only if its in a production mode and if the browser supports Service workers. The unregister() function helps to unregister the service worker.

Let’s find out if the service worker really works. To do that we’ll need to prepare the React app for production as the service worker code only works in production mode. The npm run build command helps with that.

This command builds the app for production to the build folder and correctly bundles React in production mode and optimizes the build for the best performance. It also registers the service worker. Run the command and the output from the terminal should look like something below:

We get to see the size of the files in our React app and most importantly how to run the app with the aid of a static server. We are going to use the serve npm package to, wait for it, serve(😀) the React app. Therefore, use the following commands to install serve on your computer and also set up a static server for the app:

npm i serve -g serve -s build

Your application should be up and running at http://localhost:5000. So how do we check if a site is a PWA? We can do that by checking the service worker section in the ‘Application’ tab in the Developer tools.

We could also check by using the Lighthouse tool. Lighthouse is an open-source, automated tool for improving the quality of web pages. It can perform audits on performance, accessibility and Progressive Web Apps. Lighthouse is currently available as an extension on Google Chrome only and as an npm package.

I used the Lighthouse extension to generate a report for the newly created React app in production and got the following result.

The React app got a score of 91 out of 100 for the PWA section, which isn’t that bad. All audits were passed but one related to HTTPS, which cannot be implemented right now because the app is still on a local environment.

Now that we know how to check if an app is a PWA, let’s go ahead to build the actual app. As we’ll be building this PWA with React, it’s very important that we think in terms of React components.

Therefore, the React app would be divided into three components.

History.js houses all the code needed to show the past prices of BTC, ETH, and LTC. Today.js houses all the code needed to show the current price of BTC, ETH, and LTC. App.js houses both History.js and Today.js

Alright, let’s continue with building the app. We’ll need to create two folders inside the src folder, Today and History . In the newly created folders, create the files Today.js , Today.css and History.js , History.css respectively. Your project directory should look like the one below.

Before we get started on the Today and History components, let’s build out the app shell.

An app shell is the minimal HTML, CSS and JavaScript required to power the user interface and when cached offline can ensure instant, reliably good performance to users on repeat visits. You can read more about app shells here.

Open up the App.js file and replace with the following code:

The App.css file should be replaced with the following:

We’ll also be using the Bulma CSS framework, so add the line of code below to your index.html in public folder: