CODEWITHSUNDEEP
javascriptuwp
Joshua Dannemann
Joshua Dannemann

Reputation: 2080

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. 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.

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.

Is there some kind of declaration in the app manifest or .jsproj maybe? 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. 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. 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. 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.

Last, I replaced the start page with https://example.com. When I click the link on that page for https://www.iana.org, I get a back button.

I also removed all JavaScript utilizing WinRT in order to check if something there might be messing with it, but it had no effect.

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. Per recent comments on this question, it seems that the back button functionality only works for hosted content?

Upvotes: 1

Views: 94

Answers (1)

Anran Zhang
Anran Zhang

Reputation: 7727

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.

The PWA project in UWP is to package the existing PWA program. This requires that the PWA project is already in the https or localhost environment. You can view some requirements of the PWA project here

Thanks.

Upvotes: 1

Related Questions