Vue3引用PWA，vite-plugin-pwa的使用及注意要点

工作业务需求，需要给H5页面增加PWA功能，主要是需要有一键添加到桌面，而不是指引用户在浏览器工具栏操作。

查找了一些资料，主要是用到 Add to Home Screen，简称 A2HS，需要主要的是此方法只有部分浏览器支持，Mobile Chrome / Android Webview 从 31 版开始支持 A2HS，Opera for Android 从 32 版开始支持，Firefox for Android 从 58 版 (en-US) 开始支持。

Vue3+vite有个好用的插件 vite-plugin-pwa，只需要在vite.config.js做配置即可。

npm i vite-plugin-pwa -D 

// vite.config.js / vite.config.ts
import { VitePWA } from 'vite-plugin-pwa'

export default {
  plugins: [
    VitePWA({
    	manifest: {
          name: 'PWA应用',
          short_name: 'PWA',
          description: 'PWA应用测试',
          theme_color: '#182330',
          icons: [		//添加图标， 注意路径和图像像素正确
            {
              src: '/img/icon/icon_192.png',
              sizes: '192x192',
              type: 'image/png',
            },
            
          ]
        },
        registerType: 'autoUpdate',
        workbox: {
          globPatterns: ['**/*.{js,css,html,ico,png,jpg,svg}'],		//缓存相关静态资源
          runtimeCaching: [                                                     // 配置自定义运行时缓存
		        mode !== 'production'
		          ? {
		              urlPattern: ({ url }) => url.origin === 'https://app-api-0.com',
		              handler: 'NetworkFirst',
		              options: {
		                cacheName: 'wisbayar-api',
		                cacheableResponse: {
		                  statuses: [200]
		                }
		              }
		            }
		          : {
		              urlPattern: ({ url }) => url.origin === 'https://app-api.id',
		              handler: 'NetworkFirst',
		              options: {
		                cacheName: 'wisbayar-api',
		                cacheableResponse: {
		                  statuses: [200]
		                }
		              }
		            },
		        {
		          urlPattern: /\.(?:png|jpg|jpeg|svg)$/,
		          handler: 'CacheFirst',
		          options: {
		            cacheName: 'wisbayar-images',
		            expiration: {
		              // 最多30个图
		              maxEntries: 30
		            }
		          }
		        },
		        {
		          urlPattern: /.*\.js.*/,
		          handler: 'StaleWhileRevalidate',
		          options: {
		            cacheName: 'wisbayar-js',
		            expiration: {
		              maxEntries: 30, // 最多缓存30个，超过的按照LRU原则删除
		              maxAgeSeconds: 30 * 24 * 60 * 60
		            },
		            cacheableResponse: {
		              statuses: [200]
		            }
		          }
		        },
		        {
		          urlPattern: /.*\.css.*/,
		          handler: 'StaleWhileRevalidate',
		          options: {
		            cacheName: 'wisbayar-css',
		            expiration: {
		              maxEntries: 20,
		              maxAgeSeconds: 30 * 24 * 60 * 60
		            },
		            cacheableResponse: {
		              statuses: [200]
		            }
		          }
		        },
		        {
		          urlPattern: /.*\.html.*/,
		          handler: 'StaleWhileRevalidate',
		          options: {
		            cacheName: 'wisbayar-html',
		            expiration: {
		              maxEntries: 20,
		              maxAgeSeconds: 30 * 24 * 60 * 60
		            },
		            cacheableResponse: {
		              statuses: [200]
		            }
		          }
		        }
		      ]
        },
        devOptions: {
          enabled: true
        }
	})
  ]
}

/ main.js

// 在主入口监听PWA注册事件
window.addEventListener('beforeinstallprompt', (e) => {
    e.preventDefault();
    window.deferredPrompt = e;
})

/ App.vue (实际业务页面)
const openAddFlow = () => {
        if (isIOS()) {
        	// 如果是苹果手机，直接显示浏览器设置指引图
            showAddTipsDialog.value = true
        } else {
            try {
                window.deferredPrompt.prompt();
                window.deferredPrompt.userChoice.then((choiceResult) => {
                    if (choiceResult.outcome === 'accepted') {
                        // showAddToDesktop.value = false
                        localStorage.setItem('addDesktop',true)
                    } else {
                        console.log('User dismissed the A2HS prompt');
                    }
                    window.deferredPrompt = null;
                });
            } catch {
                showAddTipsDialog.value = true
            }
        }
 }

实际效果如上图，点击业务页面的悬浮窗口，如果是支持 A2HS 的浏览器会弹出下载提示，点击安装会自动安装H5应用。

开发过程序遇到一些注意的点和坑，这里记录一下，以免其他小伙伴重复尝试

1. vite.config.js里配置icons注意

icons 不能将size设置的太小，我一开始设置成 64x64，会报如下错误，至少是要144及以上的大小才行，另外如果icon设置大小与实际大小不匹配，也会报错。

2. 增加监听事件的时机

window.addEventListener('beforeinstallprompt', (e) => {
    e.preventDefault();
    window.deferredPrompt = e;
})

以上代码的执行时机很重要，最开始我都是放在App.vue的onMounted下执行，发现有时成功有时失败，放到main.js下面执行就每次都能成功，应是在要sw.js执行之前注册完事件才行，所以监听事件执行越早越好。

3. PWA只能在本地和带有https证书的域名下运行

如果是区域网192.168.0.xx下，你会发现报错 Page is not served form a secure origin
所以测试时只能在 http://localhost:8000/ 这种本地域名测试，手机要测试只能放到带https的测试域名才行