试着给VuePress添加渐进式Web应用(PWA)支持，基于vuepress/plugin-pwa，点亮离线访问
背景
有时候，我们也希望VuePress构建的文档中心能支持离线访问，这时候我们需要给他添加渐进式Web应用(PWA，Progressive Web App)的支持，根据官方文档指引，我们可以借助插件vuepress/plugin-pwa来添加PWA的支持。
PWA（Progressive Web Apps，渐进式 Web 应用）运用现代的 Web API 以及传统的渐进式增强策略来创建跨平台 Web 应用程序。这些应用无处不在、功能丰富，使其具有与原生应用相同的用户体验优势。
安装
npm install @vuepress/plugin-pwa
项目地址：https://v2.vuepress.vuejs.org/zh/reference/plugin/pwa.html
该插件使用workbox-build来生成Service Worker文件，并通过register-service-worker来注册Service Worker。
配置
建立应用程序清单(Web App Manifest)
Web应用程序清单在一个JSON文本文件中提供有关应用程序的信息（如名称，作者，图标和描述）。manifest的目的是将Web应用程序安装到设备的主屏幕，为用户提供更快的访问和更丰富的体验。
Web应用程序清单是被称为渐进式Web应用程序(PWA)的Web技术集合的一部分, 它们是可以安装到设备的主屏幕的网络应用程序，而不需要用户通过应用商店，伴随着其他功能, 比如离线可用和接收推送通知。
我们前往.vuepress\public目录找一个位置建立一个manifest.webmanifest文件，这里我建在assets\config目录下，而且约定都对应的图标文件放在assets\img目录下。
{
"name": "xxxxxxxxxxxxxxxxx",
"short_name": "xxxxxxxxxxxxxx",
"icons": [
{
"src": "/assets/img/android-chrome-192x192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "/assets/img/android-chrome-512x512.png",
"sizes": "512x512",
"type": "image/png"
}
],
"start_url": "/index.html",
"theme_color": "#ffffff",
"background_color": "#ffffff",
"display": "standalone"
}
有人问，图标从哪来，上Favicon Generator或者imageGenerator生成一组吧。
使用应用程序清单(Web App Manifest)
前往.vuepress目录，编辑config.js文件，设置插件plugins配置。
plugins: [
['@vuepress/pwa', {
skipWaiting: true,
serviceWorkerFilename: 'service-worker.js'
}]
]
这里设置skipWaiting: true意味着在新的Service Worker就绪之后，会立即激活它。
这里我还多指定了一个serviceWorkerFilename，默认值就是service-worker.js，如果你要改也是可以的，用于指定生成的Service Worker文件路径。
如果是IIS部署，还需要添加新的MIME类型
.webmanifest
application/json
这样，访问/assets/config/manifest.webmanifest才可以正常。
效果
之前的效果
之后的效果
拥有PWA支持的网站会多一个按钮。
点击这个按钮，会弹出引导安装这个PWA应用的提示。
安装之后，会先直接运行一次，惊艳，它就像一个原生的应用那样。
只是在右侧顶部这里，会比其他的非PWA多三个点的菜单。
关于PWA的HTTPS限制
如果你是Localhost或者127.0.0.1的模式访问是不限制的，但是如果你走域名，你会发现，PWA不生效，原因在于：
PWA只能在HTTPS协议下使用。
这里如果部署容器是IIS，可以走https://certifytheweb.com 这个工具弄一下。
先新建一个联系人，就是给一个邮件地址，如果证书过期了会邮件通知你。
新建证书，选择IIS站点，下拉选择之后，会读到这个站点绑定的域名。
点击请求证书。
正在申请证书。
、
申请成功。
这时候，再用HTTPS请求网站，你就发现，已经是有证书了，是不是很赞。
