WebサイトをPWAに対応させる

#事前に用意するもの

• Webサイト(httpsに対応する必要あり)
• アイコン

#manifest.jsonを作成する
PWAに対応するにはmanifest.json（アプリの構成を定義したもの）を用意する必要があります。
手動でも作成できますが、Web App Manifest Generatorのような自動でmanifest.jsonを作成してくれるサービスもあります。

こちらにアプリ名などの情報を入力すると、次のようなmanifest.jsonが生成されます。
512x512のアイコンだけあれば、他のサイズのアイコンも生成してくれます。

manifest.json

{
  "name": "Sample Application",
  "short_name": "SMPL APP",
  "theme_color": "#2196f3",
  "background_color": "#2196f3",
  "display": "standalone",
  "start_url": "/",
  "icons": [
    {
      "src": "images/icons/icon-72x72.png",
      "sizes": "72x72",
      "type": "image/png"
    },
    {
      "src": "images/icons/icon-96x96.png",
      "sizes": "96x96",
      "type": "image/png"
    },
    {
      "src": "images/icons/icon-128x128.png",
      "sizes": "128x128",
      "type": "image/png"
    },
    {
      "src": "images/icons/icon-144x144.png",
      "sizes": "144x144",
      "type": "image/png"
    },
    {
      "src": "images/icons/icon-152x152.png",
      "sizes": "152x152",
      "type": "image/png"
    },
    {
      "src": "images/icons/icon-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "images/icons/icon-384x384.png",
      "sizes": "384x384",
      "type": "image/png"
    },
    {
      "src": "images/icons/icon-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ],
  "splash_pages": null
}

#Service Workerを作成する
Service Workerとは
Service Workerを使うとプッシュ通知などの機能を実装することができるようですが、ここでは最低限必要なものだけ記述します。

serviceWorker.js

self.addEventListener('fetch', function(event) {
});

#manifest.json, Service Workerをサイトに追加する
これまでに作成したmanifest.json, serviceWorker.jsをアプリのルートに配置し、htmlから読み込めるようにします。
アイコンもmanifestで指定したパスに配置します。

index.html

<link rel="manifest" href="/manifest.json" />

index.html

    <script>
      window.addEventListener('load', function() {
        if ('serviceWorker' in navigator) {
          navigator.serviceWorker.register("/serviceWorker.js")
            .then(function(registration) {
              console.log("serviceWorker registed.");
            }).catch(function(error) {
              console.warn("serviceWorker error.", error);
            });
        }
      });
    </script>

#iOSに対応する
ここまででAndroidではPWAへの対応が完了していますが、iOSではアイコンが表示されません。
iOSに対応させるには、PWA Compatを利用します。

PWA Compatはhtmlに下記を追加するだけです。

index.html

<link rel="manifest" href="manifest.webmanifest" />

index.html

    <script async src="https://cdn.jsdelivr.net/npm/pwacompat@2.0.6/pwacompat.min.js"
      integrity="sha384-GOaSLecPIMCJksN83HLuYf9FToOiQ2Df0+0ntv7ey8zjUHESXhthwvq9hXAZTifA"
      crossorigin="anonymous"></script>

#確認方法

• Chrome(PC)
  開発者ツールから、Application - Manifestを開き、Manifestの情報が正しく表示できていることを確認する

• Android
  サイトを開くとホーム画面への追加を促すポップアップが表示される

• iOS
  Safariでサイトを開き、下部のボタンからホーム画面に追加する
  iOSではポップアップは表示されないので、アイコンやホーム画面から起動した時の挙動を確認する

#おまけ
iPhoneの「ホーム画面追加」を促す

#参考資料
下記を参考にしました。

「ホーム画面に追加」からはじめる『PWA(Service Worker)』
iOS版Safariにホーム画面アイコンを簡単に追加できるPWACompat