How to Handle Being Offline in HTML

How to Handle Being Offline in HTML

Ferenc Almasi β€’ 2020 August 08 β€’ Read time 1 min read
  • twitter
  • facebook
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.

Copied to clipboard! Playground
<!-- Use the onoffline attribute to handle offline -->

<body onoffline="handleOffline()">
  ...
</body>
offline.html

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:

Copied to clipboard!
window.addEventListener('offline', () => { ... }); // Lost internet connection
window.addEventListener('online',  () => { ... }); // Regained internet connection
offline.js
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
  • twitter
  • facebook
HTML
Did you find this page helpful?
πŸ“š More Webtips
Frontend Course Dashboard
Master the Art of Frontend
  • check Access 100+ interactive lessons
  • check Unlimited access to hundreds of tutorials
  • check Prepare for technical interviews
Become a Pro

Courses

Recommended

This site uses cookies We use cookies to understand visitors and create a better experience for you. By clicking on "Accept", you accept its use. To find out more, please see our privacy policy.