環境
- rails8.1.3
PWAの要件についての参考資料
今回の構成
主に、manifest と Service Worker の2つの構成です。
| 主な役割 | |
|---|---|
| manifest | PWAをデバイスにインストールする際に必要な情報を定義 |
| Service Worker | ページを閉じていても、必要なときにService Workerが再起動されイベントを処理できる（例として、プッシュ通知の際に活きる） |
※プッシュ通知関連のコードはこの記事では省略してます。
実装
ルーティングの設定
config/routes.rb
get "service-worker" => "rails/pwa#service_worker", as: :pwa_service_worker
get "manifest" => "rails/pwa#manifest", as: :pwa_manifest
アプリケーションレイアウトの更新
<head>セクション内に下記を設定
views/layouts/application.html.erb
<meta name="apple-mobile-web-app-title" content="Game Exit">
<link rel="manifest" href="<%= pwa_manifest_path(format: :json) %>">
<link rel="icon" href="<%= asset_path('icon-192x192.png') %>" type="image/png">
<link rel="apple-touch-icon" href="<%= asset_path('icon-192x192.png') %>">
manifest
views/pwa/manifest.json.erb
{
"name": "Game Exit",
"description": "ゲームのプレイ時間を記録・管理するアプリ",
"start_url": "/",
"display": "standalone",
"orientation": "portrait",
"background_color": "#FFFFFF",
"theme_color": "#000000",
"lang": "ja",
"icons": [
{
"src": "<%= asset_path('icon-192x192.png') %>",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "<%= asset_path('icon-512x512.png') %>",
"sizes": "512x512",
"type": "image/png"
}
]
}
-
display: standalone… URLバーなどのブラウザUIを非表示にし、ネイティブアプリのような見た目になる
Service Workerの登録
javascript/application.js
if ('serviceWorker' in navigator) {
window.addEventListener('load', () => {
navigator.serviceWorker.register('/service-worker')
})
}
- load イベント参考：https://developer.mozilla.org/ja/docs/Web/API/Window/load_event
- register()メソッド参考：https://developer.mozilla.org/ja/docs/Web/API/ServiceWorkerContainer/register
Webプッシュ通知実装に関する記事