在漸進式網頁應用程式中新增 Apple Touch 圖示

Kayce Basques

Safari for iOS 使用者可以手動將漸進式網頁應用程式 (PWA) 新增至主畫面。加入 PWA 後，iOS 主畫面上顯示的圖示稱為 Apple 觸控圖示。本程式碼研究室說明如何將 Apple Touch 圖示新增至 PWA。假設您擁有 iOS 裝置的存取權。

測量

在新分頁中開啟範例應用程式：

  1. 按一下「Remix to Edit」，讓專案可供編輯。

  2. 如要預覽網站，請按下「查看應用程式」，然後按下「全螢幕」圖示 全螢幕。

  3. 記下範例應用程式的網址，例如 https://example.glitch.me。

在 Chrome 開發人員工具中，對範例應用程式執行 Lighthouse PWA 稽核：

  1. 按下 `Control+Shift+J 鍵 (在 Mac 上為 Command+Option+J 鍵) 開啟開發人員工具。
  2. 按一下「Lighthouse」分頁標籤。
  3. 確認已在「類別」清單中勾選「漸進式網頁應用程式」核取方塊。
  4. 按一下「產生報表」按鈕。

在「PWA Optimized」部分中，Lighthouse 報告指出範例應用程式並未提供有效的 Apple Touch 圖示。

未提供有效的 apple-Touch-icon
未提供有效的 apple-Touch-icon 稽核

將範例應用程式新增至 iOS 主畫面

如要示範 Apple 觸控圖示如何提供更優質的使用者體驗，請先在尚未指定 Apple 觸控圖示的情況下，嘗試將範例應用程式加入 iOS 裝置的主畫面。

  1. 開啟 iOS 版 Safari。
  2. 開啟範例應用程式的網址，這就是您先前記下的類似 https://example.glitch.me。
  3. 依序輕觸「Share」圖示 Apple 分享按鈕 >「Add to Home Screen」。您可能需要向左滑動才能看到這個選項。
  4. 輕觸「新增」。

由於網站沒有指定 Apple 觸控圖示，因此 iOS 只會從頁面的內容產生網站圖示。

自動產生的主畫面圖示。
自動產生的主畫面圖示。

將 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 圖示。
Apple Touch 圖示。