Kayce Basques
iOS 版 Safari では、プログレッシブ ウェブアプリ（PWA）をホーム画面に手動で追加できます。PWA が追加されたときに iOS のホーム画面に表示されるアイコンは、Apple タッチアイコンと呼ばれます。この Codelab では、Apple のタッチアイコンを PWA に追加する方法を説明します。iOS デバイスにアクセスできることを前提としています。
測定
新しいタブでサンプルアプリを開きます。
[Remix to Edit] をクリックしてプロジェクトを編集可能にします。
サイトをプレビューするには、[アプリを表示] を押してから、全画面表示
を押します。https://example.glitch.meのようなサンプルアプリの URL をメモします。
Chrome DevTools で、サンプルアプリに対して Lighthouse PWA 監査を実行します。
- Ctrl+Shift+J キー（Mac の場合は Command+Option+J キー）を押して DevTools を開きます。
- [Lighthouse] タブをクリックします。
- [カテゴリ] リストで [プログレッシブ ウェブアプリ] チェックボックスがオンになっていることを確認します。
- [Generate report] ボタンをクリックします。
Lighthouse のレポートでは、PWA の最適化セクションで、サンプルアプリが有効な Apple タッチアイコンを提供していないことが報告されます。
サンプルアプリを iOS のホーム画面に追加する
Apple タッチアイコンでより洗練されたユーザー エクスペリエンスを実現するには、まず、Apple タッチアイコンが指定されていないときに、iOS デバイスのホーム画面にサンプルアプリを追加してみます。
- iOS 版 Safari を開きます。
- サンプルアプリの URL を開きます。これは、先ほどメモした
https://example.glitch.meのような URL です。 - 共有アイコン
> [ホーム画面に追加] をタップします。このオプションを表示するには、おそらく左にスワイプします。 - [追加] をタップします。
サイトで Apple のタッチアイコンが指定されていないため、iOS はページのコンテンツからサイトのアイコンを生成するだけです。
サンプルアプリに Apple タッチアイコンを追加する
index.htmlの<head>の下部にある<link rel="apple-touch-icon">タグをコメント化解除します。
…
<link rel="stylesheet" href="/index.css">
<link rel="shortcut icon" href="https://cdn.glitch.com/49d34dc6-8fbd-46bb-8221-b99ffd36f1af%2Ftouchicon-180.png?v=1566411949736">
<!-- <link rel="apple-touch-icon" href="https://cdn.glitch.com/49d34dc6-8fbd-46bb-8221-b99ffd36f1af%2Ftouchicon-180.png?v=1566411949736"> -->
<link rel="apple-touch-icon" href="https://cdn.glitch.com/49d34dc6-8fbd-46bb-8221-b99ffd36f1af%2Ftouchicon-180.png?v=1566411949736">
</head>
…
サンプルアプリを iOS のホーム画面に追加する（もう一度）
- もう一度、サンプルアプリを iOS のホーム画面に追加してみてください。今回はサイトに適したアイコンが生成されますまた、Lighthouse を使用してページを再度監査すると、「Does not provide a valid
apple-touch-icon（有効なapple-touch-iconを提供していない）」の監査に合格したことがわかります。
