CODEWITHSUNDEEP
javascripthtml
Certified Clickbait
Certified Clickbait

Reputation: 44

Show error page when no internet (html)

I have created a website and wanted to know how I can show a custom error page when there is no internet connection. For example,

screenshot

Upvotes: 2

Views: 6636

Answers (1)

Nisarg Shah
Nisarg Shah

Reputation: 14541

You can use the offline and online events in Javascript.

Here's a simple snippet that alerts the user on these events, but you can extend the idea to present a better UI.

window.addEventListener("online", function() {
  alert("You are online now!");
});

window.addEventListener("offline", function() {
  alert("Oops! You are offline now!");
});

Also, note that you can check whether the page is online or not using navigator.onLine

if (navigator.onLine) {
  console.log("You are online");
} else {
  console.log("You are offline");
}

Note: You can test these in Chrome through Network tab, where there is an option to take the tab offline temporarily.

Upvotes: 8

Related Questions