Html5 离线存储

发表于   |   分类于   |     |   阅读次数

在用户没有与因特网连接时，可以正常访问站点或应用，在用户与因特网连接时，更新用户机器上的缓存文件
为了让web应用程序在离线状态下也能正常工作，就必须把构成web应用程序的资源文件，如HTML、CSS、JS脚本文件等放在本地缓存中，当服务器没有和Interne连接时，也可以利用本地缓存中的资源文件来正常运行web程序。

  • 本地缓存&浏览器网页缓存
    本地缓存为整个web应用服务，浏览器的网页缓存只服务于单个网页
    本地缓存是可靠的，我们可以控制对哪些内容进行缓存，控制缓存的更新。
    用户可离线访问应用，这对于无法随时保持联网状态的移动终端用户来说尤其重要
    用户访问本地的缓存文件，通常意味着更快的访问速度
    仅仅加载被修改过的资源，避免同一资源对服务器多次的请求，大大降低了对服务器的访问压力

  • manifest文件
    <!DOCTYPE HTML> <html manifest = "cache.manifest"> ... </html>
    web应用程序是通过每个页面的manifest文件来管理的，manifest文件是一个简单文本文件，在该文件中以清单的方式列举了需要被缓存或不需要被缓存的资源文件名称，以及这些资源文件的访问路径(在manifest中使用的相对路径，相对参照物为manifest文件)。可以为每一个文件单独指定一个manifest文件，也可以对整个web应用程序指定一个总的manifest文件。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    CACHE MANIFEST
     #v0.11

     CACHE:
     other.html
     js/app.js
     css/style.css

     NETWORK:
     http://YIDan/
     resourse/logo.png
     *

     FALLBACK:
     / /offline.html

    CACHE:表示需要离线存储的资源列表，由于包含manifest文件的页面将被自动离线存储，所以不需要把页面自身也列出来
    2、#号开头的是注释，一般会在第二行写个版本号，用来在缓存的文件更新时，更改manifest的作用，可以是版本号，时间戳或者md5码等等。
    3 NETWORK:表示在它下面列出来的资源只有在在线的情况下才能访问，他们不会被离线存储，所以在离线情况下无法使用这些资源。不过，如果在CACHE和NETWORK中有一个相同的资源，那么这个资源还是会被离线存储，也就是说CACHE的优先级更高。”*”表示没有在manifest文件中指定的资源文件都不进行本地缓存

    1. FALLBACK:表示如果访问第一个资源失败，那么就使用第二个资源来替换他，比如上面这个文件表示的就是如果访问根目录下任何一个资源失败了，那么就去访问offline.html
      每个类别都是可选的，当文件开头没有指定类别而直接书写资源文件时，浏览器把这些资源文件视为CACHE类别，直至看见文件中第一个书写出来的类别为止。
      真正运行离线web应用程序时，需要对服务器进行配置，让服务器支持text/text/cache-manifest这个MIME类型

  • 浏览器怎么解析manifest

    1. 在线的情况下，浏览器发现html头部有manifest属性，它会请求manifest文件，如果是第一次访问app，那么浏览器就会根据manifest文件的内容下载相应的资源并且进行离线存储。如果已经访问过app并且资源已经离线存储了，那么浏览器就会使用离线的资源加载页面，然后浏览器会对比新的manifest文件与旧的manifest文件，如果文件没有发生改变，就不做任何操作，如果文件改变了，那么就会重新下载文件中的资源并进行离线存储。
    2. 离线的情况下，浏览器就直接使用离线存储的资源。

有几个问题需要注意：

  1. 如果服务器对离线的资源进行了更新，那么必须更新manifest文件之后这些资源才能被浏览器重新下载，如果只是更新了资源而没有更新manifest文件的话，浏览器并不会重新下载资源，也就是说还是使用原来离线存储的资源。可以通过修改版本号的方式来让浏览器认为manifest文件已经被更新过了。
  2. 对于manifest文件进行缓存的时候需要十分小心，因为可能出现一种情况就是你对manifest文件进行了更新，但是http的缓存规则告诉浏览器本地缓存的manifest文件还没过期，这个情况下浏览器还是使用原来的manifest文件，所以对于manifest文件最好不要设置缓存
  3. 浏览器在下载manifest文件中的资源的时候，它会一次性下载所有资源，如果某个资源由于某种原因下载失败，那么这次的所有更新就算是失败的，浏览器还是会使用原来的资源
  4. 在更新了资源之后，新的资源需要到下次再打开app才会生效，如果需要资源马上就能生效，那么可以使用window.applicationCache.swapCache()方法来使之生效，出现这种现象的原因是浏览器会先使用离线资源加载页面，然后再去检查manifest是否有更新，所以需要到下次打开页面才能生效。
  5. 引用manifest的html必须与manifest文件同源，在同一个域下.FALLBACK中的资源必须和manifest文件同源.当一个资源被缓存后，该浏览器直接请求这个绝对路径也会访问缓存中的资源。站点中的其他页面即使没有设置manifest属性，请求的资源如果在缓存中也从缓存中访问
  6. 站点离线存储的容量限制是5M
  • applicationCache对象
    applicationCache对象代表了本地缓存，可以用它来通知用户本地缓存中已经被更新，也允许用户手工更新本地缓存。
    当浏览器对本地缓存进行更新，装入新的资源文件时，会触发applicationCache对象的updateready事件，通知本地缓存已被更新。
    swapCache用来手工执行本地缓存的更新，swapCache方法的意思是重新应用跟新后的缓存来替换原来的缓存,只能在applicationCache对象的updateready事件被触发时调用。即“本地缓存准备被更新”
    1
    2
    3
    4
    window.applicationCache.addEventListener('updateready', function(){
                console.log('updateready!');
                window.applicationCache.swapCache();
            });

window.applicationCache有几个事件：

  1. oncached:当离线资源存储完成之后触发这个事件
  2. onchecking:当浏览器对离线存储资源进行更新检查的时候会触发这个事件
  3. ondownloading:当浏览器开始下载离线资源的时候会触发这个事件
  4. onprogress:当浏览器在下载每一个资源的时候会触发这个事件，每下载一个资源就会触发一次
  5. onupdateready:当浏览器对离线资源更新完成之后会触发这个事件
  6. onnoupdate:当浏览器检查更新之后发现没有资源更新的时候触发这个事件