How to add an “Offline” notification to your PWA
If you’re building a Progressive Web App (PWA) that can work offline as well as online, it’s a good idea to let the user know when the app can’t reach the internet so that they don’t get frustrated when new data doesn’t show up after they refresh.
Note: A lot of the content of this post was taken from the wonderful Mozilla Developer Network.
Offline / Online Status
We’re going to be using the “online” and “offline” browser events to toggle the notification. As you can see, these events are pretty widely supported so it should be safe to use in almost all environments:
Online and offline are events that are emitted by the OS whenever the connection changes so it should always be accurate. It also means we don’t have to try to ping something forever to determine whether or not we’re online which is great!
Here’s a simple example of how to show the user when they’re offline:
The important part is the javascript:
window.addEventListener("load", () => {
function handleNetworkChange(event) {
if (navigator.onLine) {
document.body.classList.remove("offline");
} else {
document.body.classList.add("offline");
}
} window.addEventListener("online", handleNetworkChange);
window.addEventListener("offline", handleNetworkChange);
});
Here we add the “offline” class to the body tag if the user is offline and remove it when they come back online. Then in the CSS we can show the notification only if the “offline” class is present.
An easy way to add a little more UX into your PWA :)
