如何使 PWA 可安装
在本教程的最后一步中，我们了解了示例应用程序 js13kPWA 如何借助其 服务工作者 在离线状态下工作，但我们还可以更进一步，允许用户在他们的设备上安装 Web 应用程序。安装的 Web 应用程序随后可以像任何操作系统原生应用程序一样由用户启动。本文介绍了如何使用 Web 应用程序的清单来实现这一点。
Web 应用程序清单允许应用程序直接从设备的主屏幕、任务栏或停靠栏启动，而不是用户必须打开浏览器，然后通过使用书签或键入 URL 来导航到网站。您的 Web 应用程序可以与原生应用程序并排放置，这使得用户更容易访问。此外，您可以指定应用程序以全屏或独立模式启动，从而删除默认的浏览器用户界面，否则该界面将存在，从而创造出更加无缝且原生般的感觉。
要了解更多信息，请参阅 使 PWA 可安装。
要求
要使我们的示例应用程序可安装，需要以下内容
- 一个 Web 应用程序清单，其中 填写了正确的成员。
- 网站要从安全的 (HTTPS) 域提供服务。
- 一个图标来表示设备上的应用程序。
Web 应用程序清单文件
关键要素是一个 Web 应用程序清单文件，它以 JSON 格式列出了有关网站的所有信息。
它通常位于 Web 应用程序的根文件夹中。它包含有用的信息，例如应用程序的标题、指向不同大小图标的路径（这些图标可用于在操作系统上表示应用程序，例如主屏幕上的图标、开始菜单中的条目或桌面上的图标），以及在加载或启动屏幕中使用的背景颜色。在安装过程中以及在设备的应用程序启动界面（例如移动设备的主屏幕）内，浏览器需要这些信息才能正确呈现 Web 应用程序。
js13kpwa.webmanifest 文件 js13kPWA Web 应用程序包含在 <head> 块中 index.html 文件使用以下代码行
<link rel="manifest" href="js13kpwa.webmanifest" />
注意： 许多人使用 manifest.json 作为 Web 应用程序清单，因为内容以 JSON 结构组织。但是，.webmanifest 文件格式在 W3C 清单规范 中明确提及，因此我们将在这里使用它。
文件内容如下
{
"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 应用程序清单参考 以获取详细信息。
安装 PWA
使用我们 Web 应用程序清单中找到的信息，支持的浏览器可以向用户显示安装提示。当用户访问 PWA 时，可能会提示他们将应用程序安装到设备上。当他们接受提示时，PWA 就像其他操作系统原生应用程序一样安装，用户可以像往常一样启动和使用 Web 应用程序。
要详细了解用户如何安装 PWA，请参阅 安装和卸载 Web 应用程序。
启动屏幕
在某些设备上，还会根据清单中的信息生成启动屏幕，该屏幕将在启动 PWA 时以及 PWA 正在加载时显示。
图标以及主题和背景颜色用于创建此屏幕。