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

Question

Mobile devices have a hardware back button, so this isn't an issue.

However, on desktop (mainly Windows 10) PWA apps appear to sometimes have a back button in the top left corner.

I want to either:

• Ensure this is always visible, or...
• Know that it hasn't so that I can add it to the app itself.

I don't want to do both - if the back button is visible I don't want a second one in my app. I never want to show it when visiting the app in the browser.

It appears like the manifest.json should control this, but the display options don't help.

On Windows 10 it appears to depend on how the PWA is installed.

Is there a way to ensure that the back button always appears?

Answer 1

You can check to see if a back button is available in the UI by checking the display mode, then show or hide your back button as necessary:

function hasBackButton() {
  const isMinimalUI = window.matchMedia("(display-mode: minimal-ui)").matches;
  const isBrowserUI = window.matchMedia("(display-mode: browser)").matches;
  return isMinimalUI || isBrowserUI;
}

If the app is in minimal-ui or browser a back button will be visible within the browser UX, otherwise there won't be one. I tested this with https://basic-pwa-minimal.glitch.me/ and installed it on Windows via Edge, and used PWABuilder.com to create an APPX that I installed. In both cases, the code reported properly.