Press new game, which navigates to categories view (/categories)
Press browser back button or hardware back button (on android)
That makes the browser navigate to the play view and show an error
what should happen
It should go to the home view (/)
how to fix it
This is trickier than it seems. We can use history.pushState(...) to set the history point to our desired URL. The downside is that it also changes the URL immediately for the user. It doesn't actually navigate to that URL now, but it does change in the address bar. Even though the address bar doesn't show when launched as a PWA and mobile browsers are de-emphasizing URL's, it still seems wrong. When users are playing and the code from /play is running, the address bar should reflect that. It could make diagnosing user problems difficult if we can't tell what route they were really on.
But, if we called history.pushState from an appropriate vue-router navigation guard, we could potentially replace the history state immediately before navigating away
Specifically, the beforeRouteLeave in-component guard. Setting the history when that guard is called should achieve our goal. As long as it works reliably!
steps to reproduce
Play a game through on any category
Press new game, which navigates to categories view (/categories)
Press browser back button or hardware back button (on android)
That makes the browser navigate to the play view and show an error
what should happen
It should go to the home view (/)
how to fix it
This is trickier than it seems. We can use
history.pushState(...)to set the history point to our desired URL. The downside is that it also changes the URL immediately for the user. It doesn't actually navigate to that URL now, but it does change in the address bar. Even though the address bar doesn't show when launched as a PWA and mobile browsers are de-emphasizing URL's, it still seems wrong. When users are playing and the code from/playis running, the address bar should reflect that. It could make diagnosing user problems difficult if we can't tell what route they were really on.But, if we called
history.pushStatefrom an appropriate vue-router navigation guard, we could potentially replace the history state immediately before navigating awaySpecifically, the
beforeRouteLeavein-component guard. Setting the history when that guard is called should achieve our goal. As long as it works reliably!