Kayce Basques
iOS 版 Safari 使用者可以手動將漸進式網頁應用程式 (PWA) 新增至 主畫面。新增 PWA 後，iOS 主畫面上顯示的圖示 Apple Touch 圖示。本程式碼研究室說明如何在 PWA 中新增 Apple 觸控圖示。假設 擁有 iOS 裝置的存取權
測量
在新分頁中開啟範例應用程式：
按一下「Remix to Edit」即可編輯專案。
如要預覽網站，請按下「查看應用程式」。然後按下 全螢幕
。記下範例應用程式的網址。名稱會類似：
https://example.glitch.me。
使用 Chrome 開發人員工具對範例應用程式執行 Lighthouse PWA 稽核：
- 按下 Control+Shift+J 鍵 (或在 Mac 上為 Command+Option+J 鍵) 開啟開發人員工具。
- 按一下「Lighthouse」分頁標籤。
- 確認您已在「類別」清單中勾選「漸進式網頁應用程式」核取方塊。
- 按一下「產生報表」按鈕。
在「PWA 最佳化」部分中，Lighthouse 回報範例應用程式並未提供有效的 Apple Touch 圖示。
將範例應用程式新增至 iOS 主畫面
如示範 Apple 觸控圖示如何提供更優質的使用者體驗，請先嘗試新增 預設應用程式至 iOS 裝置的主畫面 (尚未指定 Apple 觸控圖示)。
- 開啟 iOS 版 Safari。
- 開啟範例應用程式的網址。這是像
https://example.glitch.me這樣的網址 如先前所述 - 輕觸「分享」圖示
>
新增到主畫面：您可能需要向左滑動才能看到這個選項。 - 輕觸「新增」。
由於網站未指定 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 稽核該網頁，您也會發現
現在起，未提供有效的
apple-touch-icon稽核結果即可通過稽核。
