前提

本記事は、以下の記事を参考に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">

参考

iOSの11.3からのPWA対応でできるようになったこと