确保桌面上有后退按钮（Windows 10）PWA答案

【问题标题】：Ensure that there is a back button on a desktop (Windows 10) PWA确保桌面上有后退按钮（Windows 10）PWA
【发布时间】：2019-05-22 07:44:11
【问题描述】：

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

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

我想要：

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

我不想两者都做 - 如果后退按钮可见，我不想在我的应用程序中添加第二个按钮。我从不想在浏览器中访问应用程序时显示它。

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

在 Windows 10 上，它似乎取决于 PWA 的安装方式。

有没有办法确保后退按钮总是出现？

【问题讨论】：

我无法测试，display-mode 媒体功能是否正常工作？我想应该是const has_backbutton = matchMedia("(display-mode: minimal-ui)").matches || matchMedia("(display-mode: browser)")
@Kaiido 我不认为正确被定义。 minimal-ui 增加了浏览器地址栏，但只是有时包含回来。 standalone 如果从 APPX 安装，则包含返回，否则不包含。无论哪种方式，标准似乎都不清楚，因此很难提出错误。
我指的是css“媒体功能”，它可用于确定应用程序当前处于哪种模式，但我现在明白我误解了你的意思“但显示选项无济于事”，我认为该模式不是您在清单中设置的模式。似乎还没有任何东西，但当前的提案可能会符合规范并完全符合您的要求：github.com/w3c/csswg-drafts/issues/4187
@Kaiido 是的，这正是我的问题，但它甚至还不是标准。知道如何解决它吗？

标签： javascript progressive-web-apps back-button manifest.json

【解决方案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。在这两种情况下，代码都正确报告了。

【讨论】：

谢谢！ +1 和答案。现在看起来确实更加一致，尽管我怀疑这更多是因为 Edge 基于 Chromium（这个问题是从 2019 年开始的，当时旧的 Edge 仅显示如果通过 APPX 安装似乎显示最小）而不是标准变得更好应该在最小的 vs 浏览器中显示。不管怎样，我需要回到这个再试一次，干杯！