2017-04-25 109 views
4

我想为条件登录页面,如果互联网连接可用,然后检查服务器数据库,否则检查本地存储。如果(Internet ==不可用)在HTML5应用程序清单离线应用程序

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

离线时应该怎样处理事件?

+0

定义 “可用”。这不一定容易。有时候它只是简单的破碎,但问题在于它在技术上的工作,但非常缓慢。 – tadman

+0

'但是当页面从appcache加载时,它总是告诉我,我已连接到Internet,您的ajax响应被缓存。 – gurvinder372

回答

7

您可以通过使用返回布尔值的Navigator.onLine轻松地拉取客户端的互联网状态。

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 Browser 4.4+和Chrome for Android 57+上的this function is supported


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

FALLBACK: 
/offline.html 

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

+0

谢谢,但仍然有同样的问题。 – Bharat

+0

@Bharat告诉我们你是如何实现它的,将你的代码粘贴到jsfiddle中并粘贴链接:)上面的函数工作,我们在很多HTML webapps中使用它。肯定这只是一些执行的怪癖。让我们看看。 –

+0

https://jsfiddle.net/bharats/61bxtvhy/2/ – Bharat