HTML5/JS - 檢查應用程序處於脫機狀態

我正在測試HTML5脫機應用程序。爲此，我正在停止本地Web服務器（IIS）並打開應用程序。它裝載得很好，但只要它請求服務器端API方法就會失敗。HTML5/JS - 檢查應用程序處於脫機狀態

我想，以防止和代替$獲得（「/ API /法」），從我的本地存儲讀取數據。但我可以找到任何工具來了解我的應用程序處於脫機狀態。

if (/* online */) { 
    // fire ajax 
} else { 
    // ask localstorage 
}

我試圖用navigation.onLine，但它似乎總是正確的（至少我可以看到，在Chrome瀏覽器）。

你有什麼建議嗎？

編輯：考慮到當前的答案。應用程序清楚地知道它處於脫機狀態，因爲它根據cache.manifest獲取資源。對我來說這很荒謬，客戶需要做任何伎倆和平局。我假設應該有一個簡單的方法來檢查當前模式。

來源

2012-03-20 Alexander Beletsky

嘗試看upshot.js來源。他們已經實施了這種行爲 – mironych 2012-03-20 12:05:31

有沒有簡單的方法來檢查，因爲沒有簡單的方法知道什麼是'在線'。網絡接口可能啓動，設備/ PC可能在網絡上，但是如果該網絡沒有連接到互聯網，那麼您是在線還是離線？這取決於應用程序是在互聯網上還是在內部網上。如果您的互聯網訪問可用，但您的應用被防火牆規則阻止，您的應用在線還是離線？檢查*的最簡單方法是*某種ping。 – robertc 2012-03-20 12:11:41

@robertc您的評論對我來說很有意義，謝謝！ – 2012-03-20 12:13:46

一個簡單的檢查方法是在你的清單中添加一個備用的部分是這樣的：

FALLBACK 
/online.js /offline.js

然後在online.js你一個全局變量設置爲true，在offline.js你把它設置爲false，只要您計劃進行網絡連接並在回調中進行有條件的處理，您只需要Ajax請求online.js。同時，保持所有的應用數據客戶端。

另一種方法是a blocking polyfill for navigator.onLine as suggested by Remy Sharp。

來源

2012-03-20 12:18:07 robertc

它看起來像一個非常穩固的解決方案！ – 2012-03-20 13:38:18

作品魅力！ – 2012-03-20 14:33:29

如何做一些錯誤處理。就像Try Catch循環一樣。

try { 
    //Run some code here 
    } 
catch(err) { 
    //Handle errors here 
    }

來源

2012-03-20 11:34:18

嗯，你建議在那裏運行什麼代碼？ – 2012-03-20 11:36:46

做一些類似於Google.com的操作，然後將它設置爲true，如果不成功則設置爲true。 Google有很高的可能性不會下降......有史以來。因此，如果應用程序處於聯機狀態，您將有更好的機會進行實際測試，而不僅僅是您嘗試訪問的Web資源處於脫機狀態。 – 2012-03-20 11:56:57

Google的可用性和我的應用程序的離線模式 - 差別很大。正如我在我的問題中所說的那樣，我只是停止了我的本地網絡服務。我並沒有「停止」互聯網。 – 2012-03-20 11:59:55

在線狀態可以檢查也做一個Ajax請求HEAD一個超時當到達超時（或調用返回一個錯誤狀態），你可以假設你正在脫機工作（沒有網絡capabitlities）和你必須使用本地存儲來代替

實際上，爲了保持狀態一致性，localstorage不僅適用於脫機狀態，還適用於聯機狀態，並且特定ajax資源暫時不可用（例如網站過載）。當然，您需要定期（或增量）超時對該資源進行連續輪詢，直到它再次可用。

來源

2012-03-20 11:38:33 fcalderan

是不是要問localStorage的時候AJAX調用失敗與特定錯誤（操作超時）的選項？

或者因爲頁（至少部分地）與服務器腳本生成可以包括與服務器端腳本網頁上的某請求時間戳（或唯一ID），並把它的localStorage。然後，您可以通過檢查存儲的ID和渲染的頁面來查看頁面是否從緩存中加載。

來源

2012-03-20 11:53:10

最好的選擇可能是使用jQuery $.get()函數的error事件來查詢localStorage而不是您的web服務器。如果您的服務器無法訪問以及用戶無法訪問整個互聯網，則這有利於回落。

$.get({ 
    success: //deal with postback from ajax call, 
    error: //Whoops no access to server deal with it in a local way 
})

來源

2012-03-20 12:10:15

我需要相同的功能和一番搜索發現此功能後：

http://louisremi.com/2011/04/22/navigator-online-alternative-serverreachable/

以下是文章的代碼，以防萬一鏈接中斷：

function serverReachable() { 
    // IE vs. standard XHR creation 
    var x = new (window.ActiveXObject || XMLHttpRequest)("Microsoft.XMLHTTP"), 
    s; 
    x.open(
     // requesting the headers is faster, and just enough 
     "HEAD", 
     // append a random string to the current hostname, 
     // to make sure we're not hitting the cache 
     window.location.href.split("?")[0] + "?" + Math.random(), 
     // make a synchronous request 
     false 
); 
    try { 
     x.send(); 
     s = x.status; 
     // Make sure the server is reachable 
     return (s >= 200 && s < 300 || s === 304); 
    } 
    // catch network & other problems 
    catch (e) { 
    return false; 
    } 
}

請注意，上面的代碼包含Scott Jehl修復的與本地主機一起工作的問題，該問題在評論中較低。這裏是一個鏈接到同一功能的jQuery的版本：

https://gist.github.com/scottjehl/947084

和代碼從該鏈接：

function serverReachable() { 
    var s = $.ajax({ 
      type: "HEAD", 
      url: window.location.href.split("?")[0] + "?" + Math.random(), 
      async: false 
     }).status; 
    return s >= 200 && s < 300 || s === 304; 
};

我發現這個技術是真正有效的。由於該請求僅用於標題信息，因此速度相當快，並且適用於所有瀏覽器。巨大的成功！ :)

我希望其他人覺得這有幫助，因爲我做到了。 :)

來源

2014-06-24 08:24:05 BruceHill

HTML5/JS - 檢查應用程序處於脫機狀態

回答

相關問題