I made a PWA using Nextjs and next-pwa and I used the Nextjs router. On the browser, the back button pops the url on the history stack. This is the intended behavior for browsers.
However, when I download and use the PWA on mobile, the mobile back button would still behave the same way as browser - it would pop the history stack until the stack is empty. This would cause the user to press the back button many times until it empties the stack before finally exiting the app.
Scenario: The user is redirected to "/" on app load. When the user navigates through the app, the router history stack would be like:
APP LOAD -> "/" -> "/login" -> "/about" -> "/projects" -> "/projects/[ID]".
When the user wishes to quit the app, the repeated pressing of mobile back button would pop the router history until it empties:
"/projects/[ID]" -> "/projects" -> "/about" -> "/login" -> "/" -> QUIT
This would cause the user to press the back button many times until it empties the router history stack before finally exiting the app. I think it makes the PWA user experience kind of bad, at least in mobile.
Is there a way to configure the PWA to go back one step on the router href tree?
Like
"/projects/[ID]" -> "/projects" -> "/" -> QUIT
instead of
"/projects/[ID]" -> "/projects" -> "/about" -> "/login" -> "/" -> QUIT
