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

发布于 2019-05-24 19:56:36 字数 3823 浏览 2205 评论 0

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

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

安装方法

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

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

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

列表为空,暂无数据

关于作者

JSmiles

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

0 文章
0 评论
84935 人气
更多

推荐作者

遥远的她

文章 0 评论 0

情深如许

文章 0 评论 0

18120987591

文章 0 评论 0

女皇必胜

文章 0 评论 0

13002228876

文章 0 评论 0

    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击“接受”或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。