html5 中建立manifest快取以及更新方法

阿新 • • 發佈：2019-01-15

今天學習了一下manifest的相關知識，整理記錄如下，以備將來查閱。

一、manifest

MIME TYPE：text/cache-manifest
需要由你建立的：NAME.manifest
作用：主要是配置需要快取的檔案

二、實現

在伺服器上新增MIME TYPE支:
比如 Apache 中可在 .htaccess 中新增：
```
AddType text/cache-manifest manifest
```
建立 NAME.manifest:
其中第一行的 CACHE MANIFEST 標識是一定要有的（測試時發現火狐不加也能快取成功，但不知是否有其他影響）；

CACHE / NETWORK / FACKBACK 三個關鍵字用於不同功能，CACHE 快取；NETWORK 指不想快取的頁面；FALLBACK 是指當沒有響應時的替代方案，比如我想請求某個頁面，但這個頁面的伺服器掛了，那麼，我可以顯示另外一個指定的頁面；

檔案編碼最好使用utf-8；

行開頭“#”是註釋；
```
CACHE MANIFEST
# VERSION

# 直接快取的檔案d
CACHE:
m.js
m1.js

# 需要在時間線上的檔案
NETWORK:
cache.html 

# 替代方案
FALLBACK:
#/ajax/ ajax.html
```

3. html檔案改造

給 <html> 標籤加 manifest 屬性

<html manifest="m.manifest">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
	<script type="text/javascript" src="m.js"></script>
</head>
<body>
ver:5<p>
<input type="button" value="shwo_ver" onclick="show_ver();" /><p>
<input type="button" value="load_js" onclick="load_js();" /><p>
<input type="button" value="is_online" onclick="is_online();" /><p>
</body>
</html>

三、測試

chrome的開發者工具》Console 會顯示建立快取的情況

Document was loaded from Application Cache with manifest http://127.0.0.1/work/html5/manifest/m.manifest
Application Cache Checking event
Application Cache Downloading event
Application Cache Progress event (0 of 4) http://127.0.0.1/work/html5/manifest/m.js
Application Cache Progress event (1 of 4) http://127.0.0.1/work/html5/manifest/m1.js
Application Cache Progress event (2 of 4) http://127.0.0.1/work/html5/manifest/cache.html
Application Cache Progress event (3 of 4) http://127.0.0.1/work/html5/manifest/cache1.html
Application Cache Progress event (4 of 4) 
Application Cache UpdateReady event

四、關於更新

1.自動更新：瀏覽器除了在第一次訪問 Web 應用時快取資源外，只會在 cache manifest 檔案本身發生變化（即使是註釋變化）時更新快取。而 cache manifest 中的資原始檔發生變化並不會觸發更新。
2.手動更新：開發者也可以使用 window.applicationCache 的介面更新快取。方法是檢測 window.applicationCache.status 的值，如果是 UPDATEREADY，那麼可以呼叫 window.applicationCache.update() 更新快取。示範程式碼如下。

if (window.applicationCache.status == window.applicationCache.UPDATEREADY) ｛
        window.applicationCache.update(); 
｝

五、線上狀態檢測和監視

1.檢測：navigator.onLine 屬性表示當前是否線上。如果為 true, 表示線上；如果為 false, 表示離線

2.監視：當線上 / 離線狀態切換時會觸發online/offline 事件，這兩個事件觸發在 body 元素上，並且沿著 document.body、document 和 window 的順序冒泡。

參考：

使用 HTML5 開發離線應用 http://www.189works.com/article-68089-1.html

html5 中建立manifest快取以及更新方法

html5 中建立manifest快取以及更新方法

Django建立web專案例項中遇到的問題以及解決方法

Python Django建立web專案例項中遇到的問題以及解決方法

記flume部署過程中遇到的問題以及解決方法（持續更新）

windows下更新pip和安裝ipython過程中遇到的問題以及解決方法

Hadoop 2.0中的日誌收集以及配置方法

Hibernate中1+N問題以及解決方法

JAVA中getClass（）以及getName()方法

資料倉庫中歷史拉鍊表的更新方法

移動端網頁佈局中需要注意事項以及解決方法總結

HTML5中新增video標籤的使用方法

spark中各種連線操作以及實用方法

js中建立物件的5種方法

html5中的localStorage和sessionStorage常用方法和區別

c#中類的學習以及使用方法

python中getitem()、setitem()以及delitem()方法

Mysql中建立使用者和授權的方法

js和jquery中建立標籤新增屬性的方法

android-進階（3）-自定義view(2)-Android中View繪製流程以及相關方法的分析

AltiumDesigner中建立異形焊盤方法

html5 中建立manifest快取以及更新方法

相關推薦