如果(互联网==不可用)HTML5应用程序清单offiline应用程序

Question

我想为登录页面设置条件,如果有互联网连接,则检查服务器数据库,否则检查localstorage.

我试图通过AJAX调用检查这个,但是当从appcache加载页面时,它总是告诉我我已连接到Internet.我对清单文件中的回退部分有所了解,但我不知道如何在我的情况下使用它.

离线时我应该怎么做才能处理事件？

Answer 1

您可以通过使用Navigator.onLine返回布尔值来轻松拉取客户端的Internet状态.

if (!navigator.onLine) {
   //Browser is offline, pull data from localStorage
} else {
   //Browser is online, pull data through AJAX
}

您还可以将其绑定到事件侦听器,以便您可以动态更改数据源:

window.addEventListener('offline', function(e) { 
   //Browser is offline, pull data from localStorage
});

参考:https: //developer.mozilla.org/en-US/docs/Web/API/NavigatorOnLine/onLine

在发布时,IE11,IE Edge,Firefox 51+ Chrome 49 +,Safari 10 +,iOS 9.3 +,Android浏览器4.4+和Chrome for Android 57+ 支持此功能

更新似乎我误解了你原来的问题.检查清单文件后.从localStorage中提取数据的代码应该进入该FALLBACK部分.您应该将localStorage函数放入offline.html文件中.

FALLBACK:
/ offline.html

参考:https://developer.mozilla.org/en-US/docs/Web/HTML/Using_the_application_cache