vue3+ts+vite项目中使用vite-plugin-pwa搭建 PWA 项目，以及如何处理pwa安装图标的显示隐藏

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

1. 兼容性： 虽然现代浏览器对PWA的支持越来越好，但是在一些旧版本浏览器上可能无法正常运行。
2. 功能限制： 与本地应用程序相比，PWA的功能仍然有所限制。例如，PWA不能访问设备硬件，如摄像头或指纹识别器，也不能在后台运行。
3. 开发成本： 虽然PWA可以为用户提供更好的用户体验和更高的可靠性，但是创建一个PWA的开发成本可能会比创建一个Web应用程序更高。
4. 安全性： PWA的缓存技术和离线访问功能可能会引发一些安全问题，例如缓存数据被盗取或篡改。

主要觉得目前pwa普及性不高的原因就是优点不够优秀，缺点的1、4项又很头大。

在我看来，

pwa就只是浏览器的一个tab页，打开一个网站，然后把这个tab页套壳成桌面应用。

使用PWA

使用方法，是基于我们的Vue3项目已经存在的情况(

vue3+ts+vite

)，项目都没有的话，先去建项目！

安装

vite-plugin-pwa

npm i vite-plugin-pwa -D# yarn yarnadd vite-plugin-pwa -D# pnpm pnpmadd 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.tsimport{ VitePWA }from'vite-plugin-pwa'exportdefault{
  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>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()}})// 注册pwaconstpwaFunc=()=>{// 在主入口监听PWA注册事件,安装PWA时触发
      window.addEventListener('beforeinstallprompt', e =>{// 没有安装pwa时，网站会进入这里、// 安装pwa后，网站不会走这里，但是卸载后也会走这里// 所以，只要走了这里，按钮就是显示的，默认按钮不显示即可console.log('pwaFunc-显示按钮-显示按钮')
       pwaIconShow.value =true
        e.preventDefault()
        window.deferredPrompt = e
      })}// 用户点击pwa图标constaddPwaBtn=()=>{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

1. PWA 必须要 localhost 或 https 才能生效；
2. 更改vite.config.ts文件后，需要重启服务；
3. ios浏览器PWA不能够像在Android设备上一样被添加到主屏幕上，所以要是有业务代码（如：按钮）需要做判断显示隐藏。

代码生效的正确显示

安装后

其他PWA相关文章:

👉判断用户是否在pwa环境中打开运行？（已安装的 PWA 与未安装的 PWA 网站之间有什么区别？）
👉PWA的Web 应用清单manifest中的基本字段、建议字段、扩展字段、促销字段、功能字段。PWA如何设置启动画面
👉pwa在iframe下能否显示，以及在iframe下相关问题解析
👉PWA遇到的一些问题。PWA的manifest中display设置的显示模式区别；PWA设置display为fullscreen时安卓上的fixed消失隐藏；在ios系统下需要的兼容性设置；