在本教程中，我们将学习Offline.js，它将使用JavaScript自动向用户显示在线/离线指示。

单击此处 https://github.com/hubspot/offline 访问Offline.js GitHub存储库。

安装

Get the latest release from Offline.js GitHub repository.

步骤1：包含脚本

在页面中包含offline.js脚本。

<script src="path/to/offline.js"></script>

步骤2：加入主题

在页面中包含主题之一。

<link rel="stylesheet" href="path/to/themes/offline-theme-default.min.css">

步骤3：加入语言

在页面中包括一种语言。

<link rel="stylesheet" href="path/to/themes/offline-language-english.min.css">

下线

为了检查Offline.js是否正常工作，只需断开Internet连接，您会看到一条消息，指出您处于离线状态。

例

配置Offline.js

为了配置Offline.js，我们将以下设置分配给Offline.options属性。

Offline.options = {
  //to check the connection status immediatly on page load.
  checkOnLoad: false,

  //to monitor AJAX requests to check connection.
  interceptRequests: true,

  //to automatically retest periodically when the connection is down (set to false to disable).
  reconnect: {
    //delay time in seconds to wait before rechecking.
    initialDelay: 3,

    //wait time in seconds between retries.
    delay: 10
  },

  //to store and attempt to remake requests which failed while the connection was down.
  requests: true
};

默认行为

默认情况下，Offline.js发出XHR请求以从服务器加载/favicon.ico文件。
如果服务器上有一个favicon.ico文件，则Offline.js将成功，否则返回404。
在两种情况下，Offline.js都将能够确定连接已建立，并且您已连接到Internet。