Vue项目PWA化

Posted 2023-03-23

参考技术A PWA化主要解决了两大问题： 1）使web app有沉浸式体验，也就是更靠近原生体验。如：去掉浏览器的地址栏和底部工具栏；在桌面上生成图标，方便再次进入。 2）提供独立于浏览器的缓存，并且可以接收服务器的推送。如：在没有网络，或者网络状态较差的时候，仍可访问缓存在本地的数据.

1. 通过vue-cli脚手架进行安装pwa插件

此时会生成manifest.json和registerServiceWorker.js两个文件。
2. 配置manifest.json文件.(manifest.json文件主要是配置图标，app名称，显示方式等) 参考MDN手册

3. 在index.html中引入manifest.json

4. registerServiceWorker.js文件(registerServiceWorker.js主要是注册Service Worker。SW可以用于消息推送，缓存管理、后台同步、拦截和处理网络请求等。注意：使用SW需要https及浏览器兼容)

5)配置vue.config.js文件,控制Service Worker行为。设置缓存逻辑、文件名字等。 参考@vue/cli-plugin-pwa 及 workbox参考