How to Build a PWA With React Router and Service Workers

Progressive Web Apps (PWAs) combine the best of web and mobile apps, delivering a smooth, offline-capable user experience. Building a PWA with React Router and Service Workers can enhance your web application's accessibility and reliability. This guide will walk you through the essential steps needed to create your own PWA using these powerful tools.

Step 1: Setting Up Your React Application

To get started, ensure you have Node.js and npm installed. You can create a new React application by using the Create React App CLI:

npx create-react-app my-pwa

Navigate into your newly created project directory:

cd my-pwa

Step 2: Installing React Router

Next, you need to add React Router to your project. React Router will help manage navigation within your PWA:

npm install react-router-dom

Step 3: Setting Up Service Workers

Service Workers are crucial for enabling offline capabilities in your PWA. Create React App comes with a service worker setup, but you need to finalize it:

Open the file src/index.js.
Find the line that registers the service worker and change:

serviceWorker.unregister();

serviceWorker.register();

This enables the service worker functionality for your app.

Step 4: Building the Basic PWA Structure

Now, let's create a simple structure for your PWA:

Create two components: Home.js and About.js in the src folder.
Update App.js to include routes using React Router.


// src/App.js
import React from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import Home from './Home';
import About from './About';
function App() {
  return (
    
      
        
        
      
    
  );
}
export default App;

Step 5: Crafting Your Manifest File

A PWA requires a manifest file to define how your app appears to users. Create a file named manifest.json in the public directory:

{
  "short_name": "MyPWA",
  "name": "My Progressive Web Application",
  "icons": [
    {
      "src": "icons/icon-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "icons/icon-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ],
  "start_url": ".",
  "display": "standalone",
  "theme_color": "#000000",
  "background_color": "#ffffff"
}

Don't forget to link this manifest file in your public/index.html:

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

Step 6: Testing Your PWA

To test your PWA, first run your application:

npm start

After your app is running, open your browser and navigate to http://localhost:3000. Use the Chrome DevTools to check if the service worker is correctly registered by going to the "Application" tab.

Step 7: Deploying Your PWA

To deploy your PWA, build it using:

npm run build

This command creates an optimized production build in the build folder. You can then host this folder using services like Netlify, Vercel, or GitHub Pages.

Conclusion

With these steps, you have successfully built a Progressive

How to Build a PWA With React Router and Service Workers