## 離線應用
離線Web應用，是指在設備不能上網(wǎng)的情況下仍然可以運行的應用。
要開發(fā)離線Web應用，需要下列幾個步驟：
- 檢測設備是否能上網(wǎng)
- 應用能訪問一定的資源（圖像、JavaScript、CSS等）
- 有一塊本地空間用于保存數(shù)據(jù)
**1.1 離線檢測**
HTML5定義了一個`navigator.onLine`屬性，用來檢測設備是在線還是離線，為true時表示設備能上網(wǎng)，否則表示設備離線。
檢測代碼：
```
if (navigator.onLine){
// 正常工作
} else {
// 設備已離線
}
```
除了`navigator.onLine`屬性，HTML5還為檢測網(wǎng)絡是否可用提供了兩個事件：`online`和`offline`。
- `online`：當網(wǎng)絡從離線變?yōu)樵诰€時觸發(fā)
- `offline`：當網(wǎng)絡從在線變?yōu)殡x線時觸發(fā)
```
window.addEventListener('online', function(){
// 在線
});
window.addEventListener('offline', function(){
// 離線
});
```
為了檢測應用是否離線，在頁面加載后，最好先通過`navigator.onLine`取得初始的狀態(tài)，然后再通過`online`和`offfline`兩個事件檢測網(wǎng)絡連接狀態(tài)是否變化。
**1.2 應用緩存**
HTML5的應用緩存（application cache），簡稱：appcache，是專門為開發(fā)離線Web應用而設計的。
Appcache就是從瀏覽器的緩存中分出來的一塊緩存區(qū)。要想在這個緩存中保存數(shù)據(jù)，可以使用一個描述文件（manifest file），列出要下載和緩存的資源。
`manifest` 文件可分為三個部分：
- CACHE MANIFEST - 在此標題下列出的文件將在首次下載后進行緩存
- NETWORK - 在此標題下列出的文件需要與服務器的連接，且不會被緩存
- FALLBACK - 在此標題下列出的文件規(guī)定當頁面無法訪問時的回退頁面（比如 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`屬性中指定離線文件的路徑，就可以將描述文件與頁面關聯(lián)起來了。
```
<html manifest="offline.manifest">
```
注意：manifest文件的`MIME`類型必須是"text/cache-manifest"。
> 描述文件的擴展名以前推薦用manifest，現(xiàn)在推薦用appcache
**1.2.1 applicationCache對象**
JavaScript提供了相應的API讓我們?nèi)ケO(jiān)控描述文件的狀態(tài)，這個API的核心是`applicationCache`對象（全局），這個對象有一個`status`屬性，屬性的值是常量，可能值如下：
- 0：無緩存（UNCACHE），即沒有與頁面相關的應用緩存
- 1：閑置（IDLE），即應用緩存未得到更新
- 2：檢查中（CHECKING），即正在下載描述文件并檢測更新
- 3：下載中（DOWNLOADING），即應用緩存正在下載描述文件中指定的資源
- 4：更新完成（UPDATEREADY），即應用緩存已經(jīng)更新了資源，而且所有資源都已下載完畢，可以通過swapCache()來使用了
- 5：廢棄（IDLE），即應用緩存的描述文件已經(jīng)不存在了。
**1.2.2 應用緩存相關事件**
應用緩存還有很多相關的事件，表示其狀態(tài)的改變：
- `checking`：在瀏覽器為應用緩存查找更新時觸發(fā)
- `error`：在檢測更新或下載資源期間發(fā)生錯誤時觸發(fā)
- `noupdate`：在檢查描述文件發(fā)生文件無變化時觸發(fā)
- `downloading`：在開始下載應用緩存資源時觸發(fā)
- `progress`：在文件下載應用緩存的過程中持續(xù)不斷的觸發(fā)
- `updateready`：在頁面新的應用緩存下載完畢且通過swapCache()使用時觸發(fā)
- `cached`：在應用緩存完整可用時觸發(fā)
```
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 更新問題**
這里還要提一個關鍵問題，在線狀態(tài)下，瀏覽器會檢測描述文件是否有更新，而并不會檢測描述文件內(nèi)的相應文件是否更新。
比如有一個描述文件如下：
```
CACHE MANIFEST
# Version 1
test.js
```
當你修改了test.js里的內(nèi)容時，瀏覽器并不會在檢測描述文件時檢測到這文件的變化，應該改成這樣：
```
CACHE MANIFEST
# Version 2（更改這個數(shù)字讓瀏覽重新下載描述文件）
test.js
```
- 前言
- JavaScript簡介
- 基本概念
- 語法
- 數(shù)據(jù)類型
- 運算符
- 表達式
- 語句
- 對象
- 數(shù)組
- 函數(shù)
- 引用類型（對象）
- Object對象
- Array對象
- Date對象
- RegExp對象
- 基本包裝類型（Boolean、Number、String）
- 單體內(nèi)置對象（Global、Math）
- console對象
- DOM
- DOM-屬性和CSS
- BOM
- Event 事件
- 正則表達式
- JSON
- AJAX
- 表單和富文本編輯器
- 表單
- 富文本編輯器
- canvas
- 離線應用
- 客戶端存儲（Cookie、Storage、IndexedDB）
- HTML5 API
- Video/Audio
- Geolocation API
- requestAnimationFrame
- File API
- FullScreen API
- IndexedDB
- 檢測設備方向
- Blob
- vibrate
- Luminosity API
- WebRTC
- Page Visibility API
- Performance API
- Web Speech
- Notification
- 面向對象的程序設計
- 概述
- this關鍵字
- 原型鏈
- 作用域
- 常用API合集
- SVG
- 錯誤處理機制
- JavaScript開發(fā)技巧合集
- 編程風格
- 垃圾回收機制