跳到主要內容

發表文章

目前顯示的是 11月, 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 離線