参考官方github地址：
https://github.com/vite-pwa/vite-plugin-pwa
官方文档地址：
https://vite-pwa-org.netlify.app/guide
MDN地址：
https://developer.mozilla.org/zh-CN/docs/Web/Progressive_web_apps
前提概要
最近项目更新需求中，希望使用PWA，用来方便用户添加网站到桌面。
解释PWA
渐进式 Web 应用（Progressive Web App，PWA） 是一个使用 web 平台技术构建的应用程序，但它提供的用户体验就像一个特定平台的应用程序。
它像网站一样，PWA 可以通过一个代码库在多个平台和设备上运行。它也像一个特定平台的应用程序一样，可以安装在设备上，可以离线和在后台运行，并且可以与设备和其他已安装的应用程序集成。
具体怎么详细解释可以看官方文档，不过
首先我们需要知道的一点：
PWA支持哪些操作系统：
- Android： PWA在Android设备上得到最好的支持。Android在Chrome浏览器中支持PWA，
用户可以将PWA添加到主屏幕上，并在离线状态下使用。 - iOS： PWA在iOS设备上也得到了一定的支持。
iOS 11.3以上的版本支持PWA，但是在iOS设备上，PWA不能够像在Android设备上一样被添加到主屏幕上。（👈这个很重要） - Windows： Windows 10中的Microsoft Edge浏览器支持PWA。
用户可以将PWA添加到任务栏或开始菜单上，并在离线状态下使用。 - macOS： Safari浏览器
在macOS 10.13.4以上的版本中开始支持PWA。用户可以将PWA添加到Dock中，并在离线状态下使用。
PWA的优点
这点可自行百度，这块官方说的优点一套一套的，不过我们的需求主要是看重：
- 可安装性： PWA可以
被添加到主屏幕上，并在离线状态下使用，就像本地应用程序一样。这使得用户可以更方便地访问应用程序，并且可以更好地保留应用程序的使用记录。 - 快速性： PWA使用缓存技术和预加载技术，使得应用程序可以快速加载并响应用户操作。这意味着用户可以更快地访问应用程序，并
获得更好的用户体验。
PWA的缺点
- 兼容性： 虽然现代浏览器对PWA的支持越来越好，但是在一些
旧版本浏览器上可能无法正常运行。 - 功能限制： 与本地应用程序相比，PWA的功能仍然有所限制。例如，PWA不能访问设备硬件，如摄像头或指纹识别器，也不能在后台运行。
- 开发成本： 虽然PWA可以为用户提供更好的用户体验和更高的可靠性，但是创建一个PWA的开发成本可能会比创建一个Web应用程序更高。
- 安全性： PWA的缓存技术和离线访问功能可能会引发一些安全问题，例如缓存数据被盗取或篡改。
主要觉得目前pwa普及性不高的原因就是优点不够优秀，缺点的1、4项又很头大。
在我看来，pwa就只是浏览器的一个tab页，打开一个网站，然后把这个tab页套壳成桌面应用。
使用PWA
使用方法，是基于我们的Vue3项目已经存在的情况(vue3+ts+vite)，项目都没有的话，先去建项目！
安装vite-plugin-pwa
npm i vite-plugin-pwa -D
# yarn
yarn add vite-plugin-pwa -D
# pnpm
pnpm add vite-plugin-pwa -D
从 v0.17 开始，vite-plugin-pwa需要Vite 5。
从 v0.16 开始vite-plugin-pwa需要Node 16 或以上：workbox v7需要Node 16 或以上。
从 v0.13 开始，vite-plugin-pwa需要Vite 3.1 或更高版本。
vite.config.ts文件配置
添加VitePWA插件vite.config.js / vite.config.ts并配置：
// vite.config.js / vite.config.ts
import { VitePWA } from 'vite-plugin-pwa'export default {plugins: [VitePWA({registerType: 'autoUpdate', // 如果此项值为autoUpdate，则为自动给更新manifest: {name: 'demo name', // 项目名id: "csdn",short_name: 'MyApp',description: '一个Vite PWA测试APP', theme_color: '#DC143C', // 红 // 用于设置工具栏的颜色，并且可以反映在任务切换器中的应用预览中。theme_color 应与文档标头中指定的 meta 主题颜色一致。background_color: '#FFFF00', // 黄-首次在移动设备上启动应用时，启动画面会使用 background_color 属性。display: "minimal-ui", // 您可以自定义应用启动时显示的浏览器界面。例如，您可以隐藏地址栏和浏览器界面元素icons: [ //添加图标，注意路径和图像像素正确，sizes必须和图片的尺寸一致{src: 'logo.png',sizes: '500x500', // 大于144type: 'image/png',},],screenshots: [ //{"src": "111.png","type": "image/png","sizes": "540x720", "form_factor": "narrow"},{"src": "222.png","type": "image/png","sizes": "720x540","form_factor": "wide"}]},workbox: {globPatterns: ['**/*.{js,css,html,ico,png,jpg,svg}'], //缓存相关静态资源},devOptions: {enabled: true}})]
}
其实主要分为两大配置：
- manifest： 详细官方配置说明
- workbox： 详细官方配置说明
main.ts文件配置
// main.ts
// 在主入口监听PWA注册事件
window.addEventListener('beforeinstallprompt', e => {e.preventDefault()window.deferredPrompt = e
})
业务代码页面使用
// xxx.vue
const openAddFlow = () => {if (isIOS()) {// 如果是苹果手机，直接显示浏览器设置指引图showAddTipsDialog.value = true} else {try {window.deferredPrompt.prompt()window.deferredPrompt.userChoice.then(choiceResult => {if (choiceResult.outcome === 'accepted') {console.log('addDesktop-pwa')localStorage.setItem('addDesktop', true)} else {console.log('User dismissed the A2HS prompt')}window.deferredPrompt = null})} catch {console.log('error-pwa')}}
}
Tips
- PWA 必须要
localhost或https才能生效。 - ios浏览器PWA不能够像在Android设备上一样被添加到主屏幕上，所以要是有业务代码（如：按钮）需要做判断显示隐藏。
代码生效的正确显示
安装后
