判断用户是否在pwa环境中打开运行？（已安装的 PWA 与未安装的 PWA 网站之间有什么区别？）

前言：

👉vue3+ts+vite项目中使用vite-plugin-pwa搭建 PWA 项目，以及如何处理pwa安装图标的显示隐藏
👉pwa在iframe下能否显示，以及在iframe下相关问题解析

pwa_3">如何判断用户是否在pwa环境中运行?

pwadisplaymode_5">根据pwa配置的display-mode

这个display-mode配置，在前言的文章中有说到，需要配置的参数。

const displayModes = ['fullscreen', 'standalone', 'minimal-ui']
const matchesPwa = displayModes.some(displayMode => window.matchMedia('(display-mode: ' + displayMode + ')').matches
)

对于IOS, 使用 navigator.standalone 属性：

在 iOS 设备上，如果 PWA 已通过 Safari 添加到主屏幕，navigator.standalone 属性将返回 true，否则返回 false

对于Android, 检查用户document.referrer 中是否包含字符串 'android-app://'

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上目前不支持，所以不需要判断是否是iosif (isIOS()) {console.log('ios-显示按钮')// 如果是ios，安装pwa按钮一直显示pwaIconShow.value = true} else {pwaFunc()}}})// 注册pwaconst pwaFunc = () => {// 在主入口监听PWA注册事件,安装PWA时触发window.addEventListener('beforeinstallprompt', e => {// 没有安装pwa时，网站会进入这里、// 安装pwa后，网站不会走这里，但是卸载后也会走这里// 所以，只要走了这里，按钮就是显示的，默认按钮不显示即可console.log('pwaFunc-显示按钮-显示按钮')pwaIconShow.value = truee.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环境中打开时，控制台输出：
不在<a class= 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