Progressive Web App(PWA) with React

Progressive Web App(PWA) with React

Shittu Olumide Ayodeji's photo
Shittu Olumide Ayodeji
·

6 min read

Have you ever wondered how you can browse through your website offline and still get the best out of it on your device or computer? Progressive Web Application (PWA) is a web application that takes the best from native and web apps.

On one side, it offers an offline mode, access to geolocation, push notifications, and adding to the home screen. Earlier, we could see these options only in native apps. On the other side, PWAs function like any regular websites.

A significant benefit of PWA technology is a huge ecosystem of tools and frameworks for web development. Besides, now you will have only one cross-platform application. As a result, its deployment and maintenance are getting much easier and faster. Let me show you how to install a progressive web app. Well, the procedure looks the following way:

  • If you are a smartphone owner, you need to find an ‘Add to Home screen’ button (check notifications provided by the website or the browser settings).

  • If you use a desktop, proceed to the address bar and click on the install button on the right.

Foundations of PWA development

So what makes progressive web applications so powerful? To answer this question, let’s take a closer look at the technologies that lie at their core. These are as follows:

Service workers The service worker is code processed by your browser in the background to ensure work in the offline mode for web applications.

Web manifests Web app manifest is basically a JSON file defining how your progressive web application will look like.

Application shell This key element of PWAs makes fast performance possible. Besides, it is vital for progressive web apps with dynamic content and fixed navigation.

Creating a PWA with React?

Below you can see a thorough guide on PWA development. With this manual, you will be able to build your first React progressive web application.

Step 1: Build a simple React app We will use a tool called Create React App (or CRA). It is a convenient environment, especially if you have not created PWAs with React before. With its help, you can use the latest JavaScript functionality with built-in Babel and webpack. It is the reason why you no longer need to worry about bundling and transpiling required for your application to be shipped to the browsers.

```npx create-react-app cra-pwa


Here, npx is a command-line tool for running npm packages. The command create-react-app cra-pwa creates the app called ‘cra-pwa’. After mere seconds, you get a bare-bones React app in the cra-pwa directory.
f you need to run an app in the development mode, type this command:

```npm start

You can also open localhost:3000 for viewing it in your browser.

Step 2: Install a Service Worker

So, CRA offers you all the tools for building a progressive web application with React. One of your primary tasks is to make a React PWA runnable offline. For this purpose, you need to configure the auto-generated service worker file or, in other words, register it.

There is the index.js in the directory of your newly created project. You need to open it and find the following code snippet:

```// If you want your app to work offline and load faster, you can change // unregister() to register() below. Note this comes with some pitfalls. // Learn more about service workers: bit.ly/CRA-PWA serviceWorker.unregister();



As you can see, the serviceWorker has not been registered yet. Your next task is to change the unregister() call to register().
Now the process of creating a progressive web application with a service worker using React became clearer for you.

## Step 3: Configure the Web App Manifest
Let’s proceed to set up the web app manifest for your PWA. Its location is in the manifest.json file in the public directory. Now you have to edit the metadata responsible for the look of your app.
When created, your manifest file will look the following way:


```{
 “short_name”: “cra-pwa”,
 “name”: “cra-pwa”,
 “icons”: [
  {
    “src”: “/android-chrome-192x192.png”,
    “sizes”: “192x192”,
    “type”: “image/png”
  },
  {
    “src”: “/android-chrome-512x512.png”,
    “sizes”: “512x512”,
    “type”: “image/png”
  }
 ],
 “start_url”: “/”,
 “theme_color”: “#F4BD42”,
 “background_color”: “#2B2929”,
 “display”: “standalone”,
 “scope”: “/”
}

Let’s discuss the meaning of the main manifest attributes:

  1. short_name: It defines the name of your application, which is used within the icons, similar to the users’ home screens or launchers.
  2. name: This is the name displayed in the app stores or browsers on startup screens and prompts. In case name property is omitted, short_name is displayed.
  3. icons: This is the set of icons (or just one icon), displayed on the users’ home screens, launchers, task switchers, splash screens, etc.
  4. start_url: The URL of the page of your application that users can view on the startup.
  5. display: This property answers for the browser view. The app can put away the address bar, run in the new window, go fullscreen, etc. Below there is the list of the attributes that can be used for it:
  6. fullscreen: With this option, your app can be opened without any browser UI and occupy the full display of users’ devices.
  7. standalone: This option allows users to run the app in the new window, just like a native app. It will also hide the browser UI components, such as an address bar.
  8. minimal-ui: This option reminds the previous one. However, it comes with a minimal set of browser UI, including back and reload buttons.
  9. browser: This option allows for the regular browser experience.
  10. theme_color: This property defines the color of the toolbar in your application.
  11. background_color: The color of the splash screen showed when users click on the app icon on their home screens.​

A splash screen is a graphical element displayed when your app is launched. It is a window with your application’s name and logo. It also uses the background color you have chosen earlier. The splash screen is generated by the Chrome browser on the basis of the specific properties in the web manifest:

background_color;
icons.

When it comes to icons, Chrome will set the icon that the screen resolution in the most automatically. As a rule, icons having the resolution of 192px and 512px will be suitable.

However, if your logo requires adapting to as many devices as possible, additional icons can be used. Finally, to make your web manifest file work, add it to the pages of your web app. Check the example below to do this the right way:

```


More information about adjusting your PWA, you can find in the Web App Manifest guide prepared by the World Wide Web Consortium.

## Step 4: Test your app
We have discussed the process of creating a React PWA. The time has come to talk about testing your progressive web app.
If you need to run your app in the production mode, enter the following commands:

```npm run build
npx server build

Your application has been built, and now you can test it. For this purpose, you can use the checklist on PWA provided by Google. In addition, you can access your PWA using Lighthouse. You can find this instrument in the namely tab of Chrome DevTools.

Follow the steps below to check performance, accessibility, and PWA compliance for your app.

Step 1. Open Chrome DevTools by choosing the ‘Inspect’ option from the right-click menu on the page that requires inspecting. Alternatively, the following keyboard shortcuts: Command + Option + C (for macOS) or Control + Shift + C (for Windows, Linux, Chrome OS) can be used.

Step 2. Proceed to the Lighthouse tab. Press the ‘Generate report’ button. When generating a Lighthouse report, make sure you have checked the ‘Progressive Web App’ box.

As soon as auditing is finished, you will receive the score together with a list of criteria. They will affect your app’s performance in different situations.

JavaScriptPWA