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

Z时代
2024-01-10
分类：IT

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'。