Rails gem serviceworker-railsを使って、スプラッシュ画像とiOSのアイコンを設定する

## 前提
本記事は、以下の記事を参考にRailsアプリケーションでPWA対応したとき、追加で実装したことを記載します。
[Rails で gem serviceworker-rails を使って PWA の導入](https://qiita.com/hirotakasasaki/items/e3fb638b4f75a92bce8b)

## 環境
|               | Ver | 
|:--------------|:------|
| Ruby          | 2.4.3 |
| Ruby on Rails | 5.1.0 |
| gem serviceworker-rails | 0.5.5 |

## 実際に実装したサイト
[獣医業界向けの勉強会支援サービス Vektol](https://vektol.net/)
※獣医業界向けのconnpassみたいなサービスです。

# 追加で実装したこと
## スプラッシュ画像の設定
スプラッシュ画像とは、アプリのアイコンをクリック（起動）した時に、起動までの時間繋ぎとして表示される画像を指します。`gem serviceworker-rails`のデフォルト設定ではアプリケーション名が表示されるようになっていましたが、iOSでは画面が真っ白になってしまったこと、またロゴ画像を設定したかったのでスプラッシュ画像を設定しました。

参考）[【解決方法】iOS端末でPWAのスプラッシュ画面が真っ白になる](https://qiita.com/NaokiIshimura/items/2b18ce82c936399b695c)

```html: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](https://mamewaza.com/support/blog/favicon2017.html)

```html: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対応でできるようになったこと](https://medium.com/@takeshiamano/ios%E3%81%AE11-3%E3%81%8B%E3%82%89%E3%81%AEpwa%E5%AF%BE%E5%BF%9C%E3%81%A7%E3%81%A7%E3%81%8D%E3%82%8B%E3%82%88%E3%81%86%E3%81%AB%E3%81%AA%E3%81%A3%E3%81%9F%E3%81%93%E3%81%A8-313f638a172b)