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
を提供していない)」の監査に合格したことがわかります。