Html5 Application Cache

時間 2019-11-12

標籤 html5 html application cache 欄目 HTML5 简体版

原文原文鏈接

HTML5帶來了application cache這一新特性，好多文檔和書籍介紹了使用它來進行離線應用的開發，因爲本身作的手機應用還得面臨弱爆的GPRS網絡，也考慮使用如下來改善用戶的體驗性，使用過程當中也遇到了一些困惑和不解，好比他的FALLBACK功能就沒有實現，還好這個功能對咱們的應用來講不是那麼的非用不可，時間也緊張，就沒有深究它了，下面說一下Application Cache實現離線的基本步驟（全部代碼在chrome和firefox上測試經過）。

一、首先須要一個manifest文件來保存須要離線的文件和頁面的信息，文件的結構以下：

CACHE MANIFEST #必須放在開頭，「#」用來作註釋

#VERSION 1.6

#cache塊是須要緩存到本地的文件列表

CACHE:

static/js/lib/zepto.js

static/js/lib/zepto-min.js

static/css/m.css

test.html

static/css/test.css

nav

nav.htm

#network塊是不須要緩存的文件列表，配爲「*」的話瀏覽器會請求除cache塊中的全部文件

NETWORK:

*

#fallback塊每一行有兩個文件，此配置的做用是當地一個不能從服務器請求到就用第二個文件來代替，很明顯第二個是

#事先就緩存到了瀏覽器裏了，這個沒有測試經過，感興趣的同窗能夠本身試試。

FALLBACK:

二、在頁面中引入上面完成的manifest文件，假如咱們的文件叫作 cache.manifest,則咱們的頁面應該以下：

<!DOCTYPE html>

<html manifest="cache.manifest">

<head>

<meta charset="utf-8">

<script type="text/javascript" src="static/js/lib/zepto.js"></script>

<script type="text/javascript" src="static/js/lib/zepto-min.js"></script>

<style type="text/css" src="static/css/m.css"></style>

<style type="text/css" src="static/css/test.css"></style>

</head>

<body>

Test Application Cache.

change by admin

</body>

</html>

三、咱們在項目裏引入了cache.manifest文件，瀏覽器須要去讀取清單，因此就須要咱們的服務器支持 text/cache-manifest這個mime類型。下面是一些主流服務器的配置方法：

tomcat ：

在安裝目錄的cof/web.xml中增長以下的代碼：

<mime-mapping>

<extension>manifest</extension>

<mime-type>text/cache-manifest</mime-type>

</mime-mapping>

apache：

在網絡根目錄的.htaccess文件中添加一個AddType指令：AddType text/cache-manifest .manifest

好了，到如今就能夠體驗離線帶來的無限快樂與痛苦了。

個人體會是：

一、manifest文件格式必定不能錯，錯了瀏覽器也不會給任何提示，只是不給你用離線功能了，很悲催。

二、設置過manifest的頁面會被自動緩存，直到清楚瀏覽器數據javascript

三、被設置緩存的頁面會被永久的被保存，可是用戶在被緩存的頁面清空瀏覽器數據時，此頁面會被從新加載再次緩存css

相關文章

相關標籤/搜索

application@icon

application@allowbackup

Thymeleaf 教程

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。

最新文章

本站公眾號

歡迎關注本站公眾號,獲取更多信息

相關文章

>>更多相關文章<<