Kayce Basques
iOS 版 Safari では、プログレッシブ ウェブアプリ（PWA）を アクセスできます。PWA の追加時に iOS のホーム画面に表示されるアイコンを、 Apple Touch アイコンをタップします。この Codelab では、PWA に Apple タッチアイコンを追加する方法について説明します。前提 メールアドレスが必要です
測定
新しいタブでサンプルアプリを開きます。
[Remix to Edit] をクリックして、プロジェクトを編集可能にします。
サイトをプレビューするには、[アプリを表示] を押します。[ 全画面表示
。サンプルアプリの URL をメモします。たとえば、
https://example.glitch.meのようになります。
Chrome DevTools で、サンプルアプリに対して Lighthouse PWA 監査を実行します。
- Ctrl+Shift+J キー（Mac の場合は Command+Option+J キー）を押して DevTools を開きます。
- [Lighthouse] タブをクリックします。
- [カテゴリ] リストで [プログレッシブ ウェブアプリ] チェックボックスがオンになっていることを確認します。
- [Generate report] ボタンをクリックします。
[PWA Optimized] セクションで、サンプルアプリが有効な Apple タッチアイコン。
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">iOS のホーム画面にサンプルアプリを追加する
Apple Touch アイコンによってユーザー エクスペリエンスがより洗練される仕組みを説明するため、まず Apple のタッチアイコンが指定されていない場合、サンプルアプリを iOS デバイスのホーム画面に表示できます。
- Safari for iOS を開きます。
- サンプルアプリの URL を開きます。これは、
https://example.glitch.meのような URL です。 すでに説明しました - 共有アイコン
>
[ホーム画面に追加] をタップします。このオプションを表示するには、左にスワイプします。 - [追加] をタップします。
サイトでは Apple タッチアイコンが指定されていないため、iOS ではサイトのアイコンが生成されます。 取得する必要があります
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">サンプルアプリに 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 を使用してページを再度監査すると、
有効な
apple-touch-iconが提供されていないため、監査に合格しました。
<ph type="x-smartling-placeholder">