前言：
👉vue3+ts+vite项目中使用vite-plugin-pwa搭建 PWA 项目，以及如何处理pwa安装图标的显示隐藏
👉pwa在iframe下能否显示，以及在iframe下相关问题解析
如何判断用户是否在pwa环境中运行?
这个display-mode配置，在前言的文章中有说到，需要配置的参数。
const displayModes = ['fullscreen', 'standalone', 'minimal-ui']
const matchesPwa = displayModes.some(
displayMode => window.matchMedia('(display-mode: ' + displayMode + ')').matches
)
在 iOS 设备上，如果 PWA 已通过 Safari 添加到主屏幕，navigator.standalone 属性将返回 true，否则返回 false
document.referrer.includes('android-app://')
document.referrer 是一个字符串，表示当前文档的来源 URL（即用户是从哪个页面链接过来的）。
includes('android-app://') 是用于检查 document.referrer 中是否包含字符串 'android-app://'。
这段代码的作用是检查用户是否是通过 Android 应用进入当前网页的。如果是，这段代码会返回 true，否则返回 false。
最后代码：
// 判断是否在pwa内
const isPWA = (): boolean => {
const displayModes = ['fullscreen', 'standalone', 'minimal-ui']
const matchesPwa = displayModes.some(
displayMode => window.matchMedia('(display-mode: ' + displayMode + ')').matches
)
return (
matchesPwa ||
window.navigator?.standalone ||
document.referrer.includes('android-app://')
)
}
根据前言👉vue3+ts+vite项目中使用vite-plugin-pwa搭建 PWA 项目，以及如何处理pwa安装图标的显示隐藏的文章，整合后，
配置项等不改动
只改动文章中的xx.vue文件
// xxx.vue
<template>
<button @click"addPwaBtn">pwa下载安装按钮</button>
</template>
<script lang="ts" setup>
const pwaIconShow =ref(false)
const showAddTipsDialog =ref(false)
onMounted(() => {
if (isPWA()) {
console.log('在pwa环境中，不需要后续操作-埋点')
pwaIconShow.value = false
} else {
console.log('不在pwa环境中')
// 因为beforeinstallprompt事件在ios上目前不支持，所以不需要判断是否是ios
if (isIOS()) {
console.log('ios-显示按钮')
// 如果是ios，安装pwa按钮一直显示
pwaIconShow.value = true
} else {
pwaFunc()
}
}
})
// 注册pwa
const pwaFunc = () => {
// 在主入口监听PWA注册事件,安装PWA时触发
window.addEventListener('beforeinstallprompt', e => {
// 没有安装pwa时，网站会进入这里、
// 安装pwa后，网站不会走这里，但是卸载后也会走这里
// 所以，只要走了这里，按钮就是显示的，默认按钮不显示即可
console.log('pwaFunc-显示按钮-显示按钮')
pwaIconShow.value = true
e.preventDefault()
window.deferredPrompt = e
})
}
// 点击pwa图标
const addPwaBtn= () => {
if (isIOS()) {
// 如果是ios，直接显示浏览器设置指引图
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>
不在pwa环境中打开时，控制台输出：
在pwa环境中打开的网站，控制台输出：
Tips:
因为国内PWA使用较少，相关论坛讨论较少，一些文档和文章的代码都跑过，适配兼容性较差。
故，在这贴几个参考的stackoverflow帖子和github提问。
https://stackoverflow.com/questions/21125337/how-to-detect-if-web-app-running-standalone-on-chrome-mobile
https://stackoverflow.com/questions/54580414/how-can-i-detect-if-my-website-is-opened-inside-a-trusted-web-actvity
https://stackoverflow.com/questions/41742390/javascript-to-check-if-pwa-or-mobile-web
https://github.com/GoogleChromeLabs/svgomg-twa/issues/18
