试着给VuePress添加渐进式Web应用(PWA)支持,基于vuepress/plugin-pwa,点亮离线访问

时间:2022-04-07 20:24:55

背景

有时候,我们也希望VuePress构建的文档中心能支持离线访问,这时候我们需要给他添加渐进式Web应用(PWA,Progressive Web App)的支持,根据官方文档指引,我们可以借助插件vuepress/plugin-pwa来添加PWA的支持。

试着给VuePress添加渐进式Web应用(PWA)支持,基于vuepress/plugin-pwa,点亮离线访问

PWA(Progressive Web Apps,渐进式 Web 应用)运用现代的 Web API 以及传统的渐进式增强策略来创建跨平台 Web 应用程序。这些应用无处不在、功能丰富,使其具有与原生应用相同的用户体验优势。

安装

npm install @vuepress/plugin-pwa

项目地址:https://v2.vuepress.vuejs.org/zh/reference/plugin/pwa.html

试着给VuePress添加渐进式Web应用(PWA)支持,基于vuepress/plugin-pwa,点亮离线访问

该插件使用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生成一组吧。

试着给VuePress添加渐进式Web应用(PWA)支持,基于vuepress/plugin-pwa,点亮离线访问

使用应用程序清单(Web App Manifest)

前往.vuepress目录,编辑config.js文件,设置插件plugins配置。

plugins: [
['@vuepress/pwa', {
skipWaiting: true,
serviceWorkerFilename: 'service-worker.js'
}]
]

试着给VuePress添加渐进式Web应用(PWA)支持,基于vuepress/plugin-pwa,点亮离线访问

这里设置skipWaiting: true意味着在新的Service Worker就绪之后,会立即激活它。

这里我还多指定了一个serviceWorkerFilename,默认值就是service-worker.js,如果你要改也是可以的,用于指定生成的Service Worker文件路径。

如果是IIS部署,还需要添加新的MIME类型

试着给VuePress添加渐进式Web应用(PWA)支持,基于vuepress/plugin-pwa,点亮离线访问

试着给VuePress添加渐进式Web应用(PWA)支持,基于vuepress/plugin-pwa,点亮离线访问

.webmanifest
application/json

试着给VuePress添加渐进式Web应用(PWA)支持,基于vuepress/plugin-pwa,点亮离线访问

这样,访问/assets/config/manifest.webmanifest才可以正常。

试着给VuePress添加渐进式Web应用(PWA)支持,基于vuepress/plugin-pwa,点亮离线访问

效果

之前的效果

试着给VuePress添加渐进式Web应用(PWA)支持,基于vuepress/plugin-pwa,点亮离线访问

之后的效果

拥有PWA支持的网站会多一个按钮。

试着给VuePress添加渐进式Web应用(PWA)支持,基于vuepress/plugin-pwa,点亮离线访问

点击这个按钮,会弹出引导安装这个PWA应用的提示。

试着给VuePress添加渐进式Web应用(PWA)支持,基于vuepress/plugin-pwa,点亮离线访问

安装之后,会先直接运行一次,惊艳,它就像一个原生的应用那样。

试着给VuePress添加渐进式Web应用(PWA)支持,基于vuepress/plugin-pwa,点亮离线访问

只是在右侧顶部这里,会比其他的非PWA多三个点的菜单。

试着给VuePress添加渐进式Web应用(PWA)支持,基于vuepress/plugin-pwa,点亮离线访问

关于PWA的HTTPS限制

如果你是Localhost或者127.0.0.1的模式访问是不限制的,但是如果你走域名,你会发现,PWA不生效,原因在于:

PWA只能在HTTPS协议下使用。

这里如果部署容器是IIS,可以走https://certifytheweb.com 这个工具弄一下。

试着给VuePress添加渐进式Web应用(PWA)支持,基于vuepress/plugin-pwa,点亮离线访问

先新建一个联系人,就是给一个邮件地址,如果证书过期了会邮件通知你。

试着给VuePress添加渐进式Web应用(PWA)支持,基于vuepress/plugin-pwa,点亮离线访问

新建证书,选择IIS站点,下拉选择之后,会读到这个站点绑定的域名。

试着给VuePress添加渐进式Web应用(PWA)支持,基于vuepress/plugin-pwa,点亮离线访问

点击请求证书。

试着给VuePress添加渐进式Web应用(PWA)支持,基于vuepress/plugin-pwa,点亮离线访问

正在申请证书。

试着给VuePress添加渐进式Web应用(PWA)支持,基于vuepress/plugin-pwa,点亮离线访问

申请成功。

试着给VuePress添加渐进式Web应用(PWA)支持,基于vuepress/plugin-pwa,点亮离线访问

这时候,再用HTTPS请求网站,你就发现,已经是有证书了,是不是很赞。

试着给VuePress添加渐进式Web应用(PWA)支持,基于vuepress/plugin-pwa,点亮离线访问

参考