确保桌面（Windows 10）PWA上有一个后退按钮

Question

移动设备具有硬件后退按钮，因此这不是问题。

但是，在台式机（主要是Windows 10）上，PWA应用程序有时有时在左上角具有后退按钮。

我要：

• 确保这始终可见，或者...
• 知道它还没有，所以我可以将其添加到应用程序本身。

我不想两者都做-如果可以看到后退按钮，则我不想在我的应用程序中再放一个。在浏览器中访问应用程序时，我永远不想显示它。

看起来manifest.json应该由应该控制，但是display选项无济于事。

在Windows 10上，它似乎取决于如何安装PWA。

有没有办法确保后退按钮始终出现？

Answer 1

您可以通过检查显示模式来检查 UI 中是否有后退按钮可用，然后根据需要显示或隐藏后退按钮：

function hasBackButton() {
  const isMinimalUI = window.matchMedia("(display-mode: minimal-ui)").matches;
  const isBrowserUI = window.matchMedia("(display-mode: browser)").matches;
  return isMinimalUI || isBrowserUI;
}

如果应用程序在浏览器用户体验中，minimal-ui或者browser后退按钮将可见，否则不会有后退按钮。我使用https://basic-pwa-minimal.glitch.me/对此进行了测试，并通过 Edge 将其安装在 Windows 上，并使用 PWABuilder.com 创建了我安装的 APPX。在这两种情况下，代码都正确报告。