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