Rails 8 で PWA を実装する ── マニフェストと Service Worker の基本

Rails 8 では新規アプリに app/views/pwa/manifest.json.erb と service-worker.js が生成されますが、中身はほぼ空で、ルーティングもコメントアウトされた状態です。業務アプリをスマートフォンのホーム画面から使えるようにするには、いくつかの手順が必要です。

ステップ 1：インストール可能にする

# config/routes.rb
get "manifest" => "rails/pwa#manifest", as: :pwa_manifest
get "service-worker" => "rails/pwa#service_worker", as: :pwa_service_worker

<%# app/views/layouts/application.html.erb %>
<link rel="manifest" href="<%= pwa_manifest_path(format: :json) %>">

manifest.json.erb には name、start_url、display: standalone、theme_color を設定し、192px と 512px のアイコンを用意します。Chrome の DevTools の Application タブで、インストール条件を満たしているか確認できます。

ステップ 2：オフライン時の表示

// app/views/pwa/service-worker.js
const CACHE = "offline-v1";

self.addEventListener("install", (event) => {
  event.waitUntil(caches.open(CACHE).then((c) => c.add("/offline.html")));
});

self.addEventListener("fetch", (event) => {
  if (event.request.mode !== "navigate") return;
  event.respondWith(fetch(event.request).catch(() => caches.match("/offline.html")));
});

画面遷移のリクエストだけを対象にネットワーク優先で取得し、失敗したときにオフライン用ページを返します。業務データを扱う画面では、古いデータを表示してしまわないよう、キャッシュの対象は静的なページに限定するのが安全です。

運用上の注意

• Service Worker を更新したらキャッシュ名を変え、activate イベントで古いキャッシュを削除する
• iOS の Safari はインストールの案内が表示されないため、利用者向けの手順を用意する
• プッシュ通知を使う場合は、通知の許可を求めるタイミングを利用者の操作の後にする