1. 簡述
manifest.json 用于提供應(yīng)用程序相關(guān)描述的文件（名稱，作者，圖標和描述）
2. 如何使用
在HTML頁面的頭部，引入一個鏈接
<link rel="manifest" href="/manifest.json">
3. 基礎(chǔ)案例
{
"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
為應(yīng)用程序提供簡短易讀的名稱。 這是為了在沒有足夠空間顯示W(wǎng)eb應(yīng)用程序的全名時使用。
"short_name": "I/O 2017"
-
icons
應(yīng)用程序圖標。
用戶保存WebApp到桌面時，根據(jù)適配，將作為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
定義應(yīng)用程序的默認主題顏色。
修改電量/信號欄 背景顏色(需要瀏覽器支持)
"theme_color": "aliceblue"
-
background_color
web應(yīng)用程序預定義的背景顏色。
啟動web應(yīng)用程序和加載應(yīng)用程序的內(nèi)容之間創(chuàng)建了一個平滑的過渡。
"background_color": "red"
-
description
Web應(yīng)用程序的描述。
"description": "這是一個WebApp"
-
display
顯示方式
"display": "standalone"fullscreen全屏顯示, 所有可用的顯示區(qū)域都被使用, 并且不顯示狀態(tài)欄 standalonestandalone讓這個應(yīng)用看起來像一個獨立的應(yīng)用程序，包括具有不同的窗口，在應(yīng)用程序啟動器中擁有自己的圖標等。這個模式中，用戶代理將移除用于控制導航的UI元素，但是可以包括其他UI元素，例如狀態(tài)欄。 minimal-uiminimal-ui該應(yīng)用程序?qū)⒖雌饋硐褚粋€獨立的應(yīng)用程序，但會有瀏覽器地址欄。 樣式因瀏覽器而異。 browserbrowser該應(yīng)用程序在傳統(tǒng)的瀏覽器標簽或新窗口中打開，具體實現(xiàn)取決于瀏覽器和平臺。 這是默認的設(shè)置。
