[TOC] # web-app-manifest [網絡應用清單](https://developer.mozilla.org/zh-CN/docs/Web/Manifest)是一個 JSON 文件，它告訴瀏覽器您的Web應用程序以及在用戶移動設備或桌面上“安裝”時它應該如何表現。 Chrome需要提供清單才能顯示“添加到主屏幕”提示。 典型的清單文件包括有關應用程序名稱，應使用的圖標，啟動時應啟動的start_url等信息。 ## 創建清單 PWA的完整manifest.json文件 ~~~ { "short_name": "Maps", "name": "Google Maps", "icons": [ { "src": "/images/icons-192.png", "type": "image/png", "sizes": "192x192" }, { "src": "/images/icons-512.png", "type": "image/png", "sizes": "512x512" } ], "start_url": "/maps/?source=pwa", "background_color": "#3367D6", "display": "standalone", "scope": "/maps/", "theme_color": "#3367D6" } ~~~ > 注意：請參閱[添加到主屏幕標準](https://developers.google.com/web/fundamentals/app-install-banners/#criteria)，了解顯示添加到主屏幕提示所需的特定屬性。 <br> ## 告訴瀏覽器您的清單 創建清單后，為包含Web應用程序的所有頁面添加 link標簽： ~~~ <link rel="manifest" href="/manifest.json"> ~~~ <br> ## 清單屬性 ### short_name 和/或 name 您必須至少提供 `short_name`或 `name` 屬性。 如果兩者都提供，則在用戶的主屏幕，啟動器或其他可能空間有限的地方使用 `short_name`。 `name` 用于應用安裝提示。 ``` "short_name": "Maps", "name": "Google Maps" ``` ### icons 當用戶將您的站點添加到其主屏幕時，您可以定義一組供瀏覽器使用的圖標。 這些圖標用于主屏幕，應用程序啟動器，任務切換器，啟動畫面等位置。 icons是一個圖像對象數組，每個對象應包括src，一個sizes屬性和圖像類型。 ``` "icons": [ { "src": "/images/icons-192.png", "type": "image/png", "sizes": "192x192" }, { "src": "/images/icons-512.png", "type": "image/png", "sizes": "512x512" } ] ``` > 成功：包括192x192像素圖標和512x512像素圖標。 Chrome會自動縮放設備的圖標。 如果您希望縮放自己的圖標并將其調整為像素完美，請以48dp的增量提供圖標。 ### start_url `start_url` 告訴瀏覽器應用程序在啟動時應該從哪里開始，并阻止應用程序啟動用戶在將應用添加到主屏幕時所處的頁面。 您的 `start_url` 應該將用戶直接引導到您的應用中，而不是產品目標網頁。 想一想用戶打開您的應用后想要做什么，并將它們放在那里。 ``` "start_url": "/?utm_source=a2hs" ``` > 成功：在start_url的末尾添加一個查詢字符串，以跟蹤您的應用啟動的頻率。 ### background_color 首次啟動應用程序時，會在啟動屏幕上使用background_color屬性。 ### display 您可以自定義啟動應用時顯示的瀏覽器UI。例如，您可以隱藏地址欄和瀏覽器邊。或者游戲可能想要完全全屏。 ~~~ "display": "standalone" ~~~ **參數** | 值 | 描述 | |---|---| | fullscreen | 在沒有任何瀏覽器UI的情況下打開Web應用程序，占用整個可用的顯示區域。 | | standalone | 打開Web應用程序，使其外觀和感覺就像一個獨立的本機應用程序。 該應用程序在自己的窗口中運行，與瀏覽器分開，并隱藏標準瀏覽器UI元素，如URL欄等。 | | minimal-ui | **Chrome不支持** 該模式類似于全屏，但為用戶提供了一些訪問用于控制導航（即，后退，前進，重新加載等）的最小UI元素集的方法。 | | browser | 標準的瀏覽器體驗。 | > 成功：要顯示**“添加到主屏幕提示”**，必須將顯示設置為 **`standalone`** 。 ### orientation 您可以強制執行特定的方向，這對于僅在一個方向上工作的應用程序（例如游戲）有利。 有選擇地使用它。 用戶更喜歡選擇方向。 ``` "orientation": "landscape" ``` ### scope 定義此Web應用程序的應用程序上下文的導航范圍。 這基本上限制了manifest可以查看的網頁。 如果用戶在范圍之外瀏覽應用程序，則返回到正常的網頁。start_url必須位于scope內。 ~~~ "scope": "/maps/" ~~~ 其他一些提示： * 如果您沒有在清單中包含范圍，則默認隱含范圍是您的Web應用程序清單所服務的目錄。 * scope屬性可以是相對路徑（../），也可以是任何更高級別的路徑（/），它可以增加Web應用程序中導航的覆蓋范圍。 * start_url必須在范圍內。 * start_url相對于scope屬性中定義的路徑。 * 以/開頭的start_url將始終是原點的根。 ### theme_color theme_color設置工具欄和任務切換器的顏色。 ``` "theme_color": "#3367D6" ``` > 成功：theme_color應與document head中指定的meta theme顏色匹配。 <br> ## 啟動畫面 當您的應用首次啟動時，瀏覽器可能需要一段時間才能啟動，然后初始內容將開始呈現。Chrome在首次繪制前顯示啟動畫面， 而不是像應用程序那樣向用戶顯示白色屏幕。 Chrome會自動從清單屬性創建啟動畫面，包括： * name * background_color * icons `background_color`應與加載頁面的顏色相同，以提供從初始屏幕到應用程序的平滑過渡。 ### 用于啟動畫面的圖標 Chrome會選擇與該設備的128dp圖標非常匹配的圖標。 128dp是啟動畫面上圖像的理想尺寸，意味著不會對圖像應用縮放。 同樣，在大多數情況下，提供192px和512px圖標就足夠了，但您可以根據需要提供其他圖標。  ## 測試清單 要驗證清單是否設置正確，您可以使用Chrome DevTools的 **Application** 面板中的 **Manifest** 選項卡。  如果您想要一種自動化方法來驗證您的網絡應用清單，請查看Lighthouse。 Lighthouse是一款網絡應用審核工具，可作為Chrome擴展程序或NPM模塊運行。 您向Lighthouse提供URL，它會針對該頁面運行一系列審核，然后在報告中顯示結果。 # 參考資料 [網絡應用清單](https://developers.google.com/web/fundamentals/web-app-manifest/)