js13kGames：如何使 PWA 可安裝
在本教程的最後一步，我們瞭解了示例應用程式 js13kPWA 如何透過其 Service Worker 離線工作，但我們還可以更進一步，允許使用者在其裝置上安裝此 Web 應用。安裝後的 Web 應用即可像任何作業系統原生應用一樣由使用者啟動。本文將介紹如何透過 Web 應用的 manifest 檔案來實現這一點。
Web 應用 manifest 檔案允許應用直接從裝置的“主螢幕”、“工作列”或“Dock”啟動，而無需使用者開啟瀏覽器然後透過書籤或輸入 URL 來導航到該網站。您的 Web 應用可以與原生應用程式並列，從而更方便使用者訪問。此外，您可以指定應用以全屏或獨立模式啟動，從而移除預設存在的瀏覽器使用者介面，創造更無縫、更類似原生應用的感覺。
要了解更多資訊，請參閱 使 PWA 可安裝。
依賴項
為了使我們的示例應用程式可安裝，需要以下內容：
- 一個 Web 應用 manifest 檔案，其中 填入了正確的成員。
- 網站需要透過安全的（HTTPS）域名提供服務。
- 一個用於在裝置上表示應用的圖示。
Web 應用 manifest 檔案
關鍵要素是 Web 應用 manifest 檔案，它以 JSON 格式列出了關於網站的所有資訊。
它通常位於 Web 應用的根資料夾中。它包含有用的資訊，例如應用的標題、不同尺寸圖示的路徑（這些圖示可用於在作業系統中表示應用，例如主螢幕上的圖示、開始選單中的條目或桌面上的圖示），以及用於載入或啟動螢幕的背景顏色。瀏覽器在安裝過程中以及在裝置的啟動介面（如移動裝置的主螢幕）中正確顯示 Web 應用時，都需要這些資訊。
js13kpwa.webmanifest 檔案（來自 js13kPWA Web 應用）透過以下程式碼行包含在 index.html 檔案的 <head> 塊中：
<link rel="manifest" href="js13kpwa.webmanifest" />
注意： 許多人使用 manifest.json 作為 Web 應用 manifest，因為其內容是 JSON 結構。然而，.webmanifest 檔案格式在 W3C manifest 規範中有明確提及，所以我們在這裡使用它。
檔案的內容如下所示：
{
"name": "js13kGames Progressive Web App",
"short_name": "js13kPWA",
"description": "Progressive Web App that lists games submitted to the A-Frame category in the js13kGames 2017 competition.",
"icons": [
{
"src": "icons/icon-32.png",
"sizes": "32x32",
"type": "image/png"
},
// …
{
"src": "icons/icon-512.png",
"sizes": "512x512",
"type": "image/png"
}
],
"start_url": "/pwa-examples/js13kpwa/index.html",
"display": "fullscreen",
"theme_color": "#B12A34",
"background_color": "#B12A34"
}
大多數成員不言自明。以下是對上一程式碼示例中成員的描述：
name：您的 Web 應用的全名。short_name：在主螢幕上顯示的簡稱。description：一兩句話解釋您的應用的作用。icons：關於應用圖示的資訊 — 源 URL、尺寸和型別。請確保至少包含幾個，以便為使用者的裝置選擇最合適的圖示。請參閱 定義您的應用圖示。start_url：啟動應用時要顯示的索引文件。display：應用的顯示方式；可以是fullscreen、standalone、minimal-ui或browser。theme_color：UI 的主色，由作業系統使用。background_color：用作應用預設背景的顏色，在安裝期間和啟動螢幕上使用。
您可以使用的成員比上面列出的要多 — 請務必檢視 Web App Manifest 參考以獲取詳細資訊。
安裝 PWA
利用 Web 應用 manifest 中的資訊，支援的瀏覽器可以向用戶顯示安裝提示。當用戶訪問 PWA 時，可能會提示他們將其安裝到裝置上。當用戶接受提示後，PWA 將像其他作業系統原生應用一樣被安裝，使用者可以像往常一樣啟動和使用該 Web 應用。
要了解有關使用者如何安裝 PWA 的更多資訊，請參閱 安裝和解除安裝 Web 應用。
啟動螢幕
在某些裝置上，啟動螢幕也會根據 manifest 中的資訊生成，該螢幕在 PWA 啟動和載入過程中顯示。
圖示以及主題和背景顏色用於建立此螢幕。
總結
在本文中，我們瞭解瞭如何透過配置良好的 Web 應用 manifest 使 PWA 可安裝，以及使用者如何將其安裝到他們的裝置上。
現在，讓我們進入 PWA 教程的最後一步：使用推送通知與使用者共享公告，並幫助使用者重新參與我們的應用。