参考官方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

前提概要

最近项目更新需求中，希望使用<code>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', // 大于144

type: '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}'],// 缓存相关静态资源，这个放开会导致页面html被缓存，谨慎使用

},

devOptions: {

enabled: true

}

})

]

}

其实主要分为两大配置：

manifest： 详细官方配置说明workbox： 详细官方配置说明

业务代码页面使用、处理pwa安装图标的显示隐藏

// xxx.vue

<template>

<button @click"addPwaBtn">pwa下载安装按钮</button>

</template>

<script lang="ts" setup>code>

const pwaIconShow =ref(false)

const showAddTipsDialog =ref(false)

onMounted(() => { -- -->

// 因为beforeinstallprompt事件在ios上目前不支持，所以不需要判断是否是ios

// 这块，还有一篇，是否在pwa环境中的判断逻辑，可以看文章末尾的另一篇链接（http://t.csdnimg.cn/Kk6lM）

if (isIOS()) {

console.log('ios-显示按钮')

// 如果是苹果手机，页面的安装pwa按钮一直显示

pwaIconShow.value = true

} else {

pwaFunc()

}

})

// 注册pwa

const pwaFunc = () => {

// 在主入口监听PWA注册事件,安装PWA时触发

window.addEventListener('beforeinstallprompt', e => {

// 没有安装pwa时，网站会进入这里、

// 安装pwa后，网站不会走这里，但是卸载后也会走这里

// 所以，只要走了这里，按钮就是显示的，默认按钮不显示即可

console.log('pwaFunc-显示按钮-显示按钮')

pwaIconShow.value = true

e.preventDefault()

window.deferredPrompt = e

})

}

// 用户点击pwa图标

const addPwaBtn= () => {

if (isIOS()) {

// 如果是苹果手机，直接显示浏览器设置指引图

showAddTipsDialog.value = true

} else {

try {

window.deferredPrompt.prompt()

window.deferredPrompt.userChoice.then(choiceResult => {

if (choiceResult.outcome === 'accepted') {

console.log('addDesktop-pwa用户安装了PWA——可打印---不显示按钮')

pwaIconShow.value = false

} else {

console.log('用户拒绝安装PWA--可打印')

}

window.deferredPrompt = null

})

} catch {

console.log('error-pwa-不支持？不显示？')

pwaIconShow.value = false

}

}

}

</script>

Tips

👉PWA遇到的一些问题。PWA的<code>manifest中display设置的显示模式区别；PWA设置display为fullscreen时安卓上的fixed消失隐藏；在ios系统下需要的兼容性设置；