步步提高网站体验系列之——PWA（Manifest）

前言

接上篇步步提高网站体验系列之——PWA（Service Worker）。，这次通过manifest.json来实现将网站添加到主屏幕 目的其实只有一个：吸引并留住用户。

文章目录如下：

• manifest.json
  • 简介
  • 兼容性
  • 依赖
  • 实现
  • 运行结果

manifest.json简介

PWA 提供了 manifest.json 配置文件，可以让开发者自定义添加至桌面时的图标、显示名称、启动方式等等信息，并提供 API 方便开发者管理网络应用安装横幅，让用户可以在没有应用程序商店的情况下方便快捷地将站点添加到主屏幕中。向用户提供更丰富的离线体验。

manifest 兼容性

当前 manifest.json 的标准仍属于草案阶段。从下图可以看出chrome在安卓设备上已经全面支持了，在桌面版部分支持。safari也是部分支持

注：大部分部分支持的浏览器主要是还不能支持一些事件如appinstalled，beforeinstallprompt

亲测chrome(70)桌面版和iphone xr上safari可用

manifest 依赖

• 站点部署 manifest.json
• 站点注册 Service Worker
• 站点支持 HTTPS 访问

Manifest 实践

1. 配置webpack，在build时将manifest.json文件放在网站根目录下

const CopyWebpackPlugin = require('copy-webpack-plugin')

    new CopyWebpackPlugin([
      {
		...
	      // add manifest.json to dist
	      {
	        from: path.resolve(__dirname, '../src/pwa/manifest.json'),
	        to: config.build.assetsRoot,
	        ignore: ['.*']
	      },
      ...
    ])

2. 配置manifest.json

{
    "name": "小果小站",
    "short_name": "小果小站",
    "start_url": "/",
    "display": "standalone",
    "background_color": "#333",
    "description": "个人技术博客站点",
    "orientation": "portrait-primary",
    "theme_color": "#5eace0",
    "icons": [{
        "src": "static/avatar.png",
        "sizes": "144x144 48x48 96x96 128x128 256x256",
        "type": "image/png"
    }]
}

主要配置属性如下：

name : 应用名称，用于安装横幅、启动画面显示

short_name: 应用短名称，用于主屏幕显示

icons: 应用图标列表

start_url: 应用启动地址

display: 显示类型
注：本例中设为standalone，即浏览器相关UI（如导航栏、工具栏等）将会被隐藏

orientation: 应用显示方向
注：本例中设为portrait-primary，即竖屏

manifest 运行结果

先看chrome桌面版：

点击Add后，出现弹框：

成功添加后，在主屏幕：

注意：第一次添加成功后，再点击add to homescreen没有反应，是因为chrome只允许为同一个域名添加一个web app.

如果要测试可以输入 chrome://apps，删除图标后重新添加

再看safari iphone XR版：

manifest.json就到这里，下一步实现PWA Notification