背景 PWA(Progressive Web Apps)自体は以前から気にはなっていたのですが、最近iOS11.3のSafari11.1から対応されるとのことで周囲でちょっと盛り上がってたので自分のブログに対応させてみたくなってしまったので対応させました。 今回説明するのはホームスクリーンにアイコンを設置できるようにするところまでです。 前提 公式サイトによるとバナーが出る条件は以下のようになっています。 * 次の情報が記述されたウェブアプリ マニフェスト ファイルが存在する。 - short_name（ホーム画面で使用） - name（バナーで使用） - 192x192 の png アイコン（アイコンの宣言には MIME タイプ image/png の指定が必要） - 読み込み先の start_url * サイトに Service Worker が登録されている。 * HTTPS 経由で配信されている（Service Worker を使用するための要件）。 * 2 回以上のアクセスがあり、そのアクセスに 5 分以上の間隔がある。 対象のWebサイトのhttps対応が必須なので やられてない方はLet’s Encryptなどを用いてhttps対応してください。 (手間みそですが、さくらVPSに導入する記事です。https://qiita.com/kz_morita/items/ba9c171633ca54d72d2a) やったこと https対応はすでにしているので今回やらなきゃいけないことは以下の二つです。 manifestファイルの用意 ServiceWorkerの登録 順に説明していきます。 manifest.jsonの作成 以下のようなjsonファイルを作成しました。 { "icons": [ { "src": "images/logo/logo-512.png", "sizes": "512x512", "type": "image/png" }, { "src": "images/logo/logo-256.png", "sizes": "256x256", "type": "image/png" }, { "src": "images/logo/logo-192.