跳到主要內容

發表文章

目前顯示的是 十一月, 2015的文章

HTML5 Application cache 離線版網頁

大家好,我是奶綠茶
HTML4 時代,網頁一定要連網才看的到
但有時在特定的場合,不一定有網路或是網路不穩定就什麼都看不到
現在 HTML5 提供了一個離線版的技術
原理就是用 HTML5 Application cache
事先把需要的檔案存在使用的裝置(PC, iOS, Android)
W3C的介紹:http://www.w3schools.com/html/html5_app_cache.asp
Application cache 有三個特性
1. 離線瀏覽(已經快取,直接從裝置載入)
2. 載入速度快(已經快取,直接從裝置載入)
3. 漸少伺服器的檔案請求(已經快取,直接從裝置載入)
(已經快取,直接從裝置載入),很重要,所以要說三次

以下為程式碼時間
1. 在你的 html tag 加上 manifest 的屬性,並直定一個 milkmidi.appcache 的文件檔
<html manifest="milkmidi.appcache"> </html>
網頁載入時,同時會一起載入 milkmidi.appcache 文件
該文件就是用來定義那些檔案要被快取

2. Manifest 文件
新增一個空白的記事本文件,副檔名存成 .appcache 即可
有三個特別的關鍵字要注意
CACHE MANIFEST
CACHE MANIFEST app.css milkmidi.png app.js 告訴 Browser 要快取住 app.css , milkmidi.png , app.js這三個檔案
檔案路徑和 html 一樣,因為我的 demo 三個檔都跟 html 放在同一層路徑
如果你有開資料夾路徑的話,記得也要寫進去

不要快取的檔案
NETWORK
NETWORK login.aspx
一般來說,快取都用在存放檔案(css,js,圖片等)
html 檔因為 K 數小,一般都很少快取
如果你的展示環境並沒有網路,一定要全都快取的話
就可以把你的 html 檔也寫進 .appcache 裡
或是用第三個關鍵字來處理
FALLBACK
FALLBACK offline.html 有網路時,就會連你的 index.html
離線時,就載入 offline.html

3. 更新檔案
只要你的 appcache 有更動,…