A Progressive Web App (PWA) is a more dynamic web application that can run as a standalone. It offers benefits such as:
\n\n\nYou can learn more about the differences between native apps and PWAs here.
\n
In this article, you're going to learn how to build a PWA using React. As React is a popular web framework, this article starts by going over the setup, development process, and spinning it up to see how it looks. For this example, you'll create a simple Counter Page that simply adds or subtracts a number based on button controls.
\nBefore you can begin coding, you need to set up your project. Let's start by ensuring you can use React (if you're already familiar with coding in React, you can probably skip this section!). You need to use Node.js with any development using web frameworks such as Angular, React, or Vue -- especially if you wish to use libraries and packages to assist in developing your project.
\nA popular utility in using such packages and libraries is the Node Package Manager, simply referred to as \"npm\". This utility allows you to install/uninstall packages, start your React application build using webpack, and many more other features. For your needs, you can take advantage of npm to create a React application with a PWA template, which allows you to code right away. Whenever you start building a React app, you can use templates offered by Facebook using the 'create-react-app' command with npm.
\nLet's build the PWA starter app by running the following command:
\nnpx create-react-app name-of-our-PWA-app --template cra-template-pwaThe above command can be broken down as follows:
\nHitting 'Enter' after this command should initiate the build of your starter PWA React application. You should see a stream of prompts in your command-line interface. It may take a few minutes, but if you can see this screen after the command, you have created the project.
\nHere, you can see the following folder structure of your application so far. There are a few files that you shall pay attention to when it comes to PWA's:
\nservice-worker.js: This is a script that runs in the background once your application starts running. The service worker makes sure that you can use your React application offline and handle multiple requests for the UI. (learn more here)manifest.json: This is basically a configuration file that lists different properties that you can customize specifically for progressive web applications. It can determine such things as icons, names, and colors to use when the application is displayed.serviceWorkerRegistration.js: This file does the job of telling whether or not your service worker was successfully registered. If you look into the file, you'll notice multiple console logs that will be displayed depending on the status of the service worker once you deploy your application.For your project, you'll build a simple Counter component, similar (if not exactly the same) to the example provided in the React docs: Hooks State
\nLet's start by creating a Counter component. Here, it is named as Counter.jsx and placed in a components folder.
To speed things up, you can copy and paste the following code in your specific files. Here, it is built out as a simple page and some generic stylings for the component.
\n//Counter.jsx\nimport React, { useState } from 'react';\nimport Button from '@mui/material/Button';\n\nfunction Counter(props) {\n let [count, setCount] = useState(0)\n\n function increment() {\n setCount(count + 1);\n }\n\n function decrement() {\n setCount(count - 1);\n }\n\n return(\n <div style={{textAlign: 'center'}}>\n <h3>Counter App</h3>\n <div>\n <Button variant="contained" onClick={increment}>+</Button>\n <span> {count} </span>\n <Button variant="contained" onClick={decrement}>-</Button>\n </div>\n </div>\n );\n};\n\nexport default Counter;Note: Here, Material UI's Button component is used. You don't need to and can substitute the Button component with:
\n<button onClick={increment}>+</button>To use Material UI, run the following npm commands:
\nnpm install @mui/material\nnpm install @emotion/react @emotion/styled //these are additional dependencies for me to get Material UI working with the Counter componentIn your command prompt, entering 'npm start' can spin up your application to a specific http://localhost url. You can start to see what work you've done so far.
With these simple components, let's try to spin this application up and ensure it is working.
\nEnter the command:
\nnpm startThis starts the application at a set http://localhost URL. Once the dev server is working and live on the command prompt, go to the URL to view the application. You should see something similar to this:
Now, it's all good and ready to have the app live and working, but more interested in the PWA aspect.
\nFocus back on the index.js file. Make the following change:
// If you want your app to work offline and load faster, you can change\n// unregister() to register() below. Note this comes with some pitfalls.\n// Learn more about service workers: https://cra.link/PWA\nserviceWorkerRegistration.register(); //change the service worker registration from 'unregistered' to 'registered'Essentially, changing the service worker from unregistered to registered will allow you to utilize the app even when it's offline, a key benefit when it comes to PWAs. Check Google's explanation on this topic for more information: Service Worker Registration
\nWith the PWA files setup, in order to view the difference, you can deploy your application to a static server using the serve package that will serve your application to localhost. In a nutshell, make sure you have the serve package by installing, building the application again, and using serve to deploy the application:
npm install serve\nnpm run build\nserve -s build //if you encounter an error with this command, try 'npx serve -s build'Once you use the serve command, you should see the following message, having your application deployed to http://localhost:5000. It automatically adds the URL to your clipboard as well for quick pasting in your browser.
After registering your service worker from In the section above, you can see If you hit the '+' symbol on the right side of the URL ba,r you can install your PWA, just as done here. Use Workbox Lighthouse for testing the capabilities of your PWA: Lighthouse You've learned about what PWAs are and how to build a PWA with React. If you want to quickly add user registration and authentication to your React PWA, you can use LoginRadius. It eliminates the burden of building and maintaining user authentication from scratch and helps you focus entirely on building your app's core features.index.js, you should be able to see it running in the Application tab. Inside that tab, on the left side you should see a Service Workers section. From here, you can see for http://localhost:5000. You have a Service Worker from your service-worker.js file and is activated/running.Manifest -- opening that should show you the relevant details you listed from your manifest.json files.Conclusion
\n