檢查結果
- 必須填寫 name — 安裝提示顯示的就是這個名稱。
- 必須填寫 short_name — 主畫面圖示的標籤就是它。
manifest.webmanifest
{
"name": "",
"short_name": "",
"start_url": "/",
"scope": "/",
"display": "standalone",
"theme_color": "#000000",
"background_color": "#ffffff",
"lang": "en",
"icons": [
{
"src": "/icons/icon-72x72.png",
"sizes": "72x72",
"type": "image/png",
"purpose": "any"
},
{
"src": "/icons/icon-96x96.png",
"sizes": "96x96",
"type": "image/png",
"purpose": "any"
},
{
"src": "/icons/icon-128x128.png",
"sizes": "128x128",
"type": "image/png",
"purpose": "any"
},
{
"src": "/icons/icon-144x144.png",
"sizes": "144x144",
"type": "image/png",
"purpose": "any"
},
{
"src": "/icons/icon-152x152.png",
"sizes": "152x152",
"type": "image/png",
"purpose": "any"
},
{
"src": "/icons/icon-180x180.png",
"sizes": "180x180",
"type": "image/png",
"purpose": "any"
},
{
"src": "/icons/icon-192x192.png",
"sizes": "192x192",
"type": "image/png",
"purpose": "any"
},
{
"src": "/icons/icon-384x384.png",
"sizes": "384x384",
"type": "image/png",
"purpose": "any"
},
{
"src": "/icons/icon-512x512.png",
"sizes": "512x512",
"type": "image/png",
"purpose": "any"
},
{
"src": "/icons/icon-maskable-512x512.png",
"sizes": "512x512",
"type": "image/png",
"purpose": "maskable"
}
]
}加到你的 head 區段
<link rel="manifest" href="/manifest.webmanifest" /> <meta name="theme-color" content="#000000" /> <link rel="apple-touch-icon" href="/icons/icon-180x180.png" />
圖示預覽
上載圖示以產生整套圖示
網頁應用程式資訊清單的作用
資訊清單是把一個網站變成可安裝應用程式的 JSON 檔案。Chrome 讀取它來決定是否顯示安裝提示；Android 讀取它來取得啟動圖示與啟動畫面；iOS 則會讀取當中部分內容，用於主畫面。
Chrome 願意顯示安裝提示的條件
- 已連結、並以 JSON 格式提供的資訊清單
- 同時具備 name 與 short_name
- 192×192 及 512×512 的圖示
- display 設為 standalone、fullscreen 或 minimal-ui
- 離線時仍能載入的 start_url
- 網站以 HTTPS 提供
圖示尺寸及其用途
| 尺寸 | 用於 | 備註 |
|---|---|---|
| 192×192 | Chrome, Android — required | Install prompt |
| 512×512 | Chrome, Android — required | Splash screen |
| 180×180 | iOS | apple-touch-icon |
| 384×384 | Android xxhdpi | |
| 152×152 | iPad | |
| 144×144 | Android xhdpi | |
| 128×128 | Chrome Web Store | |
| 96×96 | Android mdpi | |
| 72×72 | Android ldpi | Legacy |
Maskable 圖示
Android 會按裝置把啟動圖示重新塑形成圓形、方圓形或圓角正方形。普通圖示後面會被畫上一個白色方塊。Maskable 圖示則會填滿整張畫布，並把重要圖案保留在一個覆蓋寬度 80% 的置中圓形之內 — 外圍那 20% 是系統有機會裁走的留白。
常見問題
沒有出現安裝提示
檢查資訊清單有沒有在 head 區段連結、是否回傳 200、有沒有 192 及 512 的圖示，以及網站是否使用 HTTPS。Chrome DevTools → Application → Manifest 會列出欠缺了甚麼。
Android 圖示外圍有一個白色方塊
你欠缺 maskable 圖示。加入一個，並把 purpose 設為 maskable。
已安裝的應用程式在瀏覽器分頁開啟
start_url 落在 scope 之外，或者 display 被設成了 browser。
啟動畫面的顏色不對
background_color 在應用程式渲染前為啟動畫面上色；theme_color 則為狀態列上色。