2010-07-19 94 views
4

來自Dive into HTML5: Cache Manifest: Fallback sectionHTML5緩存清單:後備部分和網絡*

CACHE MANIFEST 
FALLBACK: 
//offline.html 
NETWORK: 
* 

我不明白這個代碼塊究竟做了什麼的URL。回退部分的意思是什麼時候找不到任何東西,顯示offline.html頁面

然後network: *所有資源都將被緩存?它也說

它在每個頁面上使用常見的CSS,JavaScript和 圖像。這些 資源中的每一個都需要在CACHE

中明確列出 這似乎與 network: *衝突,它似乎說緩存一切?

回答

13

緩存清單中有三種類型的標題,CACHE,NETWORK和FALLBACK。任何不在標題下的內容都隱式設置在CACHE下。每個部分的解釋:

CACHE:該標題下的文件將被緩存。

網絡:本項文件需要連接到互聯網,因此會緩存。

回退:此標題下的模式匹配的文件(如匹配所有文件的模式「/」)並且沒有被緩存,將顯示一個後備文件。

至於從潛水代碼塊轉換成HTML 5,存在的解釋「NETWORK:*」部分只是在它之下:

這意味着,當你瀏覽 此假設離線啓用 維基百科在線,您的瀏覽器將 獲取圖像和視頻和其他 嵌入式資源正常,即使 他們是在不同的域。 (這 在大型網站一樣,即使 他們是不是離線網絡 應用程序的一部分。HTML頁面生成 和本地提供,而圖像和視頻 從一個CDN服務於 另一個域。)無這個通配符 國旗,我們假設的離線啓用 維基百科會表現得很奇怪,當你在線 - 具體來說,它 不會加載任何外部託管的 圖像或視頻!

以下報價:

它使用通用的CSS,JavaScript和每一頁上的圖像 。每個 資源將需要在緩存中明確列出

意味着您必須包括所有必要的CSS,JavaScript和圖像文件緩存中的標題下的清單。它與'NETWORK:*'不衝突,因爲網絡標題確實是而不是意味着'緩存所有'。它實際上意味着相反:NETWORK標題下的所有內容都需要互聯網連接,不應緩存。

7

我已經發現了更多有用的東西有關預置:

有點實驗後,我嘗試過各種東西,包括後備文件是否:應該出現在高速緩存或網絡段的。答案似乎是否定的。

舉個例子... FALLBACK: 的註冊-portrait.png離線畫像-1.png 的註冊-landscape.png離線景觀1.png

我指定此在我最近的一個微網站上。其目的是在線時顯示註冊png文件,脫機時顯示offline-png文件。這很好。特別是每行左側的文件都隱含在網絡部分中,該網站將始終嘗試讓它們聯機。它們不能被添加到NETWORK部分,否則它似乎會覆蓋FALLBACK中的內容。 另外,愉快的是,右邊的文件隱含地就像在CACHE:部分中添加一樣,即使它們一開始沒有使用,它們也會在第一次加載時被緩存,而不必將它們明確地添加到CACHE中:儘管可以添加它們如果你願意,也可以。沒什麼區別。

對於這種配置,查看網絡服務器日誌,我發現每次刷新頁面時,apache都會在清單文件中記錄一個304,並針對該版本頁面所需的註冊png文件有一個CSS媒體選擇器根據頁面大小來確定它)。所以正確地檢查註冊png文件以及通常的清單檢查,這正是我想要的。

爲了徹底起見,我嘗試查看根文件是否也需要位於CACHE:部分。事實證明它不是!如果您的頂級文件是index.html,並且它的html標籤中指定了清單文件,那麼清單文件不需要在任何地方包含index.html,它將被隱式緩存。

我很好奇應用程序緩存可以延伸多遠。你能否包括其他鏈接到或在iframe中的html文件?或者這些都需要有自己的清單文件是分開的?任何人都在意評論?

有關格式A面評論,不犯錯誤我沒有,這是擺在... 網絡 file1.js

缺少冒號導致它完全打破,認爲網絡是一個資源本身。

它必須是... 網絡: file1.js

+0

感謝實驗和回來離開反饋!我正要開始做同樣的事情,因爲我不明白Fallback中的內容是如何緩存的,以及它是不是明確指定的地方 – Kirn 2013-02-18 04:44:26