Rails 8でWebサービスをPWA(Progressive Web Apps)対応。最低限の設定を速攻で。

2024-12-25

Ruby

rails

/

pwa

/

webdev

はじめに#

この記事は、Ruby on Rails Advent Calendar 2024の21日目です。

Rails 8 で簡単に PWA 対応ができるようになりました。この記事では、最小限の設定で Rails アプリケーションを PWA 化する方法を紹介します。

本記事では郵便番号検索サービス「ポストくん」を PWA 対応してみます。

PWAとは？#

Progressive Web App (PWA) は、Web アプリケーションでありながら、ネイティブアプリのような体験を提供する技術です。オフライン対応、ホーム画面へのインストール、プッシュ通知などの機能を実現できます。

PWA 対応していると検索エンジンからの評価が上がるといった発言もあります。

Rails 8のPWA対応#

Rails 8 では、PWA に必要な基本的なファイルが最初から用意されています。具体的には以下の 2 つです：

マニフェストファイル (manifest.json)
サービスワーカー (service-worker.js)

これらのファイルを使って、簡単に PWA 対応ができるようになりました。

最低限の設定手順#

1. ルーティングの設定#

config/routes.rb に以下の 2 行を追加します：

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

2. マニフェストファイルの作成#

app/views/pwa/manifest.json.erb ファイルを作成し、以下のような内容を記述します：

{
  "name": "あなたのアプリ名",
  "short_name": "短い名前",
  "description": "アプリの説明",
  "start_url": "/",
  "display": "standalone",
  "background_color": "#FFFFFF",
  "theme_color": "#000000",
  "icons": [
    {
      "src": "<%= asset_path('icon-192x192.png') %>",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "<%= asset_path('icon-512x512.png') %>",
      "sizes": "512x512",
      "type": "image/png"
    }
  ]
}

3. サービスワーカーの作成#

app/views/pwa/service-worker.js ファイルを作成し、以下のような基本的な内容を記述します：

self.addEventListener('install', function(event) {
  console.log('Service Worker installing.');
});

self.addEventListener('activate', function(event) {
  console.log('Service Worker activated.');
});

self.addEventListener('fetch', function(event) {
  console.log('Fetching:', event.request.url);
});

内容的にはなにもしていませんが、今後の実装のためのメモ的な位置づけです。

4. アプリケーションレイアウトの更新#

app/views/layouts/application.html.erb ファイルの <head> セクション内に以下の行を追加します：

<link rel="manifest" href="<%= pwa_manifest_path(format: :json) %>">
<meta name="apple-mobile-web-app-capable" content="yes">

5. アイコンの準備#

PWA用のアイコンを app/assets/images/ ディレクトリに配置します。少なくとも192×192と512x512サイズのアイコンを用意しましょう。

6. JavaScriptでサービスワーカーを登録#

app/javascript/application.js に以下のコードを追加して、サービスワーカーを登録します：

if ('serviceWorker' in navigator) {
  window.addEventListener('load', () => {
    navigator.serviceWorker.register('/service-worker.js')
      .then(registration => {
        console.log('Service Worker registered:', registration);
      })
      .catch(error => {
        console.log('Service Worker registration failed:', error);
      });
  });
}