有趣的離線存盤
一.簡單聊聊
最近由于一直在準備實習，復習概念之余，我偶然發現了一個很有趣的技術點，特意跟大家來做個分享，隨著Web App的發展，現在很多移動端App都使用HTML5的方式來開發，問題也就隨之而來，除了一些HybridApp以外，其他的Web App都是通過瀏覽器來訪問的，通過瀏覽器訪問的話，就要通過互聯網發送請求，這樣就會導致用戶無法在離線狀態下使用APP，同時App中也不是所有的資料都要時時改變，也不需要每次都給服務器發送請求，所以這個名叫離線快取的新屬性就誕生了，我們通過離線存盤，把需要離線存盤在本地的檔案，列在一個manifest組態檔中，就可以解決上述問題，這樣即使在離線的情況下，用戶也可以正常使用App，
二.離線存盤的食用方法
接下來我要將manifest(離線快取)分為屬性和離線快取檔案內容，這兩個方面跟大家簡要的來聊聊，
2.1 mainfest屬性
<!DOCTYPE HTML>
<html manifest = "cache.manifest">
...
</html>
2.2 chache.manifest的檔案內容
CACHE MANIFEST
#v0.11
CACHE://表示需要離線存盤的資源串列，由于包含manifest檔案的頁面將被自動離線存盤，所以不需要把頁面自身也列出來，
js/app.js
css/style.css
NETWORK://表示在它下面列出來的資源只有在在線的情況下才能訪問
resourse/logo.png
FALLBACK:
/ /offline.html//表示如果訪問第一個資源失敗，那么就使用第二個資源來替換他，比如上面這個檔案表示的就是如果訪問根目錄下任何一個資源失敗了，那么就去訪問offline.html，
三.瀏覽器如何決議mainfest
說到這你的心中可能會有著這樣的一個疑問：“說了這么多，那瀏覽器是怎么對離線的資源進行管理和加載的呢？”別著急，這件事具體得分為兩種情況進行討論,我現在就來給你慢慢道來，
3.1在線情況下
瀏覽器發現html頭部有manifest屬性，它會請求manifest檔案，如果是第一次訪問app，那么瀏覽器就會根據manifest檔案的內容下載相應的資源并且進行離線存盤，
如果已經訪問過app并且資源已經離線存盤了，那么瀏覽器就會使用離線的資源加載頁面，然后瀏覽器會對比新的manifest檔案與舊的manifest檔案，如果檔案沒有發生改變，就不做任何操作，如果檔案改變了，那么就會重新下載檔案中的資源并進行離線存盤，
3.2在離線情況下
瀏覽器則會直接使用離線存盤的資源，
注意事項：
站點離線存盤的容量限制是5M
如果服務器對離線的資源進行了更新，那么必須更新manifest檔案之后這些資源才能被瀏覽器重新下載，如果只是更新了資源而沒有更新manifest檔案的話，瀏覽器并不會重新下載資源，也就是說還是使用原來離線存盤的資源，
對于manifest檔案進行快取的時候需要十分小心，因為可能出現一種情況就是你對manifest檔案進行了更新，但是http的快取規則告訴瀏覽器本地快取的manifest檔案還沒過期，這個情況下瀏覽器還是使用原來的manifest檔案，所以對于manifest檔案最好不要設定快取，
如果manifest檔案,或者內部列舉的某一個檔案不能正常下載,整個更新程序將視為失敗,瀏覽器繼續全部使用老的快取
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/263763.html
標籤：其他
下一篇：幾個實用的 Bat 腳本命令