Add Navigation Elements in React to a PWA in Standalone Mode
When a PWA operates in standalone mode on a mobile device, it doesn't have the usual back button (and other browser controls) that it would on the web. Because of that, it's very important that you add your own navigation controls (like back buttons) to your app, so that your user can get to all parts of your app without relying on any browser controls.
We'll look at the new Profile page, and add a back button that allows the user to go back to the home page.
Instructor: [00:00] Add React Router with yarn add React Router DOM. I've exported a new app that has the list at the route URL and a profile page at /profile. Both of those components are in the same file, App.js. In the list header, there's a link to the profile page, which is just a simple page that displays a user profile icon.
[00:30] When we run that, we can see the profile link in the header. Clicking the link takes us to the next page. In the browser, users will know to hit the back button to go back to the home page. If they've just installed this PWA on a mobile device and it's running in standalone mode, then there's no typical web controls. There's no forward or backward. Let's make sure to add a back button to the profile page.
[00:58] In App.js, import the back button PNG. Then we can switch the logo and the header to a back button. Now when we run in standalone mode, the user knows they can hit the back button to go to the home page. When you have a PWA that can be installed on mobile devices, always make sure you add navigation elements to allow access to all parts of your app without using the web browser controls.
Member comments are a way for members to communicate, interact, and ask questions about a lesson.
The instructor or someone from the community might respond to your question Here are a few basic guidelines to commenting on egghead.io
Be on-Topic
Comments are for discussing a lesson. If you're having a general issue with the website functionality, please contact us at support@egghead.io.
Avoid meta-discussion
Code Problems?
Should be accompanied by code! Codesandbox or Stackblitz provide a way to share code and discuss it in context
Details and Context
Vague question? Vague answer. Any details and context you can provide will lure more interesting answers!