Offline.js 检测用户的网络是否连接 - 文章教程

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

发布于 2019-05-24 字数 4517 浏览 1962 评论 0

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

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

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

安装方法

引入插件脚本文件 Offline.jsOffline的主题文件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 到假以禁用重新连接模块。重新连接可通过设置重新连接设置的设置来配置。

如果你对这篇文章有疑问,欢迎到本站 社区 发帖提问或使用手Q扫描下方二维码加群参与讨论,获取更多帮助。

扫码加入群聊

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

目前还没有任何评论,快来抢沙发吧!

关于作者

JSmiles

生命进入颠沛而奔忙的本质状态,并将以不断告别和相遇的陈旧方式继续下去。

2583 文章
29 评论
84935 人气
更多

推荐作者

清风夜微凉

文章 1 评论 0

为你鎻心

文章 2 评论 0

xxhui

文章 0 评论 0

1PKOH46yx8j0x

文章 0 评论 0

Arthur

文章 0 评论 0