Web App Manifest

簡介

Web應用程序清單在一個JSON文本文件中提供有關應用程序的信息（如名稱，作者，圖標和描述）。manifest 的目的是將Web應用程序安裝到設備的主屏幕，爲用戶提供更快的訪問和更豐富的體驗。

Web應用程序清單是被稱爲漸進式Web應用程序(PWA)的Web技術集合的一部分, 它們是可以安裝到設備的主屏幕的網絡應用程序，而不需要用戶通過應用商店，伴隨着其他功能, 比如離線可用和接收推送通知。

部署一個 manifest

Web應用程序清單部署在HTML頁面中，在你的文件的頭部的一個鏈接標記：

<link rel="manifest" href="/manifest.json">

manifest 範例

  "name": "HackerWeb",
  "short_name": "HackerWeb",
  "start_url": ".",
  "display": "standalone",
  "background_color": "#fff",
  "description": "A simply readable Hacker News app.",
  "icons": [{
    "src": "images/touch/homescreen48.png",
    "sizes": "48x48",
    "type": "image/png"
  }, {
    "src": "images/touch/homescreen72.png",
    "sizes": "72x72",
    "type": "image/png"
  }, {
    "src": "images/touch/homescreen96.png",
    "sizes": "96x96",
    "type": "image/png"
  }, {
    "src": "images/touch/homescreen144.png",
    "sizes": "144x144",
    "type": "image/png"
  }, {
    "src": "images/touch/homescreen168.png",
    "sizes": "168x168",
    "type": "image/png"
  }, {
    "src": "images/touch/homescreen192.png",
    "sizes": "192x192",
    "type": "image/png"
  }],
  "related_applications": [{
    "platform": "web"
  }, {
    "platform": "play",
    "url": "https://play.google.com/store/apps/details?id=cheeaun.hackerweb"
  }]
}

成員

background_color

爲web應用程序預定義的背景顏色。此值在應用程序樣式表中可以再次聲明。它主要用於在樣式表加載之前，當加載manifest，瀏覽器可以用來繪製web應用程序的背景顏色。在啓動web應用程序和加載應用程序的內容之間創建了一個平滑的過渡。

"background_color": "red"
注意：background_color只是在web應用程序加載時提高用戶體驗，而當web應用程序的樣式表可用時，不能替代作爲背景顏色使用。

description

提供有關Web應用程序的一般描述。

"description": "The app that helps you find the best food in town!"
dir
指定名稱、短名稱和描述成員的主文本方向。與lang一起配置，可以幫助正確顯示右到左文本。

“dir”: “rtl”,
“lang”: “ar”,
“short_name”: “أنا من التطبيق!”
可選值:

ltr (由左到右)
rtl (由右到左)
auto (由瀏覽器自動判斷。
注意：當省略時，默認爲auto

display

定義開發人員對Web應用程序的首選顯示模式。

"display": "standalone"
有效值:

顯示模式 描述 後備顯示模式
fullscreen 全屏顯示, 所有可用的顯示區域都被使用, 並且不顯示狀態欄chrome。 standalone
standalone 讓這個應用看起來像一個獨立的應用程序，包括具有不同的窗口，在應用程序啓動器中擁有自己的圖標等。這個模式中，用戶代理將移除用於控制導航的UI元素，但是可以包括其他UI元素，例如狀態欄。

minimal-ui

minimal-ui 該應用程序將看起來像一個獨立的應用程序，但會有瀏覽器地址欄。 樣式因瀏覽器而異。 browser
browser 該應用程序在傳統的瀏覽器標籤或新窗口中打開，具體實現取決於瀏覽器和平臺。 這是默認的設置。 (None)
Note: 您可以使用顯示模式媒體功能，根據顯示模式選擇性地將CSS應用到您的應用程序。 這可用於在從URL啓動網站和從桌面圖標啓動網站之間提供一致的用戶體驗。

icons

指定可在各種環境中用作應用程序圖標的圖像對象數組。 例如，它們可以用來在其他應用程序列表中表示Web應用程序，或者將Web應用程序與OS的任務切換器和/或系統偏好集成在一起。

"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 提示圖像的媒體類型。此字段的目的是允許用戶代理快速忽略不支持的媒體類型的圖像。lang
指定name和short_name成員中的值的主要語言。 該值是包含單個語言標記的字符串。

“lang”: “en-US”

name
爲應用程序提供一個人類可讀的名稱，例如在其他應用程序的列表中或作爲圖標的標籤顯示給用戶。

"name": "Google I/O 2017" 

orientation

定義所有Web應用程序頂級的默認方向 browsing contexts.

​​"orientation": “portrait-primary”
方向可以是以下值之一：

any
natural
landscape
landscape-primary
landscape-secondary
portrait
portrait-primary
portrait-secondary
prefer_related_applications

指定一個布爾值，提示用戶代理向用戶指示指定的相關應用程序（請參見下文）可用，並建議通過Web應用程序。 只有當相關的本地應用程序確實提供了某些Web應用程序無法做到的事情時，才應該使用它。

“prefer_related_applications”: false
Note: 如果省略,默認設置爲 false.

related_applications

指定一個“應用程序對象”數組，代表可由底層平臺安裝或可訪問的本機應用程序 - 例如可通過Google Play Store獲取的原生Android應用程序。 這樣的應用程序旨在替代提供類似或等同功能的Web應用程序 - 就像Web應用程序的本機應用程序版本一樣。

"related_applications": [
  {
    "platform": "play",
    "url": "https://play.google.com/store/apps/details?id=com.example.app1",
    "id": "com.example.app1"
  }, {
    "platform": "itunes",
    "url": "https://itunes.apple.com/app/example-app1/id123456789"
  }]

應用程序對象可能包含以下值：

Member Description
platform 可以找到應用程序的平臺。
url 可以找到應用程序的URL。
id 用於表示指定平臺上的應用程序的ID。scope
定義此Web應用程序的應用程序上下文的導航範圍。 這基本上限制了manifest可以查看的網頁。 如果用戶在範圍之外瀏覽應用程序，則返回到正常的網頁。

如果scope是相對URL，則基本URL將是manifest的URL。

“scope”: “/myapp/”
short_name
爲應用程序提供簡短易讀的名稱。 這是爲了在沒有足夠空間顯示Web應用程序的全名時使用。

“short_name”: “I/O 2017”
start_url
指定用戶從設備啓動應用程序時加載的URL。 如果以相對URL的形式給出，則基本URL將是manifest的URL。

“start_url”: “./?utm_source=web_app_manifest”
theme_color
定義應用程序的默認主題顏色。 這有時會影響操作系統顯示應用程序的方式（例如，在Android的任務切換器上，主題顏色包圍應用程序）。

“theme_color”: “aliceblue”
初始屏幕
在Chrome 47及更高版本中，從主屏幕啓動的Web應用程序將顯示啓動畫面。 這個啓動畫面是使用Web應用程序清單中的屬性自動生成的，具體來說就是：name，background_color以及icons 中距設備最近128dpi的圖標。

Mime類型
Manifests 應使用 application/manifest+json MIME 類型. 但是, 你不必非得這樣做.

注：轉自 https://developer.mozilla.org/zh-CN/docs/Web/Manifest