---
title: "Online and Offline Events in HTML5"  
description: "Hi everyone in this blog I’m explaining about online and offline events in html5.  Description:HTML 5 has one of the best features, which is the creat"  
author: "Anonymous User"  
published: 2014-11-27  
updated: 2014-11-27  
canonical: https://www.mindstick.com/blog/714/online-and-offline-events-in-html5  
category: "html"  
tags: ["css-css3", "html5", "html5 history"]  
reading_time: 4 minutes  

---

# Online and Offline Events in HTML5

Hi everyone in this blog I’m explaining about online and offline events in html5.\

##### Description:

HTML 5 has one of the best features, which is the creation of offline [web applications](https://www.mindstick.com/blog/11464/improve-your-understanding-of-web-applications) using HTML 5, in other words if you load [your application](https://www.mindstick.com/forum/34702/please-tell-me-what-is-cross-site-scripting-and-how-is-it-harmful-for-your-application) once in your browser and then you disconnect your web connection and you reload your page then it will still reload.

Offline [web application](https://www.mindstick.com/articles/13069/progressive-web-application-pwas-all-you-need-to-know-about):

Web pages are things that you download to your browser and then the browser renders it. As we know to [download anything](https://answers.mindstick.com/qa/94747/what-should-i-do-if-i-can-t-download-anything-from-play-store) you need a [network connection](https://answers.mindstick.com/qa/94984/how-do-you-change-the-network-connection-priority-in-windows-10), but the question is how to download something when you are offline or you do not have a network connection ? the answer is you can't download but after once downloading a web application you can surf the website offline or without an [internet connection](https://www.mindstick.com/blog/299301/how-to-test-your-internet-connection-s-quality-over-time). This is called an offline web application.

In this article I am not discussing offline web applications or how to create an offline web application using HTML 5, but In this article I am explaining offline and online events.

If you want to build a good web application with offline capability or if you want to build a good offline web application, you need to know [whether your](https://www.mindstick.com/interview/33734/how-will-you-cross-check-whether-your-seo-campaign-is-working-or-not) application is offline or online.

\
But why do we need to know that your web application is offline or online?

Answer: Suppose you are using a broadband connection at your home and you are surfing an offline web application and suppose you want to submit the data from that web application to be stored into the database server. But suddenly your network connection has been lost and if you submit your data then that data will also be lost, so you can store that data in a Web-[SQL Database](https://www.mindstick.com/articles/337535/connecting-to-sql-databases-ado-dot-net-essentials) or anywhere within the browser. To store the data within the browser first of all you need to know whether you are offline or online. When you are online then you need to know that the web application is now online so you can re-synchronize your application with the server.

Api for online or offline event:

navigator.onLine has a property to ensure that you are offline or online, navigator.onLine has a [true or false](https://www.mindstick.com/forum/160329/how-can-you-convert-a-value-to-a-boolean-true-or-false-in-javascript) value.

1. If the value is true then the application is online

2. If the value is false then the application is offline

The navigator.onLine must return false if the client PC is not connected to the network.

## Online and Offline Events:

The following example tells how can you use offline and online events with your web application.

##### JavaScript Code:

```
<script>        window.addEventListener('load', function () {            var status = document.getElementById("status");            function Status(event) {                var condition = window.navigator.onLine ? "online" : "offline";                                status.className = condition;                status.innerHTML = "You are : " + condition.toUpperCase();                 log.insertAdjacentHTML("beforeend", "Event: " + event.type + "; Status: " + condition + "<br/>");            }             window.addEventListener('online', Status);            window.addEventListener('offline', Status);        });    </script>
```

**CssCode:**

```
<style>        #status {            position: fixed;            width: 100%;            font: bold 1em sans-serif;            color: #FFF;            padding: 0.5em;        }         #log {            padding: 2.5em 0.5em 0.5em;            font: 1em sans-serif;        }         .online {            background: green;        }         .offline {            background: red;        }    </style>
```

##### HTMLCode:

```
<p>            <h1>Online and Offline Events</h1>        </p>        <div id="status"></div>        <div id="log">Logs<br />        </div>
```

## Output:

**1. Initial when page load:**

When page load first time that time I’m online

![Online and Offline Events in HTML5](https://www.mindstick.com/blogs/e2c2939f-82d3-48fd-9783-55559008a6c0/images/d140dc3a-64a1-4456-b795-72e39fde439c.png)

## 2. When Offline:

**![Online and Offline Events in HTML5](https://www.mindstick.com/blogs/e2c2939f-82d3-48fd-9783-55559008a6c0/images/cdc9183d-de39-4c3e-be5f-328d5f6f91f2.png)**

## 3. When Online:

**![Online and Offline Events in HTML5](https://www.mindstick.com/blogs/e2c2939f-82d3-48fd-9783-55559008a6c0/images/98ed5dbc-a0c3-4414-85f6-7e70f6d37e8e.png)**

in my next post i'll explain about [Difference between MVC 3, MVC 4, MVC 5, and MVC 6](https://www.mindstick.com/blog/722/Difference%20between%20MVC%203%20MVC%204%20MVC%205%20and%20MVC%206#.VP03cfmUdz8)

---

Original Source: https://www.mindstick.com/blog/714/online-and-offline-events-in-html5

Copyright © MindStick Software Pvt. Ltd. This Markdown version is provided for developers, AI systems, and offline reading.