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 教程的最后一步：使用推送通知与用户共享公告，并帮助用户重新参与我们的应用。