确保桌面上有后退按钮 (Windows 10) PWA

Question

移动设备有一个硬件后退按钮，所以这不是问题。

但是，在桌面上（主要是 Windows 10）PWA 应用有时在左上角有一个后退按钮。

我想：

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

我不想同时执行这两项操作 - 如果后退按钮可见，我不想在我的应用程序中使用第二个按钮。我不想在浏览器中访问应用程序时显示它。

看起来 manifest.json 应该控制它，但 display 选项没有帮助。

在 Windows10 上，这似乎取决于 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。在这两种情况下，代码都正确报告。

确保桌面上有后退按钮 (Windows 10) PWA

Ensure that there is a back button on a desktop (Windows 10) PWA

javascript

back-button

progressive-web-apps

manifest.json