{
  "$type": "site.standard.document",
  "canonicalUrl": "https://blog.nove-b.dev//posts/make-react-router-v7-app-pwa",
  "path": "/posts/make-react-router-v7-app-pwa",
  "publishedAt": "2025-03-09T00:00:00.000Z",
  "site": "at://did:plc:2atly2y5kfyjcj5zap6pv4wd/site.standard.publication/3mmxeqr2tcb2k",
  "tags": [
    "React Router v7",
    "PWA",
    "vite-plugin-pwa"
  ],
  "textContent": "⚠️追記：vite-plugin-pwaはとReact Router v7で正常に機能しません\n\n...\n\nReact Router v7でウェブアプリを作成した。\n\nKindle Unlimitedの検索が使いにくいので、好きな作家の対象本を一覧表示するサービスを作った\n\nこれを少しずつ改良しているんだけど、サイトに訪問するのが面倒なのでPWAにすることにした。\n\n環境\n\nPWAにしたアプリの環境は下記の通り。\n\nPWAにする\n\nvite-plugin-pwaをインストールする。\n\nvite.config.tsのpluginsにvite-plugin-pwaを追加する。\n\n上記の記述でビルド時にmanifest.webmanifestが生成されるのでそれをapp/root.tsxで読み込む。\n\nで、必要となる下記を作成する。\n\nテストする\n\nPWAは開発環境でテストできないので、npm run buildでビルドしたデータを起動して確認する。で、無事にインストールできることを確認した。\n\nPWAのすべては享受できていないけど、インストールするのが目的なので達成した。\n\nvite-plugin-pwaはとReact Router v7で正常に機能しません\n\n今回pwa化する過程で\n\nをroot.tsxに追加している。\n\nvite-plugin-pwaが正常に機能していればそこも自動でやってくれる。\n\nオフラインのキャッシュも動いていないし、ただmanifest.webmanifestを自動で作ってくれるという機能しか使えてない。\n\n実際にissueもあった。\n\nFeature Request: Vite PWA Support for React Router 7",
  "title": "React Router v7で作成したウェブアプリをPWA(インストールに対応のみ)にする"
}