はじめに
この記事は、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);
});
});
}
あとはブラウザでアクセスするだけです。
動作確認
Chrome などでアクセスするとアドレスバーの横にこのように表示されてアプリとしてインストールできます。
2 回目以降はアプリへの動線が表示されます。
PWA のアプリで開くと以下のような表示になります。
コマンドランチャーからも起動できるようになります。
応用
PWA Builder というサイトを使うと PWA 対応しているサイトから iOS, Android 向けのアプリパッケージを作ってくれるサイトがあります。
PWA 対応を最低限するだけでは情報が不足しているので、アプリにもビルドできるように必要情報を拡充すればアプリのリリースも可能です。
(今回は最低限しか情報を記述していなかったり、アイコンを用意していないのでかなり不足してます。)
まとめ
以上の設定で、Rails 8 アプリケーションの基本的な PWA 対応が完了します。これだけで、ユーザーはあなたの Web アプリをホーム画面に追加できるようになります。
さらに進んだ PWA 機能（オフラインサポート、プッシュ通知など）を実装する場合は、サービスワーカーの内容を拡張する必要があります。
Rails 8 の PWA サポートにより、Web 開発者はより簡単にモバイルフレンドリーなアプリケーションを構築できるようになりました。ぜひ、あなたの Rails アプリケーションも PWA 化してみてください！
Discussion