前言
在 《一篇带你用 VuePress + Github Pages 搭建博客》中,我们使用 VuePress 搭建了一个博客,最终的效果查看:TypeScript 中文文档。
本篇我们讲讲如何兼容 PWA。
PWA
PWA,英文全称:Progressive Web Apps
, 中文翻译:渐进式 Web 应用。
引用 MDN 的介绍:
PWA 指的是使用指定技术和标准模式来开发的 Web 应用,这同时赋予它们 Web 应用和原生应用的特性。
例如一方面,Web 应用更加易于发现:相比于安装应用,访问一个网站显然更加容易和迅速。你还可以通过链接来分享 Web 应用。
另一方面,原生应用与操作系统可以更加完美的整合,也因此为用户提供了无缝的用户体验。你可以通过安装应用使得它在离线的状态下也可以运行;相较于使用浏览器访问,用户也更喜欢通过点击主页上的图标来访问它们喜爱的应用。
PWA 赋予了我们创建同时拥有以上两种优势的应用的能力。
体验
如果你之前没有了解过 PWA,大概率可能也不明白这是个什么效果,没有关系,我们直接看一个 PWA 应用示例,我们打开 https://m.weibo.cn/,这里是在电脑端打开的:
我们可以看到,在地址栏还有一个安装图标,点击一下,就会弹出安装应用的选项框:
我们点击安装后,该页面会自动关闭,然后开启一个应用窗口:
同时,打开 Mac 的启动台,我们会看到已经添加了微博的图标:
点击就会直接打开上面的应用窗口。
简单的来说,我们兼容 PWA,就是想要实现这样的桌面图标的功能,当然了, PWA 其他还有离线缓存、推送通知等功能,这里就不多说了。
开启 PWA
开启 PWA,需要注意三个点:
- 提供一个 manifest.json 文件,描述应用的名称、图标等信息
- 开启 Service Worker,这个交给现有的 PWA 插件来实现
- 开启 HTTPS
实践
1. 安装
插件地址:https://v1.vuepress.vuejs.org/zh/plugin/official/plugin-pwa.html
yarn add -D @vuepress/plugin-pwa
# OR npm install -D @vuepress/plugin-pwa
2. 修改 config.js
module.exports = {
head: