離線應用 · JavaScript半知半解

## 離線應用離線Web應用，是指在設備不能上網的情況下仍然可以運行的應用。要開發離線Web應用，需要下列幾個步驟： - 檢測設備是否能上網 - 應用能訪問一定的資源（圖像、JavaScript、CSS等） - 有一塊本地空間用于保存數據 **1.1 離線檢測** HTML5定義了一個`navigator.onLine`屬性，用來檢測設備是在線還是離線，為true時表示設備能上網，否則表示設備離線。檢測代碼： ``` if (navigator.onLine){ // 正常工作 } else { // 設備已離線 } ``` 除了`navigator.onLine`屬性，HTML5還為檢測網絡是否可用提供了兩個事件：`online`和`offline`。 - `online`：當網絡從離線變為在線時觸發 - `offline`：當網絡從在線變為離線時觸發 ``` window.addEventListener('online', function(){ // 在線 }); window.addEventListener('offline', function(){ // 離線 }); ``` 為了檢測應用是否離線，在頁面加載后，最好先通過`navigator.onLine`取得初始的狀態，然后再通過`online`和`offfline`兩個事件檢測網絡連接狀態是否變化。 **1.2 應用緩存** HTML5的應用緩存（application cache），簡稱：appcache，是專門為開發離線Web應用而設計的。 Appcache就是從瀏覽器的緩存中分出來的一塊緩存區。要想在這個緩存中保存數據，可以使用一個描述文件（manifest file），列出要下載和緩存的資源。 `manifest` 文件可分為三個部分： - CACHE MANIFEST - 在此標題下列出的文件將在首次下載后進行緩存 - NETWORK - 在此標題下列出的文件需要與服務器的連接，且不會被緩存 - FALLBACK - 在此標題下列出的文件規定當頁面無法訪問時的回退頁面（比如 404 頁面） ``` CACHE MANIFEST CACHE: # 需要緩存的列表 test.css test.jpg test.js NETWORK: # 不需要緩存的 test2.jpg FALLBACK: # 訪問緩存失敗后，備用訪問的資源，第一個是訪問源，第二個是替換文件*.html /offline.html 2.jpg/3.jpg ``` `#`是注釋的意思。注意：必須以`CACHE MANIFEST`開頭可以在`<html>`中的`manifest`屬性中指定離線文件的路徑，就可以將描述文件與頁面關聯起來了。 ``` <html manifest="offline.manifest"> ``` 注意：manifest文件的`MIME`類型必須是"text/cache-manifest"。 > 描述文件的擴展名以前推薦用manifest，現在推薦用appcache **1.2.1 applicationCache對象** JavaScript提供了相應的API讓我們去監控描述文件的狀態，這個API的核心是`applicationCache`對象（全局），這個對象有一個`status`屬性，屬性的值是常量，可能值如下： - 0：無緩存（UNCACHE），即沒有與頁面相關的應用緩存 - 1：閑置（IDLE），即應用緩存未得到更新 - 2：檢查中（CHECKING），即正在下載描述文件并檢測更新 - 3：下載中（DOWNLOADING），即應用緩存正在下載描述文件中指定的資源 - 4：更新完成（UPDATEREADY），即應用緩存已經更新了資源，而且所有資源都已下載完畢，可以通過swapCache()來使用了 - 5：廢棄（IDLE），即應用緩存的描述文件已經不存在了。 **1.2.2 應用緩存相關事件** 應用緩存還有很多相關的事件，表示其狀態的改變： - `checking`：在瀏覽器為應用緩存查找更新時觸發 - `error`：在檢測更新或下載資源期間發生錯誤時觸發 - `noupdate`：在檢查描述文件發生文件無變化時觸發 - `downloading`：在開始下載應用緩存資源時觸發 - `progress`：在文件下載應用緩存的過程中持續不斷的觸發 - `updateready`：在頁面新的應用緩存下載完畢且通過swapCache()使用時觸發 - `cached`：在應用緩存完整可用時觸發 ``` applicationCache.addEventListener('updateready', function(){ if(applicationCache == 4) { //4等于application.UPDATEREADY applicationCache.swapCache(); //使用新版本資源 window.location.reload(); // 刷新頁面 } }, false); ``` 使用`on`方式也可以： ``` applicationCache.ondownloading = function(){ } ``` 我們可以通過update()方法來手動檢查更新： ``` applicationCache.update(); ``` **1.3 更新問題** 這里還要提一個關鍵問題，在線狀態下，瀏覽器會檢測描述文件是否有更新，而并不會檢測描述文件內的相應文件是否更新。比如有一個描述文件如下： ``` CACHE MANIFEST # Version 1 test.js ``` 當你修改了test.js里的內容時，瀏覽器并不會在檢測描述文件時檢測到這文件的變化，應該改成這樣： ``` CACHE MANIFEST # Version 2（更改這個數字讓瀏覽重新下載描述文件） test.js ```