當網路無法使用的時候,html5提供一個可以預先儲存到本機端,讓沒有網路的情況也可以使用。當需要更新時,只要去修改manifest的版本,browser就會自動做update動作。
如果是使用nginx需要在mime.types,加入以下設定:
text/cache-manifest mf manifest;
以上動作只是針對server對browser需要吐回header,讓browser做解析,例如是php、java、node.js,這類型的語言,也可以直接在header自行加入。
html example:
<!DOCTYPE HTML> <html lang="en" manifest="test.manifest"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <script type="text/javascript" src="test.js"></script> <script type="text/javascript"> test.hello(); </script> hello </body> </html>
test.manifest:
CACHE MANIFEST # VERSION 0.1 #需要cache path CACHE: test.js #需要連線至網路的path NETWORK: #找不到path,將去替換path FALLBACK:
以上這種作法,會有一個問題,如果當page不是靜態的,而是要做成動態方式,page會預先被cache住,即時在manifest裡面的network設定,也還是有一樣的情況。網路上查到可以使用iframe去內嵌入一個cache.html,但是這幫助並不大,實際頁面上讀取的static檔案,還是會重新去讀取,會與iframe裡面的cache沒有相關,反而會覆蓋iframe cache裡面的檔案(路徑相同,ex:test.js)。
如果只是要cache js的話,那目前有個作法,可以解決這個問題,但不是一個好的解決方式,如下。
index html:
<!DOCTYPE HTML> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <script type="text/javascript"> function onload(){ document.querySelectorAll("iframe")[0].contentWindow.test.hello(); } </script> <iframe src="cache.html" style="display:none;" ></iframe> <script> document.querySelectorAll("iframe")[0].onload = onload; </script> </body> </html>
cache html:
<!DOCTYPE HTML> <html lang="en" manifest="test.manifest"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <script type="text/javascript" src="test.js"></script> </body> </html>
test.js:
test = { hello:function(){ console.log("hello"); } };
test.manifest:
CACHE MANIFEST # VERSION 0.1 # CACHE: test.js # NETWORK: # FALLBACK:
以上作法,主要是利用iframe讀取到的cache script,在從主要頁面對iframe抓取相關javascript object。