Convert a web application created with React Router v7 to PWA (supports installation only)

⚠️Additional note: vite-plugin-pwa does not work properly with React Router v7

…

I created a web app using React Router v7.

Kindle Unlimited search is difficult to use, so I created a service that displays a list of eligible books by your favorite authors.

I’m improving this little by little, but since visiting the site is cumbersome, I decided to make it a PWA.

environment

The environment of the application converted to PWA is as follows.

{
  "react-router": "^7.1.5",
  "react": "^19.0.0",
  "vite": "^5.4.11",
}
"volta": {
  "node": "23.8.0",
  "npm": "10.9.2"
}

Make it a PWA

Install vite-plugin-pwa.

npm install -D vite-plugin-pwa

Add vite-plugin-pwa to plugins of vite.config.ts.

  plugins: [
    ...
    VitePWA({
      registerType: "autoUpdate", // サービスワーカーを自動的に更新する設定
      manifest: {
        name: "アプリ名",
        short_name: "短縮名",
        description: "アプリの説明",
        theme_color: "#ffffff",
        background_color: "#ffffff",
        display: "standalone",
        orientation: "portrait",
        start_url: "/",
        icons: [
          {
            src: "/icons/icon-192x192.png",
            sizes: "192x192",
            type: "image/png",
          },
          {
            src: "/icons/icon-512x512.png",
            sizes: "512x512",
            type: "image/png",
          },
        ],
        screenshots: [
          {
            src: "screenshots/screenshot1.png",
            sizes: "640x480",
            type: "image/png"
          },
          {
            src: "screenshots/screenshot2.png",
            sizes: "640x480",
            type: "image/png"
          }
        ]
      },
    }),
  ],

With the above description, manifest.webmanifest is generated during build, so read it with app/root.tsx.

Create the following required items.

public/icons/icon-192x192.png
public/icons/icon-512x512.png
public/screenshots/screenshot1.png
public/screenshots/screenshot2.png

test

Since PWA cannot be tested in the development environment, start and check the data built with npm run build. I confirmed that the installation was successful.

I haven’t been able to enjoy all the benefits of PWA, but since the purpose was to install it, I achieved it.

vite-plugin-pwa does not work properly with React Router v7

In the process of converting to pwa this time

 { rel: "manifest", href: "/manifest.webmanifest" }

is added to root.tsx.

If vite-plugin-pwa is functioning properly, this will be done automatically.

The offline cache is not working either, and the only function I can use is to automatically create manifest.webmanifest.

In fact, there was also issue.

Feature Request: Vite PWA Support for React Router 7

# Convert a web application created with React Router v7 to PWA (supports installation only)

environment

Make it a PWA

test

vite-plugin-pwa does not work properly with React Router v7