如何检查用户是在pwa还是浏览器

Question

我需要在用户使用 pwa 时隐藏一个元素。我试过，

manifest.json

"start_url": "/?mode=standalone"

js

const url = new URL(window.location.href);
  if(url.searchParams.get('mode')==='standalone') {
    document.getElementsByClassName("pwa").style.display="none";
  }

html

<p class="pwa">Some text</p>

我在控制台中没有收到任何错误。而且我无法隐藏 pwa 中的元素。怎么做？

Answer 1

document.getElementsByClassName("pwa")returns一个HTMLCollection。您应该迭代 pwa 元素：

Array.from(
    document.getElementsByClassName("pwa")
).forEach((e)=>e.style.display='none')

Answer 2

您可以使用以下方式签入 JavaScript：

if (window.matchMedia('(display-mode: standalone)').matches) {
  console.log("This is running as standalone.");
}

如何检查用户是在pwa还是浏览器

How to check whether user is in pwa or browser

javascript

progressive-web-apps