2017-04-25 127 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