在漸進式網頁應用程式中新增 Apple Touch 圖示
透過集合功能整理內容
你可以依據偏好儲存及分類內容。
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
稽核結果即可通過稽核。
,瞭解如何調查及移除這項存取權。
除非另有註明,否則本頁面中的內容是採用創用 CC 姓名標示 4.0 授權,程式碼範例則為阿帕契 2.0 授權。詳情請參閱《Google Developers 網站政策》。Java 是 Oracle 和/或其關聯企業的註冊商標。
上次更新時間:2019-08-26 (世界標準時間)。
[{
"type": "thumb-down",
"id": "missingTheInformationINeed",
"label":"缺少我需要的資訊"
},{
"type": "thumb-down",
"id": "tooComplicatedTooManySteps",
"label":"過於複雜/步驟過多"
},{
"type": "thumb-down",
"id": "outOfDate",
"label":"過時"
},{
"type": "thumb-down",
"id": "translationIssue",
"label":"翻譯問題"
},{
"type": "thumb-down",
"id": "samplesCodeIssue",
"label":"示例/程式碼問題"
},{
"type": "thumb-down",
"id": "otherDown",
"label":"其他"
}]
[{
"type": "thumb-up",
"id": "easyToUnderstand",
"label":"容易理解"
},{
"type": "thumb-up",
"id": "solvedMyProblem",
"label":"確實解決了我的問題"
},{
"type": "thumb-up",
"id": "otherUp",
"label":"其他"
}]
{"lastModified": "\u4e0a\u6b21\u66f4\u65b0\u6642\u9593\uff1a2019-08-26 (\u4e16\u754c\u6a19\u6e96\u6642\u9593)\u3002"}
[[["容易理解","easyToUnderstand","thumb-up"],["確實解決了我的問題","solvedMyProblem","thumb-up"],["其他","otherUp","thumb-up"]],[["缺少我需要的資訊","missingTheInformationINeed","thumb-down"],["過於複雜/步驟過多","tooComplicatedTooManySteps","thumb-down"],["過時","outOfDate","thumb-down"],["翻譯問題","translationIssue","thumb-down"],["示例/程式碼問題","samplesCodeIssue","thumb-down"],["其他","otherDown","thumb-down"]],["上次更新時間:2019-08-26 (世界標準時間)。"],[],[]]