11

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?

Keith
  • 150,284
  • 78
  • 298
  • 434
  • No way to test on my side, does the [`display-mode`](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/display-mode) media feature work correctly? I guess it would be `const has_backbutton = matchMedia("(display-mode: minimal-ui)").matches || matchMedia("(display-mode: browser)")` – Kaiido Oct 28 '19 at 09:29
  • @Kaiido I don't think _correctly_ is defined. `minimal-ui` adds the browser address bar, but only sometimes includes back. `standalone` includes back if installed from a APPX but otherwise doesn't. The standard doesn't seem to be clear either way so it's hard to raise a bug. – Keith Oct 29 '19 at 13:14
  • 1
    I was referring to the css "media feature" which could be used to **determine** in which mode the app currently is, but I now get that I misunderstood what you meant by "but the display options don't help", I thought the mode was not the one you did set in the manifest. There doesn't seem to be anything yet, but a current proposal will probably make it to the specs and does exactly what you want: https://github.com/w3c/csswg-drafts/issues/4187 – Kaiido Oct 29 '19 at 13:57
  • @Kaiido Yes, that's exactly my problem, but it's not even a standard yet. Any idea how to work around it? – Keith Oct 29 '19 at 16:06

1 Answers1

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.

PeteLe
  • 1,755
  • 10
  • 19
  • Thanks! +1 and ans. It does seem much more consistent now, though I suspect that's more due to Edge being based on Chromium (this question was from 2019, when old Edge only show seemed to show back on minimal if installed via APPX) than standards getting better for exactly what should show in minimal vs browser. Either way, I need to go back to this and try it out again, cheers! – Keith Feb 25 '21 at 20:31