维护 manifest.json

开始之前，您可以查看添加到屏幕相关内容，快速掌握相关基础。

为了实现 PWA 应用添加至桌面的功能，我们需要准备 manifest.json 文件配置应用的图标、名称等信息。 项目中这些信息在哪里配置呢?

如何配置

项目的配置文件一般在 config 文件夹下，这里的配置也不例外，就在 config/manifest.js 中，开发中我们一般只需要关注该文件的配置内容即可满足开发需求。 config/manifest.js 中配置了应用添加到屏幕所需的相关字段（这里给出部分必须的参数，具体的可以参看配置文档及示例），根据这些配置，项目 build 后会自动生成所需的 manifest.json 文件。下面是具体的配置代码及简单的介绍：

  1. module.exports = {
  2.     // 生成的文件名称，如果要修改，引用路径要一起修改
  3.     fileName: 'manifest.json',
  5.     // 完整名称
  6.     name: 'pwa-news',
  8.     // 短名称
  9.     shortName: 'pwa-news',
  11.     // 应用图标列表
  12.     icons: [
  13.         {
  14.             src: '/static/img/icons/android-chrome-192x192.png',
  15.             sizes: '192x192',
  16.             type: 'image/png'
  17.         },
  18.         {
  19.             src: '/static/img/icons/android-chrome-512x512.png',
  20.             sizes: '512x512',
  21.             type: 'image/png'
  22.         }
  23.     ],
  25.     // 应用启动地址
  26.     startUrl: '/',
  28.     // 指定 PWA 从主屏幕点击启动后的显示类型
  29.     display: 'standalone',
  31.     // 启动画面的背景颜色
  32.     backgroundColor: '#000000',
  34.     // 指定PWA的主题颜色
  35.     themeColor: '#3e98f0'
  36. };

如何自动生成

在 webpack 打包时，我们提供了一个 build/plugins/manifest-webpack-plugin 的插件来完成这个任务，生成规范的 manifest.json 文件。该插件干了几件事：

  • 将配置文件中的键名驼峰式转换成以 _ 连接的形式，并替换原对象，得到符合规范的配置内容
  • 将整理好的配置内容 写入指定路径下的 manifest.json 中待引用
  • 替换 index.html 中的主题背景色 theme-color 为配置项中的主题色

如何测试验证

  • 本地起服务，通过安卓手机设置手动代理，在 Chrome 浏览器中通过 localhost 访问服务站点，点击功能菜单中的 “添加到主屏幕”，在桌面检验是否添加成功，配置信息是否生效

  • 项目 build 后部署启动过后（一定要 https 哦），通过安卓手机在 Chrome 浏览器中访问站点，点击功能菜单中的 “添加到主屏幕”，在桌面检验是否添加成功，配置信息是否生效