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的测试域名才行
在这里插入图片描述

Vue3中封装vite-plugin-svg-icons插件并封装SvgIcon组件的步骤如下: 1. 首先安装vite-plugin-svg-icons插件和fast-glob依赖包,可以使用以下命令进行安装: ``` npm i vite-plugin-svg-icons npm i fast-glob ``` 2. 在项目的配置文件中进行插件的配置。具体配置方式可以参考vite-plugin-svg-icons的官方文档。 3. 将SVG图标文件放置在对应的路径下,并与iconDirs设置保持一致。 4. 在Vue组件中使用SvgIcon组件,并传递相应的props。例如,在index.vue文件中可以这样使用SvgIcon组件: ```html <template> <svg-icon :name="nameVal" color="blue" class-name="menu-svg-icon" :icon-title="iconTitle"></svg-icon> </template> <script setup> import { ref } from 'vue'; import SvgIcon from "@/components/SvgIcon.vue"; let iconTitle = ref('svg图片'); let nameVal = ref('layer'); </script> <style scoped> .menu-svg-icon { width: 180px; height: 180px; color: red !important; } </style> ``` 5. 最后,在需要全局引入SvgIcon组件的地方进行引入和使用。 请注意,这只是一个大致的步骤,具体的实现可能会根据项目的需求和配置方式有所差异。你可以根据自己的实际情况进行相应的调整和配置。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *3* [vue2+vite中,通过插件vite-plugin-svg-icons和fast-glob封装组件使用svg图片](https://blog.csdn.net/weixin_44867717/article/details/126603027)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT0_1"}}] [.reference_item style="max-width: 50%"] - *2* [【vue3】使用vite-plugin-svg-icons插件显示本地svg图标](https://blog.csdn.net/qq_36977923/article/details/127302147)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT0_1"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值