深入讲解离线缓存及其用法

why:

应用程序缓存为应用带来的优势:

离线浏览:用户可在应用离线时使用它们
速度:已缓存资源加载速度块
减少服务器负载:浏览器只从服务器下载更新过的资源

usages:

  • 在html标签添加manifest属性
 
    <html manifest="../js/demo.manifest">
            ...
    html>
  • 编写manifest文件
manifest文件可分为三部分:
(1) CACHE MANIFEST - 在此标题下列出的文件将在首次下载后进行缓存
(2)NETWORK - 在此标题下列出的文件需要与服务器的连接,且不会被缓存
(3)FALLBACK - 在此标题下列出的文件规定当页面无法访问时的回退页面(比如 404 页面)

CACHE MANIFEST
    #version 1.1   /*版本号*/
    CACHE:
        html/index.html /*需要缓存的文件*/
    NETWORK:
        js/jquery.js /*不需要缓存的文件*/
    FALLBACK: 
        html/index.html /*当页面无法访问时的回退页面*/
  • 注意事项:
1.浏览器对缓存数据的容量限制可能不太一样
2.如果manifest文件,或者内部列举的某一个文件不能正常下载,整个更新过程将视为失败,浏览器会继续加载之前的缓存
3.引用的manifest文件必须和html文件同源,同域
4.浏览器的自动缓存会导致更改了的html文件必须更新版本才能更新页面
5.更新版本后,必须刷新一次才会启动新版本
6.当manifest文件发生改变时,资源请求本身也会触发更新
  • 离线缓存与传统浏览器缓存区别:
区别:
1、离线缓存是针对整个应用,浏览器缓存是单个文件
2、离线缓存断网了还是可以打开页面,浏览器缓存不行
3、离线缓存可以主动通知浏览器更新资源
  • 本地存储和离线存储有什么不同
本地存储与离线缓存都是为了方便网页的加载,提高用户体验等。
本地存储一般存储的都是数据,而离线缓存一般存储的是网页等。
  • 更新离线缓存两种方式
1.修改版本号
2.js
var appCache = window.applicationCache
appCache.update() //开始更新
if(appCache.status == window.applicationCache.UPDATEREADY){
    appCache.swapCache() //得到最新版本缓存列表,并且成功下载资源,更新缓存到最新
}

你可能感兴趣的:(经验,web,前端开发进阶)