Offline.js 检测用户的网络是否连接

Question

Offline.js 是一个用来在一旦丢失了互联网连接后对用户进行提醒的 JavaScript 库。类似 Gmail 它可以捕获 AJAX 请求来检测连接是否断开，并在连接重新恢复时重置状态。该库提供很多漂亮的主题，无需任何配置。

提高你的应用程序的强壮性，当你的用户失去网络连接，及时通知和提醒用户。

安装方法

引入插件脚本文件 Offline.js 、Offline的主题文件和 Offline的语言文件 到你的网站中，只使用 JavaScript API 没有界面的指示，只是离开了CSS 文件，如果你想看看它是如何在你的网站上看，断开你的互联网，或尝试模拟。

可选参数

你可以通过设置 offline.options 把剧本后提供一些配置，选项（任何可以提供作为一个函数），其默认值：

{
  // Should we check the connection status immediatly on page load.
  checkOnLoad: false,
  // Should we monitor AJAX requests to help decide if we have a connection.
  interceptRequests: true,
  // Should we automatically retest periodically when the connection is down (set to false to disable).
  reconnect: {
    // How many seconds should we wait before rechecking.
    initialDelay: 3,
    // How long should we wait between retries.
    delay: (1.5 * last delay, capped at 1 hour)
  },
  // Should we store and attempt to remake requests which fail while the connection is down.
  requests: true,
  // Should we show a snake game while the connection is down to keep the user entertained?
  // It's not included in the normal build, you should bring in js/snake.js in addition to
  // offline.min.js.
  game: false
}

方法函数

Offline.check(): 检查连接的当前状态。

Offline.state: 连接“up”或“down”的当前状态

Offline.on(event, handler, context): 绑定一个函数。

• up: The connection has gone from down to up
• down: The connection has gone from up to down
• confirmed-up: A connection test has succeeded, fired even if the connection was already up
• confirmed-down: A connection test has failed, fired even if the connection was already down
• checking: We are testing the connection
• reconnect:started: We are beginning the reconnect process
• reconnect:stopped: We are done attempting to reconnect
• reconnect:tick: Fired every second during a reconnect attempt, when a check is not happening
• reconnect:connecting: We are reconnecting now
• reconnect:failure: A reconnect check attempt failed
• requests:flush: Any pending requests have been remade
• requests:hold: A new request is being held

Offline.off(event, handler): 移除一个绑定事件

浏览器检测

默认情况下，脱机使 XHR 请求加载 /favicon.ico 来检查连接。如果你没有这样的文件，它将 404 在控制台，但其他工作精细（甚至是一个 404 意味着连接是上升）。你可以改变它的点击率（一个端点，将响应快速204是完美的）：

Offline.options = {checks: {xhr: {url: '/connection-test'}}};

确保你的 URL 检查具有相同的起源页面（连接方法，域和端口都必须相同），否则你会 CORS 系统的问题。您可以添加 Access-Control 的端点固定在现代浏览器，但它仍然会在 IE9 以下原因问题。

如果你想在不同的域上运行测试，尝试图像方法。它加载的图像，这是允许跨域。

Offline.options = {checks: {image: {url: 'my-image.gif'}, active: 'image'}}

一cavet是用图像的方法，我们不能区分404从真正的连接问题，所以在所有的任何错误都会出现，作为连接问题离线。

线下还包括一个叫 'up' 和另一个叫 'down' 的检查，这将总是报告上升或下降，分别为测试。你可以激活它们通过设置 active 选项，添加一个数据属性脚本标签的名称数据模拟和价值 'up' 或 'down'，或通过设置 localStorage.OFFLINE_SIMULATE 'up' 或 'down'。

重新连接

重新连接模块自动重新连接它下跌时周期。一个成功的 Ajax 请求也触发了一个无声的复核（如果 interceptRequests 返回false）。

您可以通过设置 reconnect 到假以禁用重新连接模块。重新连接可通过设置重新连接设置的设置来配置。