What is Offline.js?

Offline.js is a library to automatically alert your users when they’ve lost internet connectivity, like Gmail.It captures AJAX requests which were made while the connection was down, and remakes them when it’s back up, so your app reacts perfectly. It has a number of beautiful themes and requires no configuration.

Offline

Improve the experience of your app when your users lose connection.
  • Monitors ajax requests looking for failure
  • Confirms the connection status by requesting an image or fake resource
  • Automatically grabs ajax requests made while the connection is down and remakes them after the connection is restored.
  • Simple UI with beautiful themes
  • 3kb minified and compressed

Properties

Offline.check(): Check the current status of the connection.

Offline.state: The current state of the connection ‘up’ or ‘down’

Offline.on(event, handler, context): Bind an event. Events:

Checking

Offline ships with two methods for checking the connection. One makes a request for a tiny image hosted on a cloudfront account for the benevolence of all, the other makes an XHR request against the current domain, hoping to get back any sort of response (even a 404).
You can change the url of the image to be one you control, if you like:

Offline.options = {checks: {image: {url: ‘my-image.gif’}}};

Loading an image was chosen (rather than a script file), because it limits the potential damage if a hostile party were to be in control of it.

Reconnect

The reconnect module automatically retests the connection periodically when it is down. A successful AJAX request will also trigger a silent recheck (if interceptRequests is not false).

You can disable the reconnect module by setting the reconnect to false. Reconnect can be configured by setting options on the reconnect setting.

Installing

Include the javascript and one of the themes on your site. You’re done!
Love this post?