As web applications continue to evolve, the lines between web and mobile apps are becoming increasingly blurred. One area where this is particularly noticeable is in the way that users expect the back button to behave. In a mobile app, when a user presses the back button, they expect any pop-up or modal windows to close, rather than being taken back to the previous page. However, this behavior is not always consistent in web apps.
To create a more seamless experience for users, web developers can implement certain techniques to make web apps behave more like mobile apps. In this article, we will explore two approaches to achieving this: creating helper functions and using a hash in the URL.
Helper Functions
One way to make a web app behave more like a mobile app is to create helper functions that allow you to override the default behavior of the back button when a modal window is open. With this approach, you can ensure that when a user presses the back button, they are taken back to the previous state of the modal window, rather than being taken back to the previous page.
To achieve this, you can create two helper functions: one to neutralize the back button when a modal window is open, and another to revive it when the modal window is closed.
The neutralizeBack function should take a callback function as its argument. This callback function will be executed when the back button is pressed while the modal window is open. Here's an example implementation of the neutralizeBack function
const neutralizeBack = (callback) => {
window.history.pushState(null, "", window.location.href);
window.onpopstate = () => {
window.history.pushState(null, "", window.location.href);
callback();
};
};
The revivalBack function, on the other hand, should simply restore the default behavior of the back button. Here's an example implementation of the revivalBack function:
const revivalBack = () => {
window.onpopstate = undefined;
window.history.back();
};
To use these functions, you can simply call neutralizeBack with your desired callback function when you open a modal window, and call revivalBack when you close the modal window. Here's an example implementation:
handleOpenModal = () =>
setState(
{ modalOpen: true },
() => neutralizeBack(this.handleCloseModal)
);
handleCloseModal = () =>
setState(
{ modalOpen: false },
revivalBack
);
Using a Hash in the URL
Another approach you can take is to use a hash in your URL to indicate the state of the modal window. A hash is a URL segment that starts with a hashtag (#). Navigating between different hashes in the URL does not trigger a page reload, but still adds an entry to the browser's history, allowing the back button to be used to close modal windows.
A hash is a URL segment that begins with a hashtag (#). Navigating between different hashes in the URL does not cause a page to reload, but still adds an entry to the browser's history, which allows the back button to close modal windows. This approach is relatively simple to implement and can provide a more intuitive user experience.
To implement this approach, you can create a custom hook that toggles the state of the modal window based on the URL hash. In the example implementation below, we create a custom hook called useHashRouteToggle that takes a modalHash parameter to define the hash used for the modal window:
function useHashRouteToggle(modalHash) {
const [isOpen, toggleOpen] = useState(false);
const toggleActive = (open) => {
if (open) {
window.location.assign(modalHash);
} else {
window.location.replace('#');
}
}
useEffect(() => {
const handleOnHashChange = () => {
const isHashMatch = window.location.hash === modalHash;
toggleOpen(isHashMatch);
};
window.addEventListener('hashchange', handleOnHashChange);
return () => window.removeEventListener('hashchange', handleOnHashChange);
}, [modalHash]);
return [isActive, toggleActive];
}
With this custom hook, you can simply call toggleActive with the desired state of the modal window (true to show the modal, false to hide it).
The useHashRouteToggle hook returns an array with two items: isOpen, which is a boolean value indicating whether the modal window is currently open, and toggleActive, which is a function that toggles the state of the modal window. When toggleActive is called with true, it updates the URL to include the modalHash parameter. When toggleActive is called with false, it replaces the hash in the URL with an empty string.
The useEffect hook sets up an event listener for the hashchange event, which is triggered whenever the hash in the URL changes. If the current hash matches the modalHash parameter, the hook updates the isOpen state to true. If the current hash does not match the modalHash parameter, the hook updates the isOpen state to false.
Using a hash in the URL can be an effective way to handle modal windows in a web app. By creating a custom hook to toggle the state of the modal window based on the URL hash, you can provide a more consistent and intuitive user experience.
Here we have discussed how the behavior of the back button is different in mobile apps and web apps, and how web app developers can make their apps behave more like mobile apps in this regard. Two approaches are discussed: creating helper functions to override the default behavior of the back button when a modal window is open, and using a hash in the URL by creating a custom hook in react to indicate the state of the modal window. Example implementations are provided for both approaches.
Stay tuned don't forget to subscribe to my newsletter !!!
