前提
本記事は、以下の記事を参考にRailsアプリケーションでPWA対応したとき、追加で実装したことを記載します。
Rails で gem serviceworker-rails を使って PWA の導入
環境
| Ver | |
|---|---|
| Ruby | 2.4.3 |
| Ruby on Rails | 5.1.0 |
| gem serviceworker-rails | 0.5.5 |
実際に実装したサイト
獣医業界向けの勉強会支援サービス Vektol
※獣医業界向けのconnpassみたいなサービスです。
追加で実装したこと
スプラッシュ画像の設定
スプラッシュ画像とは、アプリのアイコンをクリック（起動）した時に、起動までの時間繋ぎとして表示される画像を指します。gem serviceworker-railsのデフォルト設定ではアプリケーション名が表示されるようになっていましたが、iOSでは画面が真っ白になってしまったこと、またロゴ画像を設定したかったのでスプラッシュ画像を設定しました。
参考）【解決方法】iOS端末でPWAのスプラッシュ画面が真っ白になる
headタグ内に追加
・以下のタグ（57～180pxの各サイズ）
<link rel="apple-touch-startup-image" href="images/splashes/launch-640x1136.png" media="(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)">
<link rel="apple-touch-startup-image" href="images/splashes/launch-750x1334.png" media="(device-width: 375px) and (device-height: 667px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)">
<link rel="apple-touch-startup-image" href="images/splashes/launch-1242x2208.png" media="(device-width: 414px) and (device-height: 736px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)">
<link rel="apple-touch-startup-image" href="images/splashes/launch-1125x2436.png" media="(device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)">
<link rel="apple-touch-startup-image" href="images/splashes/launch-1536x2048.png" media="(min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait)">
<link rel="apple-touch-startup-image" href="images/splashes/launch-1668x2224.png" media="(min-device-width: 834px) and (max-device-width: 834px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait)">
<link rel="apple-touch-startup-image" href="images/splashes/launch-2048x2732.png" media="(min-device-width: 1024px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait)">
iOSでのホーム画面アイコンの設定
iOSの場合、アイコンの設定にはManifest.jsからではなくapple-touch-icon linkの設定が必要なようです。これを設定しないとアイコンがスクリーンショットになってしまいます。
参考）faviconやホーム画面アイコンの指定方法2017
headタグ内に追加
・以下のタグ（57～180pxの各サイズ）
<link rel="apple-touch-icon" href="apple-touch-icon57.png" sizes="57x57">
<link rel="apple-touch-icon" href="apple-touch-icon60.png" sizes="60x60">
<link rel="apple-touch-icon" href="apple-touch-icon72.png" sizes="72x72">
<link rel="apple-touch-icon" href="apple-touch-icon76.png" sizes="76x76">
<link rel="apple-touch-icon" href="apple-touch-icon114.png" sizes="114x114">
<link rel="apple-touch-icon" href="apple-touch-icon120.png" sizes="120x120">
<link rel="apple-touch-icon" href="apple-touch-icon144.png" sizes="144x144">
<link rel="apple-touch-icon" href="apple-touch-icon152.png" sizes="152x152">
<link rel="apple-touch-icon" href="apple-touch-icon180.png" sizes="180x180">