简体   繁体   English

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

[英]Automatic back button functionality in UWP (JS) App

I have a UWP (JavaScript PWA template / VS 2017) that is meant for testing and development of a hosted application.我有一个用于测试和开发托管应用程序的 UWP(JavaScript PWA 模板/VS 2017)。 There is not much fancy about it besides letting a developer or tester choose which application build it should navigate to.除了让开发人员或测试人员选择它应该导航到哪个应用程序构建之外,它并没有太多花哨的东西。 However, one thing annoys me and I cannot seem to fix it.然而,有一件事让我很恼火,我似乎无法解决它。 In a previous incarnation of this UWP, anytime I opened it on Windows 10 and navigated to an app build, it would show a back button at the top that I could use to go back to the index.html for the UWP. In a previous incarnation of this UWP, anytime I opened it on Windows 10 and navigated to an app build, it would show a back button at the top that I could use to go back to the index.html for the UWP.

I have scoured the old code to see if I was missing something.我已经搜索了旧代码,看看我是否遗漏了一些东西。 I was thinking perhaps I had left out some code to enable the back button and handle when it is clicked.我在想也许我遗漏了一些代码来启用后退按钮并在单击它时进行处理。 Something that might have looked like this:可能看起来像这样的东西:

// 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);

However, there was no such code in the old version.但是,旧版本中没有这样的代码。 I also checked the code for the hosted app and I didn't find anything like it either.我还检查了托管应用程序的代码,也没有找到类似的东西。 Regardless, whenever I open the old solution for this UWP, I get a back button with all the expected functionality but without any code to handle it.无论如何,每当我打开这个 UWP 的旧解决方案时,我都会得到一个具有所有预期功能但没有任何代码来处理它的后退按钮。

Is there some kind of declaration in the app manifest or.jsproj maybe?应用程序清单或 .jsproj 中是否有某种声明? Something that tells the application at build time that we want a back button that works "out of the box"?在构建时告诉应用程序我们想要一个“开箱即用”的后退按钮的东西?

UPDATE更新

I recreated the UWP with a fresh template and did some tests on it.我使用新模板重新创建了 UWP 并对其进行了一些测试。 The template automatically sets the start page to https://example.com and on this site there is a link for https://www.iana.org , so I whitelisted that domain in the content URIs.该模板自动将起始页设置为https://example.com并且在此站点上有一个指向https://www.iana.org的链接,因此我将域中的 URI 列入白名单。 Navigating to the link there works.导航到那里的链接有效。 I get a back button.我得到一个后退按钮。

Next, I replaced the template code with my own code, pointed it to index.html as the start page, and set up the content URIs.接下来,我将模板代码替换为自己的代码,将其指向 index.html 作为起始页,并设置内容 URI。 When I try to navigate to anything, I do not get a back button.当我尝试导航到任何内容时,我没有返回按钮。 Even if I go to https://www.iana.org , I do not see a back button.即使我从 go 到https://www.iana.org ,我也看不到后退按钮。

Last, I replaced the start page with https://example.com .最后,我用https://example.com替换了起始页。 When I click the link on that page for https://www.iana.org , I get a back button.当我单击该页面上 https://www.iana.org的链接时,我得到一个后退按钮。

I also removed all JavaScript utilizing WinRT in order to check if something there might be messing with it, but it had no effect.我还使用 WinRT 删除了所有 JavaScript 以检查是否有什么东西可能会弄乱它,但它没有效果。

Additional Info附加信息

After having a look at the old version, a major difference I see is that the index.html for the app was actually hosted and in my version it is part of the app.查看旧版本后,我看到的一个主要区别是应用程序的 index.html 实际上是托管的,在我的版本中它是应用程序的一部分。 Per recent comments on this question, it seems that the back button functionality only works for hosted content?根据最近对该问题的评论,似乎后退按钮功能仅适用于托管内容?

For security reasons, the PWA project requires the project to run in the https environment, or it can be run in localhost when debugging locally.出于安全考虑,PWA项目要求项目在https环境下运行,或者本地调试时可以在localhost中运行。

The PWA project in UWP is to package the existing PWA program. UWP 中的 PWA 项目是对 package 现有的 PWA 程序。 This requires that the PWA project is already in the https or localhost environment.这要求 PWA 项目已经在httpslocalhost环境中。 You can view some requirements of the PWA project here您可以在此处查看 PWA 项目的一些要求

Thanks.谢谢。

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM