前端最基礎的就是 HTML+CSS+Javascript。掌握了這三門技術就算入門，但也僅僅是入門，現在前端開發的定義已經遠遠不止這些。前端小課堂（HTML/CSS/JS），本着提升技術水平，打牢基礎知識的中心思想，我們開課啦（每週四）。
Manifest
一種應用緩存機制，基於它可以實現離線訪問。
已被web標準廢棄，當然瀏覽器還是支持的。
測試地址-打印在控制檯中
Manifest 的能力
- 離線訪問
- 更快的加載速度
- 更低的流量損耗
Manifest 如何使用
html 文件部分
<html manifest="1190000020779678.appcache>
在 <html> 標籤上指定 manifest 屬性，值爲文件地址。
manifest 文件部分
CACHE MANIFEST
# v1.0.0
/static/js/public_header.js
/static/js/falseReport.js
/static/js/utils.js
/static/css/normalize-8.0.0.css
/static/img/wx-linong.jpg
NETWORK:
*
FALLBACK:
/ /404.htmlCACHE MANIFEST 需要緩存的請求。NETWORK: 需要訪問網絡的請求。可以是使用通配符*，也就是除了需要緩存的都訪問網絡。FALLBACK: 爲異常請求處理，使用替代。
manifest 緩存狀態
- _UNCACHED_(未緩存): 一般用於表示未指定 manifest文件
- _IDLE_(空閒): 用於表示已指定 manifest文件，並已緩存可用
- _CHECKING_(檢查): 正在檢查是否存在更新.
- _DOWNLOADING_(下載): 清單更新後, 重新下載全部資源。
- _UPDATEREADY_(更新就緒): 新版本的緩存下載完成, 全部就緒, 隨即觸發事件
updateready。 - _OBSOLETE_(廢棄): 應用緩存已被廢棄。
applicationCache
是用於操作應用緩存的接口。
-
status對應緩存狀態。 -
on*對應所有可以監聽的事件，也對應各個階段 -
update()爲主動觸發更新，當然這個更新也是去檢測manifest文件。 -
abort()爲主動終止更新 -
swapCache()將cache源切換到最新版本。比如一個頁面開始只緩存 a.js。調用update()之後，新增了 b.js，但是默認規則下並無 b.js。所以可以使用swapCache()來切換。
applicationCache 的事件監聽
applicationCache.oncached = function(){console.log('oncached', arguments)}
applicationCache.onchecking = function(){console.log('onchecking', arguments)}
applicationCache.ondownloading = function(){console.log('ondownloading', arguments)}
applicationCache.onerror = function(){console.log('onerror', arguments)}
applicationCache.onnoupdate = function(){console.log('onnoupdate', arguments)}
applicationCache.onobsolete = function(){console.log('onobsolete', arguments)}
applicationCache.onprogress = function(){console.log('onprogress', arguments)}
applicationCache.onupdateready = function(){console.log('onupdateready', arguments)}
注意事項
- manifest 緩存與瀏覽器緩存不一樣
- 不同 manifest 緩存的也不一樣
- 更新機制依賴於 manifest 文件的更改
- 因爲 manifest 緩存依賴 manifest 更改，所以儘可能少的緩存資源，否則每次更新都會大量更新資源。
- manifest 會緩存當前的 HTML。
