Web App Manifest（manifest.json）驗證工具
只需貼上manifest.json的內容，即可檢查是否滿足PWA的安裝條件。自動檢查name、start_url、display、icons等必填項以及maskable圖示的有無，並以列表形式顯示存在的問題。
查驗 manifest.json 是否滿足 PWA 的條件
Web App Manifest 是一份 JSON 檔案，它決定網站被加入主畫面後的圖示、名稱以及啟動時的樣子。把內容貼進來，本工具便會核對 name、start_url、display、icons 等必填項，以及有無 maskable 圖示，並把所缺的一一列出。
此處要當心的是：manifest 齊全，並不就等於網站可被安裝。 Chrome 提議安裝的條件還包括經 HTTPS 提供，以及使用者與頁面有過互動等，而這些都無從由 manifest 的內容判定（對於從瀏覽器選單進行的安裝，Chrome 自行動版 108、桌面版 112 起已不再要求 Service Worker）。本工具所查的，只是這些條件中由 manifest 負責的那一部分。另一點是 maskable 圖示：少了它，Android 會把圖示縮進一個白色圓形裡。 另備一張 purpose 設為 maskable 的圖，系統便能依裝置所用的形狀把它畫到邊緣。
使用方法
- 貼入 manifest.json 的內容 把整份 JSON 照原樣放進去。
- 先試一試範例 完整的例子與最小的例子都已備好。
- 閱讀所缺的項目 缺失的必填項，以及 maskable 圖示的有無，都會被報出。
- 另行查驗 HTTPS 等 manifest 之外的條件 是否經 HTTPS 提供，屬於 manifest 之外的條件。 切勿只憑本工具的結果下判斷。
用好本工具的小技巧
- 建議同時設定name和short_name。如果沒有short_name，主螢幕圖示下方顯示的文字會由name機械截斷而來，有時會出現不符合預期的顯示效果。
- 如果沒有設定purpose: "maskable"的圖示，在部分Android裝置上，圖示周圍可能會被不自然地裁切，或者透出背景色。只需在現有的icons陣列中新增一條maskable用的條目即可解決。
- icons中請務必同時準備192x192和512x512兩種尺寸。在Chrome的安裝條件中，兩者都是必需的。
- Chrome等瀏覽器實際採用的PWA安裝條件今後可能會發生變化，因此本工具的判定結果僅供參考，建議最終還是通過Chrome DevTools的Application面板等進行確認。
- start_url使用相對路徑（例如“/?source=pwa”）也沒有問題。如果想統計安裝來源，可以附加查詢引數，這樣在訪問分析中更容易區分通過PWA啟動的訪問。
這些情境會用到
著手做 PWA
在還摸不清該寫些什麼的階段，可先弄明白需要哪些項目。
查究網站為何裝不上
可以先判明毛病是否出在 manifest 上。
改善圖示的觀感
添上 maskable 圖示，網站在 Android 主畫面上的樣子便會不同。
檢視既有的設定
可確認早先寫下的 manifest，如今是否仍滿足條件。
Web App Manifest 的術語
- name 與 short_name
- 應用程式的名稱。
short_name出現在主畫面圖示下方，故須短到放得下。 - start_url
- 從主畫面啟動時所開啟的網址，未必非得是首頁。
- display
- 啟動時的樣子。設為
standalone會去掉瀏覽器網址列，看來便如一個應用程式。 - icons
- 圖示的列表。在 Chrome 的安裝條件中，192×192 和 512×512 兩種都是必需的。
- maskable
- 一張預先設想會被裁成裝置所用圖示形狀的圖。 它經由
purpose宣告。 - theme_color
- 啟動時狀態列等處所用的顏色。與網站的配色相稱，整體便渾然一體。
常見問題
閒話 ― Web App Manifest與PWA的關係
Web App Manifest是由W3C制定的JSON格式規範，用於統一宣告將網站新增到主螢幕並像原生應用一樣安裝所需的資訊（應用名稱、圖示、啟動時的顯示模式、主題色等）。PWA（Progressive Web App）這個詞本身是2015年由Google的工程師提出的概念，而構成其核心的技術要素之一，正是這個manifest.json，以及負責離線執行的Service Worker這兩者。
如果manifest.json沒有正確配置，瀏覽器就不會將其識別為“可安裝的應用”，也就不會顯示提示新增到主螢幕的彈窗（例如Chrome的“安裝”橫幅）。尤其是icons解析度不足或display值錯誤這類問題，由於JSON本身在語法上仍然正確，很難被察覺，往往要等到實際嘗試安裝時才會發現。
maskable圖示（purpose: "maskable"）是一個相對較新的規範，大約從2019年起為了支援Android的“自適應圖示”而新增。普通圖示會根據裝置被裁切成圓形、圓角矩形等形狀，如果準備的圖示影像沒有留白，圖案的一部分就可能被裁掉。maskable用的圖示需要設計時考慮安全區域（safe zone），通常會與普通的icons條目分開單獨準備。
本工具專注於對manifest.json本身進行靜態驗證，並不檢查是否通過HTTPS提供服務、Service Worker的註冊狀態等manifest以外的條件。建議在生產環境中進行最終確認時，同時使用瀏覽器的開發者工具（例如Chrome DevTools的Application面板）加以核實。