大家好，我是奶綠茶
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 的文件檔
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 有更動，Browser 就會自動重新載入 appcache 裡要快取的檔
這時可以用寫注解的方法
# 表示注解
CACHE MANIFEST # 2015-11-7 v1.0.0 app.css milkmidi.png.gif app.js NETWORK: login.aspx FALLBACK: offline.html
線上Demo
轉載請註明出處
SourceCodeDownload
留言
建議使用gist分享
謝謝
w3school 和 w3c 是不一樣的
而且大家普遍不推薦 w3school : https://meta.stackoverflow.com/questions/280478/why-not-w3schools-com