How to Handle Being Offline in HTML

In HTML, there is an event when losing network connection. Use the onoffline event on the body tag in HTML to run a function when the browser loses internet access.

<!-- Use the onoffline attribute to handle offline -->

<body onoffline="handleOffline()">
  ...
</body>
offline.html
Copied to clipboard!

This can be used to, for example, defer network requests or alert users about the state change in the network connection. To improve upon this technique, do it through an imported script in JavaScript:

window.addEventListener('offline', () => { ... }); // Lost internet connection
window.addEventListener('online',  () => { ... }); // Regained internet connection
offline.js
Copied to clipboard!
How to Handle Being Offline in HTML
If you would like to see more Webtips, follow @flowforfrank

If you would like to learn more about how to handle being offline, make sure to check out the articles below:

Going Offline With Service WorkersHow to Sync Your Client and Server After Being Offline
Remove ads
Remove ads

📚 Get access to exclusive content

Want to get access to exclusive content? Support webtips with the price of a coffee to get access to tips, checklists, cheatsheets, and much more. ☕

Get access Support us
Remove ads Read more on
Remove ads
Remove ads
🎉 Thank you for subscribing to our newsletter. x