Building Modern, Installable Web Apps with PWAs: The Ultimate Guide

What is a Progressive Web App?

A Progressive Web App (PWA) is a type of application built using standard web technologies, like HTML, CSS, and JavaScript, but with the functionality of a native app. PWAs combine the accessibility of web apps with features usually associated with mobile apps, such as offline support, push notifications, and installability directly from the browser. The main goals of a PWA are to be:

1. Reliable: Fast-loading and accessible, even with unreliable networks.
2. Engaging: Offers features like push notifications, background sync, and smooth animations.
3. Installable: Can be added to a user’s home screen or desktop without needing an app store.

Creating a PWA with a Vite React App

To create a Progressive Web App (PWA) with Vite and React, you’ll use Vite’s faster build process along with a PWA plugin to handle service workers and caching. Here’s a step-by-step guide:

1. Set Up a React Project with Vite

First, create a new Vite project with React:

npm create vite@latest my-app --template react
cd my-app
npm install

2. Install Vite PWA Plugin:

Next, install the vite-plugin-pwa, which simplifies adding PWA features like service workers and a web app manifest:

npm install vite-plugin-pwa

3. Configure the Vite PWA Plugin

In the vite.config.js file, import and configure the PWA plugin. Add the following:

// vite.config.js
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import { VitePWA } from "vite-plugin-pwa";

export default defineConfig({
  plugins: [
    react(),
    VitePWA({
      registerType: "autoUpdate",
      includeAssets: ["favicon.svg", "robots.txt", "apple-touch-icon.png"],
      manifest: {
        name: "YOUR APP NAME",
        short_name: "YOUR NAME",
        description: "SHORT DESC",
        theme_color: "#ffffff",
        background_color: "#ffffff",
        display: "standalone",
        start_url: "/",
        icons: [
          {
            src: "/icon-192x192.png",
            sizes: "192x192",
            type: "image/png",
            purpose: "any"
          },
          {
            src: "/icon-512x512.png",
            sizes: "512x512",
            type: "image/png",
            purpose: "any"
          },
          {
            src: "/icon-144x144.png",
            sizes: "144x144",
            type: "image/png",
            purpose: "any"
          }
        ],
        screenshots: [
          {
            src: "/screenshot-wide.png",
            sizes: "3840x2160",
            type: "image/png",
            form_factor: "wide"
          },
          {
            src: "/screenshot-mobile.png",
            sizes: "2160x3840",
            type: "image/png",
            form_factor: "narrow"
          }
        ]
      },
    }),
  ],
});

Here’s a breakdown of the options:

• registerType: 'autoUpdate': Ensures the service worker updates automatically.
• manifest: Defines the appearance and behavior of your PWA when installed. Adjust details like name, short_name, and theme_color to match your app.
• Icons: Add icons in the public folder (e.g.,public/pwa-144x144.png , public/pwa-192x192.png , public/pwa-512x512.png , public/screenshot-wide.png and public/screenshot-mobile.png).

4. Add Icons to the Public Directory

Make sure to add icon and img files (e.g., public/pwa-144x144.png , public/pwa-192x192.png , public/pwa-512x512.png , public/screenshot-wide.png and public/screenshot-mobile.png) in the public directory as specified in the manifest.

5. Enable Offline Caching and Custom Service Worker Configurations (Optional)

The workbox option in VitePWA allows you to set up advanced caching and offline strategies. To enable specific caching behavior, you can customize the Workbox configuration.

6. Build and Test the PWA

• Development Testing: Run the app in development mode:

npm run dev

• Production Build: PWAs are fully functional in production, so build the app and serve it locally:

npm run build
npm install -g serve
serve -s dist

• Verify PWA Installation:
  • Open the app in Chrome, go to DevTools, and select the Application tab.
  • Look at the Manifest and Service Workers sections to ensure the app qualifies as a PWA.

Now, your Vite + React project is a PWA, complete with service workers, caching, and installability! This setup provides all the benefits of a PWA in a fast Vite-based development environment.