Safari for iOS 使用者可以手動將漸進式網頁應用程式 (PWA) 新增至主畫面。加入 PWA 後,iOS 主畫面上顯示的圖示稱為 Apple 觸控圖示。本程式碼研究室說明如何將 Apple Touch 圖示新增至 PWA。假設您擁有 iOS 裝置的存取權。
測量
在新分頁中開啟範例應用程式:
按一下「Remix to Edit」,讓專案可供編輯。
如要預覽網站,請按下「查看應用程式」,然後按下「全螢幕」圖示
。
記下範例應用程式的網址,例如
https://example.glitch.me
。
在 Chrome 開發人員工具中,對範例應用程式執行 Lighthouse PWA 稽核:
- 按下 `Control+Shift+J 鍵 (在 Mac 上為 Command+Option+J 鍵) 開啟開發人員工具。
- 按一下「Lighthouse」分頁標籤。
- 確認已在「類別」清單中勾選「漸進式網頁應用程式」核取方塊。
- 按一下「產生報表」按鈕。
在「PWA Optimized」部分中,Lighthouse 報告指出範例應用程式並未提供有效的 Apple Touch 圖示。
![未提供有效的 apple-Touch-icon](https://web.dev/static/articles/codelab-apple-touch-icon/image/does-provide-valid-appl-3f357b1a31581.png?authuser=9&hl=zh-tw)
將範例應用程式新增至 iOS 主畫面
如要示範 Apple 觸控圖示如何提供更優質的使用者體驗,請先在尚未指定 Apple 觸控圖示的情況下,嘗試將範例應用程式加入 iOS 裝置的主畫面。
- 開啟 iOS 版 Safari。
- 開啟範例應用程式的網址,這就是您先前記下的類似
https://example.glitch.me
。 - 依序輕觸「Share」圖示
>「Add to Home Screen」。您可能需要向左滑動才能看到這個選項。
- 輕觸「新增」。
由於網站沒有指定 Apple 觸控圖示,因此 iOS 只會從頁面的內容產生網站圖示。
![自動產生的主畫面圖示。](https://web.dev/static/articles/codelab-apple-touch-icon/image/an-auto-generated-home-sc-3fae3a26906d9.png?authuser=9&hl=zh-tw)
將 Apple Touch 圖示新增至範例應用程式
- 取消註解
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 再次稽核網頁,您現在也會看到「Not not provide a 有效的
apple-touch-icon
」稽核已通過。
![Apple Touch 圖示。](https://web.dev/static/articles/codelab-apple-touch-icon/image/the-apple-touch-icon-fb4c851adc96.png?authuser=9&hl=zh-tw)