1. 簡述
manifest.json 用于提供應用程序相關描述的文件（名稱，作者，圖標和描述）
2. 如何使用
在HTML頁面的頭部，引入一個鏈接
<link rel="manifest" href="/manifest.json">
3. 基礎案例
{
"start_url": "/",
"name": "MyApp",
"short_name": "MyApp",
"icons": [
{
"src": "./icons/apple-touch-icon-180x180.png",
"type": "image/png",
"sizes": "180x180"
},
{
"src": "./icons/apple-touch-icon-152x152.png",
"type": "image/png",
"sizes": "152x152"
}
// ...其他尺寸192、512
],
"display": "standalone",
"background_color": "#1b2740",
"theme_color": "#1b2740"
}
4. 屬性介紹
只介紹部分常用的屬性
-
name
WebApp的名稱。
用戶保存WebApp到桌面時，將作為App的名稱。
-
short_name
為應用程序提供簡短易讀的名稱。 這是為了在沒有足夠空間顯示Web應用程序的全名時使用。
"short_name": "I/O 2017"
-
icons
應用程序圖標。
用戶保存WebApp到桌面時，根據適配，將作為App的圖標
"icons": [
{
"src": "icon/lowres.webp",
"sizes": "48x48",
"type": "image/webp"
},
{
"src": "icon/lowres",
"sizes": "48x48"
},
{
"src": "icon/hd_hi.ico",
"sizes": "72x72 96x96 128x128 256x256"
},
{
"src": "icon/hd_hi.svg",
"sizes": "72x72"
}
]
| 字段 | 描述 |
|---|---|
sizes |
包含空格分隔的圖像尺寸的字符串。 |
src |
圖像文件的路徑。 如果src是一個相對URL，則基本URL將是manifest的URL。 |
type |
提示圖像的媒體類型。此字段的目的是允許用戶代理快速忽略不支持的媒體類型的圖像。 |
-
start_url
啟動WebApp時，默認進入的URL。
"start_url": "/home"
-
theme_color
定義應用程序的默認主題顏色。
修改電量/信號欄 背景顏色(需要瀏覽器支持)
"theme_color": "aliceblue"
-
background_color
web應用程序預定義的背景顏色。
啟動web應用程序和加載應用程序的內容之間創建了一個平滑的過渡。
"background_color": "red"
-
description
Web應用程序的描述。
"description": "這是一個WebApp"
-
display
顯示方式
"display": "standalone"fullscreen全屏顯示, 所有可用的顯示區域都被使用, 并且不顯示狀態欄 standalonestandalone讓這個應用看起來像一個獨立的應用程序，包括具有不同的窗口，在應用程序啟動器中擁有自己的圖標等。這個模式中，用戶代理將移除用于控制導航的UI元素，但是可以包括其他UI元素，例如狀態欄。 minimal-uiminimal-ui該應用程序將看起來像一個獨立的應用程序，但會有瀏覽器地址欄。 樣式因瀏覽器而異。 browserbrowser該應用程序在傳統的瀏覽器標簽或新窗口中打開，具體實現取決于瀏覽器和平臺。 這是默認的設置。
