如何识别网页是否在 PWA 环境下运行？从而判断是否展示内容

傷城~ 2023-10-09 21:46 45阅读 0赞

![e5d04cc1714e405d8bf6422d057afe8e.png][]

想要判断是不是在PWA中打开的网站，该怎么做？终于在Stack Overflow找到了答案

有能力的可以看原文：[progressive web apps - Javascript to check if PWA or Mobile Web - Stack Overflow][]

**This works for all - TWA, Chrome & Safari:下面的方法可以成功运行**

const isInStandaloneMode = () =>
          (window.matchMedia('(display-mode: standalone)').matches) || (window.navigator.standalone) || document.referrer.includes('android-app://');
    
     if (isInStandaloneMode()) {
        console.log("webapp is installed")
    }

我自己使用js做了一个判断：

const isInStandaloneMode = () =>
            (window.matchMedia('(display-mode: standalone)').matches) || (window.navigator.standalone) || document.referrer.includes('android-app://');
    
        if (isInStandaloneMode()) {
            document.body.innerHTML = "是在pwa中打开的"
        }else {
            document.body.innerHTML = "请在pwa中打开"
        }

当不是在pwa中打开的话：网页内容展示

![773644b7ca724511aab59d25af2ec91f.png][]

如果是在pwa中打开的话：

![72da0efa62ef4e5499a68f37322b8873.jpeg][]

[e5d04cc1714e405d8bf6422d057afe8e.png]: https://img-blog.csdnimg.cn/e5d04cc1714e405d8bf6422d057afe8e.png
[progressive web apps - Javascript to check if PWA or Mobile Web - Stack Overflow]: https://stackoverflow.com/questions/41742390/javascript-to-check-if-pwa-or-mobile-web
[773644b7ca724511aab59d25af2ec91f.png]: https://img-blog.csdnimg.cn/773644b7ca724511aab59d25af2ec91f.png
[72da0efa62ef4e5499a68f37322b8873.jpeg]: https://img-blog.csdnimg.cn/72da0efa62ef4e5499a68f37322b8873.jpeg