一键安装pwa软件到安卓手机桌面，手动触发安装pwa弹窗

2024-07-01 14:38| 来源: 网络整理| 查看: 265

想要手动触发安装弹窗，可以看官方文档：https://web.dev/learn/pwa/installation?hl=zh-cn

需要阻止默认安装事件：

let deferredPrompt // 阻止默认弹出安装事件 window.addEventListener('beforeinstallprompt', (event) => { console.log('beforeinstallprompt-------') // 阻止默认行为 event.preventDefault() // 保存事件，稍后触发安装 deferredPrompt = event // 显示自定义安装按钮 document.getElementById('installBtn').style.display = 'block' })

在合适的时机，再手动触发：

// 监听按钮点击事件 document.getElementById('installBtn').addEventListener('click', () => { console.log('点击安装pwa', deferredPrompt) if (deferredPrompt) { // 触发PWA安装 deferredPrompt.prompt() // 监听安装结果 deferredPrompt.userChoice.then((choiceResult) => { if (choiceResult.outcome === 'accepted') { console.log('用户安装了PWA') } else { console.log('用户拒绝安装PWA') } // 重置事件 deferredPrompt = null }) } })

最后判断网页环境是不是在pwa中：

// 判断安装环境 const isInStandaloneMode = () => window.matchMedia('(display-mode: standalone)').matches || window.navigator.standalone || document.referrer.includes('android-app://') console.log('panduan env:', isInStandaloneMode()) if (isInStandaloneMode()) { document.getElementById('content').innerHTML = '在pwa中打开了' window.location.href = 'https://www.baidu.com/' // document.body.innerHTML = '是在pwa中打开的' } else { document.getElementById('content').innerHTML = '在桌面快捷打开会自动跳转到baidu' // document.body.innerHTML = '请在pwa中打开' }

完整的代码：

Vite + Vue + TS 一键安装应用判断环境 let deferredPrompt // 阻止默认弹出安装事件 window.addEventListener('beforeinstallprompt', (event) => { console.log('beforeinstallprompt-------') // 阻止默认行为 event.preventDefault() // 保存事件，稍后触发安装 deferredPrompt = event // 显示自定义安装按钮 document.getElementById('installBtn').style.display = 'block' }) // 监听按钮点击事件 document.getElementById('installBtn').addEventListener('click', () => { console.log('点击安装pwa', deferredPrompt) if (deferredPrompt) { // 触发PWA安装 deferredPrompt.prompt() // 监听安装结果 deferredPrompt.userChoice.then((choiceResult) => { if (choiceResult.outcome === 'accepted') { console.log('用户安装了PWA') } else { console.log('用户拒绝安装PWA') } // 重置事件 deferredPrompt = null }) } }) // 判断安装环境 const isInStandaloneMode = () => window.matchMedia('(display-mode: standalone)').matches || window.navigator.standalone || document.referrer.includes('android-app://') console.log('panduan env:', isInStandaloneMode()) if (isInStandaloneMode()) { document.getElementById('content').innerHTML = '在pwa中打开了' window.location.href = 'https://www.baidu.com/' // document.body.innerHTML = '是在pwa中打开的' } else { document.getElementById('content').innerHTML = '在桌面快捷打开会自动跳转到baidu' // document.body.innerHTML = '请在pwa中打开' } // window.onload = function () { // console.log('页面加载完了') // window.location.href = 'https://www.baidu.com/' // }

【本文地址】

公司简介

联系我们