pwa的基本使用

1.pwa的安装配置2.点击按钮安装pwa

1.pwa的安装配置

manifest.json

{ "name": "名称", "short_name": "名称", "description": "", "start_url": "/index.html", "display": "standalone", "background_color": "#3B77F7", "theme_color": "#FFFFFF", "icons": [ { "src": "/static/title.png", "sizes": "192x192", "type": "image\/png" } ] }

注意事项： 1.vue项目打包后可能需要适当修改manifest.json中路径前缀，视情况而定 2. 图片大小一定要规范，src也可以使用线上地址

htm中引入即可

<link rel="manifest" href="/public/manifest.json"> 2.点击按钮安装pwa

uniapp示例

//验证是否可以安装pwa const deferredPrompt=ref(""); onMounted(() => { let systemInfo = uni.getSystemInfoSync(); //判断 if (systemInfo.platform !== 'ios') { window.addEventListener('beforeinstallprompt', beforeInstallPromptListener) } }) // 组件卸载时移除事件监听 onBeforeUnmount(() => { window.removeEventListener('beforeinstallprompt', beforeInstallPromptListener) }) // 监听 beforeinstallprompt 事件 是否具备安装pwa条件 const beforeInstallPromptListener = (event) => { // 阻止默认的安装提示 event.preventDefault() // 保存事件对象 deferredPrompt.value = event // 显示安装按钮 //业务代码 ishowTips3.value = true } //点击安装pwa function Installation() { console.log(deferredPrompt.value); if (deferredPrompt.value) { deferredPrompt.value.prompt() deferredPrompt.value.userChoice.then((choiceResult) => { if (choiceResult.outcome === 'accepted') { console.log('用户安装了 PWA') } else { console.log('用户拒绝安装 PWA') let systemInfo = uni.getSystemInfoSync(); //判断 if (systemInfo.platform !== 'ios') { window.addEventListener('beforeinstallprompt', beforeInstallPromptListener) } } deferredPrompt.value = null }) } }