PWA - Manifest

• manifest 在一個JSON文本文件中提供有關應用程序的信息（如名稱，做者，圖標和描述）
• manifest 的目的是將Web應用程序安裝到設備的主屏幕

部署一個 manifest

<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

• 用於在樣式表加載以前，當加載manifest，瀏覽器能夠用來繪製web應用程序的背景顏色。在啓動web應用程序和加載應用程序的內容之間建立了一個平滑的過渡。
• 只是在web應用程序加載時提升用戶體驗，而當web應用程序的樣式表可用時，不能替代做爲背景顏色使用。

description

• 提供有關Web應用程序的通常描述。

dir

• 指定名稱、短名稱和描述成員的主文本方向。
  • ltr (由左到右)
  • rtl (由右到左)
  • auto (由瀏覽器自動判斷。（默認值）
• 與lang一塊兒配置，能夠幫助正確顯示右到左文本。

"dir": "rtl",
"lang": "ar",
"short_name": "أنا من التطبيق!"

display

• Web應用程序的首選顯示模式"display": "standalone"（若是不支持將自動降級）
  • fullscreen 全屏顯示, 全部可用的顯示區域都被使用, 而且不顯示狀態欄chrome。
  • tandalone 讓這個應用看起來像一個獨立的應用程序，包括具備不一樣的窗口，在應用程序啓動器中擁有本身的圖標等。這個模式中，用戶代理將移除用於控制導航的UI元素（前進後退按鈕？），可是能夠包括其餘UI元素，例如狀態欄。
  • minimal-ui 應用程序將看起來像一個獨立的應用程序，但會有瀏覽器地址欄。 樣式因瀏覽器而異。
  • browser 該應用程序在傳統的瀏覽器標籤或新窗口中打開，具體實現取決於瀏覽器和平臺。 這是默認的設置。
• 顯示模式能夠在CSS媒體查詢中使用@media all and (display-mode: fullscreen) { ... }

icons

• 指定可在各類環境中用做應用程序圖標的圖像對象數組。
  • 用來在其餘應用程序列表中表示Web應用程序
  • 將Web應用程序與OS（操做系統）的任務切換器和/或系統偏好集成在一塊兒。
• 圖像對象可能包含如下值：
  • sizes 包含空格分隔的圖像尺寸的字符串。
  • src 圖像文件的路徑。 若是src是一個相對URL，則基本URL將是manifest的URL。
  • type 提示圖像的媒體類型。此字段的目的是容許用戶代理（瀏覽器）快速忽略不支持的媒體類型的圖像。

"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"
  }
]

lang

• 指定name和short_name成員中的值的主要語言。 該值是包含單個語言標記的字符串。

"lang": "en-US"

name

• 爲應用程序提供一我的類可讀的名稱，例如在其餘應用程序的列表中或做爲圖標的標籤顯示給用戶。

short_name

• 應用程序提供簡短易讀的名稱。 這是爲了在沒有足夠空間顯示Web應用程序的全名時使用。

orientation

• 程序的默認方向（旋轉）​​"orientation": "portrait-primary"
• 方向能夠是如下值之一：
  • any
  • natural
  • landscape
  • landscape-primary
  • landscape-secondary
  • portrait
  • portrait-primary
  • portrait-secondary

prefer_related_applications

• 指定一個布爾值，提示用戶代理向用戶指示指定的相關應用程序（請參見下文）可用，並建議經過Web應用程序。 只有當相關的本地應用程序確實提供了某些Web應用程序沒法作到的事情時，才應該使用它。（是否出現應用程序提示，該提示能夠提供一個入口，用來下載安裝一個應用來代替該PWA所擁有的功能？）
• 若是省略,默認設置爲 false."prefer_related_applications": false

related_applications

• 指定一個「應用程序對象」數組，表明可由底層平臺安裝或可訪問的本機應用程序 - 例如可經過Google Play Store獲取的原生Android應用程序。
• 這樣的應用程序旨在替代提供相似或等同功能的Web應用程序 - 就像Web應用程序的本機應用程序版本同樣。
• 應用程序對象可能包含如下值：
  • platform 能夠找到應用程序的平臺。
  • url 能夠找到應用程序的URL。
  • id 用於表示指定平臺上的應用程序的ID。

"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"
  }]

scope

• 定義此Web應用程序的應用程序上下文的導航範圍。 這基本上限制了manifest能夠查看的網頁。 若是用戶在範圍以外瀏覽應用程序，則返回到正常的網頁。（manifest配置的影響範圍？）
• 若是scope是相對URL，則基本URL將是manifest的URL。

"scope": "/myapp/"

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 類型. 可是, 你沒必要非得這樣作.