Posted inDevelopment

ReactアプリをプロフェッショナルなPWAへ：Service Workerから高度なオフライン戦略まで

Development tutorial - IT technology blog
Development tutorial - IT technology blog

なぜPWAはもはやオプションではなく、必須なのか？

不安定なネットワークは、ユーザー体験における最大の敵です。実際、読み込みに3秒以上かかると、50%以上のユーザーが離脱すると言われています。エレベーターの中や電波の弱い場所で、アプリが真っ白な「インターネット接続がありません」というエラー画面を表示した瞬間、ユーザーの信頼を大きく損なうことになります。

PWA（Progressive Web App）こそがその解決策です。Webアプリをスマートフォンのホーム画面に直接インストールし、プッシュ通知を送信し、オフラインでもスムーズに動作させることができます。以前、私は国境付近の倉庫管理プロジェクトをPWA for Reactで救ったことがあります。3Gの電波が1〜2本しか立たない環境でしたが、データキャッシュとバックグラウンド同期（background sync）のおかげで、従業員は1バイトのデータも失うことなく、サクサクと入力作業を行うことができました。

ReactにPWAを統合する3つの道

導入にあたって、通常は以下の3つの選択肢があります。それぞれにメリットとデメリットがあります。

1. Create React App (CRA) の古いテンプレート

以前は、--template cra-template-pwaコマンドが標準でした。しかし、現在CRAは非推奨（deprecated）となっています。CRAでWorkboxの設定をカスタマイズしようとすると、非常に制限が多く、行き止まりに迷い込むようなものです。

2. Service Workerを自作する（ハードコア）

この方法では、installからfetchまで、ロジックを100%制御できます。しかし、「永久キャッシュ」という極めて大きなリスクが伴います。コードを1行間違えるだけで、ユーザーが永遠に古いバージョンに閉じ込められてしまう可能性があります。私もかつてこのミスを犯し、お客様に電話で手動キャッシュ削除を案内するという苦い経験をしました。

3. Vite PWA Plugin（最適な選択肢）

プロジェクトでViteを使用しているなら、vite-plugin-pwaが最適解です。Workboxがパッケージ化されており、わずか5〜10分の設定でPWAを導入できるだけでなく、高いカスタマイズ性も維持されています。

ViteでPWAを実装する3ステップ

すでにViteで作成されたReactプロジェクトがあることを前提に進めます。

ステップ1：インストール

npm add -D vite-plugin-pwa

ステップ2：アプリの核となる設定 (vite.config.ts)

vite.config.tsファイルを開き、Manifestの設定を追加します。これはスマートフォンがWebサイトを本物のアプリとして認識するための情報です。

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.ico', 'apple-touch-icon.png', 'mask-icon.svg'],
      manifest: {
        name: 'React Pro App',
        short_name: 'ReactPWA',
        description: 'オフライン体験を最適化したアプリ',
        theme_color: '#ffffff',
        icons: [
          {
            src: 'pwa-192x192.png',
            sizes: '192x192',
            type: 'image/png'
          },
          {
            src: 'pwa-512x512.png',
            sizes: '512x512',
            type: 'image/png',
            purpose: 'any maskable'
          }
        ]
      }
    })
  ]
})

ヒント： purpose: 'any maskable'プロパティを忘れないでください。これがないと、Androidでのアプリアイコンの周囲に不格好な白い縁が表示され、プロフェッショナルさに欠けてしまいます。

ステップ3：Service Workerの有効化

main.tsxファイルでService Workerを登録し、ブラウザがリソースのキャッシュを開始できるようにします。

import { registerSW } from 'virtual:pwa-register'

const updateSW = registerSW({
  onNeedRefresh() {
    if (confirm('新しいアップデートがあります。再読み込みしますか？')) {
      updateSW(true)
    }
  },
  onOfflineReady() { console.log('アプリがオフラインで動作する準備が整いました！') },
})

オフライン戦略：キャッシュでデータを台無しにしないために

静的ファイル（CSS、JS）のキャッシュだけでは不十分です。APIデータについては、Stale-While-Revalidate戦略を推奨します。

この仕組みは非常にスマートです。アプリはまずキャッシュから古いデータを取得して即座に表示し（読み込み速度の向上）、その後バックグラウンドでAPIを呼び出して最新データをキャッシュに更新します。ユーザーはローディング画面を待つことなく、即座にレスポンスを得ることができます。

APIのためのWorkbox設定

workbox: {
  runtimeCaching: [
    {
      urlPattern: ({ url }) => url.pathname.startsWith('/api'),
      handler: 'StaleWhileRevalidate',
      options: {
        cacheName: 'api-cache',
        expiration: {
          maxEntries: 50,
          maxAgeSeconds: 86400 // 24時間キャッシュ
        }
      }
    }
  ]
}

血の滲むような教訓：回避すべき「落とし穴」

多くの実戦プロジェクトを経て得られた、バグ修正で徹夜しないための3つの教訓を共有します。

  • Header Cache-Control: サーバー上のsw.jsファイルに対して、決して長いmax-ageを設定しないでください。このファイルが強力にキャッシュされてしまうと、ユーザーにアップデートを配信できなくなります。
  • iOSの悩み： iPhoneのSafariはChromeとは挙動が大きく異なります。ブラウザのDevToolsだけを信じるのではなく、ngrokなどを使って実機で直接テストしてください。
  • ストレージ容量： 何千枚もの画像を無闇にキャッシュしないでください。容量制限（デバイスによりますが通常50MB〜100MB）を超えると、ブラウザによってキャッシュが自動的に全消去されることがあります。

Lời kết

PWA化は、単にホーム画面にアイコンを表示させるためだけのものではありません。それはユーザーの時間を尊重し、ネットワークインフラが不十分な環境でも情報へのアクセスを保証するという、開発者の姿勢の表れです。皆さんの実装が成功することを願っています。もし「奇妙な」エラーに遭遇したら、ぜひコメント欄で議論しましょう！

Share:
Tags: