比小程序酷炫，一秒将你的网站变成是App

[calidion]

几面有一期我们介绍了渐进式Web Apps(PWA)。这一期我们介绍一下PWA使用到的一个技术，就是Web App Manifest。
详细的Manifest说明可以在这里找到：
https://developer.mozilla.org/en-US/docs/Web/Manifest

下面我们介绍如何快速制作一个Manifest，让你的网站1秒变成是APP。

这里我们选择了田一块的商户版作为原型，介绍如何实作一个Web App的Manifest。

添加html代码

<link rel="manifest" href="/manifest.json">

添加manifest.json

manifest.json的文件内容如下：

{
  "short_name": "田一块商户",
  "name": "田一块商户端(v0.1)",
  "icons": [
    {
      "src": "images/logo.png",
      "type": "image/png",
      "sizes": "48x48"
    },
    {
      "src": "images/logo.png",
      "type": "image/png",
      "sizes": "96x96"
    },
    {
      "src": "images/logo.png",
      "type": "image/png",
      "sizes": "192x192"
    }
  ],
  "start_url": "/",
  "theme_color": "#40cea0",
  "display": "standalone",
  "orientation": "portrait"

}

这里最重要的四个参数：

1. short_name 安装成APP后的保存在桌面的名字
2. name 再次打开时显示的名字
3. icons 在系统不同的场合下使用的图标，可以根据需要设置不同的照片，也可以设置为同一张照片。
4. start_url 启动的初始网络地址。

将网站安装成App

1. 安卓手机需要安装Chrome浏览器
   

2. 输入已经包含了manifest.json的信息的网站地址。
   这里你可以输入：http://business.t1bao.com/
   

3. 点击右上角的三个点
   如下图
   

4. 选择添加到主屏幕
   

5. 这时会弹出来一个对话框，在这里可以输入你想取的名字即可，这里我们选择默认名字。
   

6. 点击[添加]安扭，即添加成功。在屏幕的下方会出现一个提示，如下图
   

7. 这时在手机桌面上就会得到一个新的图标。如下图。
   

这时我们的程序就安装完成了。

打开

点击新得到的图标就可以访问PWA的功能了。
除了少部分的硬件功能不能使用外，大部分HTML5的硬件与网站功能都可以使用。

1. 打开时会显示图标与应用名称：

2. 等加载完成后就会进入正常的页面：
   

这样，我们的应用就成功的安装到了用户的手机上。是不是比微信小程序实际多了？
由于Web App Manifest是标准，所以所有平台都是支持的，并且是开放的技术，是不是比小程序要酷炫多了？

PWA还有很多好玩的技术，下面我们还会继续讲解其它的PWA技术。欢迎关注微信公众号：frontend-guru了解最新的文章。