当前位置：文江博客知识库简体中文文档 Web Progressive_web_apps Installable_PWAs

让 PWA 易于安装 - 渐进式 Web 应用（PWA）编辑

上一页 Overview: Progressive 下一页

在上一篇文章，我们了解了如何通过service worker让js13kPWA 离线工作，我们可以更进一步，让用户如同本地应用一样在支持的移动浏览器上安装web应用。这篇文章讲述如何通过网页清单和添加到主屏特性来做到这一点。

这些技术允许应用从设备主屏直接启动，而不是启动浏览器键入URL。你的web应用可以作为一等公民和本地应用肩并肩。这样更容易访问，而且你可以指定应用全屏运行，没有浏览器界面，这样看起来更像一个本地应用。

要求

为了成为可安装网站，需要下列事情就位：

一份网页清单，填好正确的字段
网站的域必须是安全（HTTPS）的
一个本设备上代表应用的图标
一个注册好的service worker，可以让应用离线工作（这仅对于安卓设备上的Chrome浏览器是必需的）

清单文件

关键元素是一份网页清单，它通过JSON形式列举了网站的所有信息。

它通常位于网页应用的根目录。包含一些有用的信息，比如应用的标题，在一个移动OS上显示的代表该应用的不同大小的图标（例如，主屏图标）的路径，和用于加载或启动画面的背景颜色。这些信息是浏览器在安装web应用时和在主屏上显示应用需要的。

js13kPWA web应用的js13kpwa.webmanifest文件包含在index.html文件的<head>段，如下行所示：

<link rel="manifest" href="js13kpwa.webmanifest">

注意：过去有一些常用的扩展名用于清单：manifest.webapp 在Firefox OS应用清单中很流行，许多人使用manifest.json作为网页清单因为内容是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"
}

大部分字段无需解释，但是让我们分解一下文档并且详细解释这些字段：