DEV Community

Is there any way to detect if a user "can go back" in PWAs (desktop PWA most specifically)

Ben Halpern on May 22, 2019

Firstly, thanks for the discussion yesterday: How to handle outbound links in desktop PWA? ...
Collapse
 
ceresnam profile image
Michal Čerešňa •

you can attach custom object when calling history.pushState()

We solved it with storing 'depth' parameter. Each time user goes down we increase it by +1.

Then you can decide if the back button should be on/off with history.state.depth > 0

Collapse
 
yaser profile image
Yaser Al-Najjar •

I'm not sure this feature would be really helpful since I'm using the PWA in my phone (Android) and I never feel the need to use the back button (and of course, same goes to the desktop website).

If I wanna go back I just press the DEV logo, and that's pretty convenient!

The great part about DEV is that it has a non-dense site map... just the home page which leads to different places (articles, settings, notifications, DMs).

Collapse
 
thefern profile image
Fernando B 🚀 •

Back button does work in Android PWA. Just a habit on Android to use back button lol, is a lot closer to my thumb than the dev button.

Collapse
 
zcdunn profile image
Zack Dunn • • Edited

There's a proposal to add field to the Web Manifest to hint that navigation should be shown that would work across devices. Here's a better thread. In the meantime, there is a CSS media query that you could use to determine when to show your navigation.

Collapse
 
ben profile image
Ben Halpern •

I might be mistaken, but it seems like minimal-ui mode doesn't work on the desktop. It looks like standalone no matter which I use.

Collapse
 
stereobooster profile image
stereobooster • • Edited

Maybe you are looking for window.history.length? UPD: just double checked, it doesn't subtract the number when you use back button :/

Collapse
 
kognise profile image
Kognise •

Maybe there's a way to do some programming magic and get that to work?

Collapse
 
ben profile image
Ben Halpern •

Between that and other persistence like localStorage etc, there is probably a technically possible way to make it happen. We only have to worry about on-site situations because this is for the standalone app.

This is a pretty generalizeable situation so if anyone wanted to build a library for this I'm all for it! 😄

Collapse
 
okbrown profile image
Orlando Brown • • Edited

I have come a across this issue before in another project.

On document.referrer it holds the previous page, if it contains a URL with dev.to you can then use window.history.back() (other wise prevent it going back as to not leave the page/app unless required)

Thing I can't remember is, ain't there a history list API that returns back all the previous pages you were at?

Collapse
 
jaakidup profile image
Jaaki •

Right now for this issue of deciding whether a user can go back, I essentially hide the back button when the current route is "/" (root)
As I'm assuming the user enters via the root route and then navs forwards, this seems to work.

Collapse
 
aniljoey profile image
Sarve Bhavantu Sukhina •

ihc.io/connect/tinker/smartrec/

I tried it like so. Seems to work.

Collapse
 
luisdanielmesa profile image
Luis Mesa •

Don't.

Don't use standalone or fullscreen if you want navigation buttons.