Dec 14 2012

HTML5 Cache Manifest

當網路無法使用的時候，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。