Html5 offline storage uses js to check whether users are connected to the Internet

Source: Internet
Author: User

Offline browsing is becoming more and more popular in HMTL5 mobile applications. However, the advent of new technologies can sometimes lead to additional distress for our web developers, such as how to tell if a user is online or offline now? Fortunately, there are spears with shields, and navigator objects in JavaScript help us solve this problem. The

navigator.online

Navigator.online property provides us with a Boolean value to determine whether the user is connected to the Internet. You can access it this way:

if (navigator.online) {//True|false
    //...
}

Nothing is simpler than this!


Events

We can also bind offline and online events in addition to this offline/on-line property value:

Function Updateindicator () {
    //can then update online status according to the Offline/online button's color
}

///According to Network Connections
Window.addeventlistener (' Online ',  updateindicator);
Window.addeventlistener (' Offline ', updateindicator);
Updateindicator ();

Of course, the old-fashioned technology also provides a way to use the Ononline and Onoffline methods on the body tag.

I can imagine that many places need to use these events and properties. such as a situation, when the user is working, break the net, if our Web application can detect this state, you can keep the user's writing to the local Web storage, and so on after the network recovery, and then submit to the server, so, broken network will not give users the writing impact. This is just a simple example, I believe you can come up with more. The

needs to be reminded that this API is not so reliable. The oldest technique for timing refreshes can be used as a record.



HTML5 judgment device online offline and monitor network status change Example

tested Android ipad default browser support, Appcan encapsulated Web page also supports


<!doctype html>


Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.