UWP (JS) 应用程序中的自动后退按钮功能

Posted 2023-03-25

【中文标题】UWP (JS) 应用程序中的自动后退按钮功能

【英文标题】：Automatic back button functionality in UWP (JS) App

【发布时间】：2020-10-09 02:08:21

【问题描述】：

我有一个用于测试和开发托管应用程序的 UWP（javascript PWA 模板/VS 2017）。除了让开发人员或测试人员选择它应该导航到哪个应用程序构建之外，它并没有太多花哨的东西。然而，有一件事让我很恼火，我似乎无法解决它。在此 UWP 的先前版本中，每当我在 Windows 10 上打开它并导航到应用程序版本时，它都会在顶部显示一个后退按钮，我可以使用它返回到 UWP 的 index.html。

我已经搜索了旧代码，看看我是否遗漏了什么。我在想也许我遗漏了一些代码来启用后退按钮并在单击它时进行处理。可能看起来像这样：

// This is javaScript
const navigationManager = window.Windows.UI.Core.SystemNavigationManager.getForCurrentView();
navigationManager.appViewBackButtonVisibility = window.Windows.UI.Core.AppViewBackButtonVisibility.visible;
navigationManager.addEventListener("backrequested", window.history.back, false);

但是，旧版本中没有这样的代码。我还检查了托管应用程序的代码，也没有找到类似的东西。无论如何，每当我打开此 UWP 的旧解决方案时，我都会得到一个具有所有预期功能但没有任何代码来处理它的后退按钮。

应用清单或 .jsproj 中是否有某种声明？在构建时告诉应用程序我们想要一个“开箱即用”的后退按钮？

更新

我使用新模板重新创建了 UWP，并对其进行了一些测试。该模板自动将起始页设置为https://example.com，并且在此站点上有一个https://www.iana.org 的链接，因此我在内容URI 中将该域列入了白名单。导航到那里的链接有效。我有一个返回按钮。

接下来，我用自己的代码替换了模板代码，将其指向 index.html 作为起始页，并设置了内容 URI。当我尝试导航到任何内容时，我没有获得后退按钮。即使我去https://www.iana.org，我也看不到返回按钮。

最后，我用https://example.com 替换了起始页。当我单击该页面上https://www.iana.org 的链接时，我得到一个后退按钮。

我还删除了所有使用 WinRT 的 JavaScript，以检查是否有什么东西弄乱了它，但它没有任何效果。

其他信息

查看旧版本后，我看到的一个主要区别是应用程序的 index.html 实际上是托管的，而在我的版本中，它是应用程序的一部分。根据最近关于这个问题的 cmet，似乎后退按钮功能仅适用于托管内容？

【问题讨论】：

你好，如果你创建一个PWA项目，当页面导航发生变化时，标题栏中会出现一个返回按钮（你可以理解为一个带有返回按钮的简单浏览器），这是默认行为，无需特殊定义，是否要在 PWA 项目中禁用此返回按钮？

@RichardZhang-MSFT 我认为这也是默认行为，但我的 UWP 不会显示后退按钮，也不会被任何代码隐藏。但是，我们确实将边界模式设置为使用核心窗口，但至少在 Windows 10 上，这从未产生任何影响（我们为 Xbox 设置了边界模式）。即使我强制返回按钮在有导航历史记录时显示，它也无济于事。

我查看了您的更新内容，您是否将主页设置为本地html文件？如果您打算基于本地 html 构建 UWP 应用程序，您可以选择创建 winJS 应用程序。 PWA 项目更适合在线项目。通过对网页进行封装，让网页使用WinRT Api，达到接近原生应用的效果。所以在 PWA 项目中，建议使用 http(s) 链接作为起始链接

@RichardZhang-MSFT 感谢您的建议，但鉴于我们代码库的多平台特性，我们无法在我的组织中支持 WinJs。如果我没听错的话，在 PWA 应用程序中使用本地 index.html 不适用于 UWP 的某些内置功能，但是使用 https 的外部托管页面可以吗？到目前为止，这对我的经验来说似乎是正确的，但我很惊讶确实如此。 PWA 模板的设计似乎存在严重缺陷，它轻视应用程序的原生文件。

您好，很抱歉造成误会。但是出于安全考虑，PWA项目要求项目运行在https环境，或者本地调试时可以在localhost运行。 UWP中的PWA项目就是对现有的PWA程序进行打包。这要求 PWA 项目已经在 https 或 localhost 环境中。可以查看PWA项目的一些需求here

【参考方案1】：

出于安全考虑，PWA项目要求项目运行在https环境，或者本地调试时可以在localhost运行。

UWP 中的 PWA 项目是对现有的 PWA 程序进行打包。这要求 PWA 项目已经在 https 或 localhost 环境中。可以查看PWA项目的一些需求here

谢谢。