h5离线缓存

4 篇文章 0 订阅
3 篇文章 0 订阅

1. 协议缓存

举个例子:
更新了一张图片,发布之后反复重新进页面总是看不到更新

说明是协议缓存?

http协议缓存机制是指通过HTTP协议头里的Cache-Control(或 Expires)和Last-Modified(或Etag)等字段来控制文件缓存的机制。

  • Cache-Control 用于控制文件在本地缓存有效时长。最常见的,比如服务器回包:Cache-Control:max-age=600 表示文件在本地应该缓存,且有效时长是600秒(从发出请求算起)。在接下来600秒内,如果有请求这个资源,浏览器不会发出 HTTP 请求,而是直接使用本地缓存的文件。
  • Last-Modified 是标识文件在服务器上的最新更新时间。下次请求时,如果文件缓存过期,浏览器通过 If-Modified-Since 字段带上这个时间,发送给服务器,由服务器比较时间戳来判断文件是否有修改。如果没有修改,服务器返回304告诉浏览器继续使用缓存;如果有修改,则返回200,同时返回最新的文件。

Cache-Control 还有一个同功能的字段:Expires。Expires 的值一个绝对的时间点,如:Expires: Thu, 10 Nov 2015 08:45:11 GMT,表示在这个时间点之前,缓存都是有效的。

Expires 是 HTTP1.0 标准中的字段,Cache-Control 是 HTTP1.1 标准中新加的字段,功能一样,都是控制缓存的有效时间。当这两个字段同时出现时,Cache-Control 是高优化级的。

Etag 也是和 Last-Modified一样,对文件进行标识的字段。不同的是,Etag的取值是一个对文件进行标识的特征字串。在向服务器查询文件是否有更新时,浏览器通过If-None-Match 字段把特征字串发送给服务器,由服务器和文件最新特征字串进行匹配,来判断文件是否有更新。没有更新回包304,有更新回包200。Etag和Last-Modified可根据需求使用一个或两个同时使用。两个同时使用时,只要满足其中一个条件,就认为文件没有更新

不过有两种情况比较特殊:

  • 手动刷新页面(F5):
    浏览器会直接认为缓存已经过期(可能缓存还没有过期),在请求中加上字段:Cache-Control:max-age=0,发包向服务器查询是否有文件是否有更新。
  • 强制刷新页面(Ctrl+F5):
    浏览器会直接忽略本地的缓存(有缓存也会认为本地没有缓存),在请求中加上字段:Cache-Control:no-cache(或Pragma:no-cache),发包向服务重新拉取文件。
2. 应用缓存(离线缓存)

除了http协议缓存,HTML5 提供一种应用程序缓存机制,使得基于web的应用程序可以离线运行。为了能够让用户在离线状态下继续访问 Web 应用,开发者需要提供一个 cache manifest 文件。这个文件中列出了所有需要在离线状态下使用的资源,浏览器会把这些资源缓存到本地。
虽然manifest的技术已被web标准废弃, 但这不影响我们尝试去了解它. 也正是因为manifest的应用缓存机制如此诱人, 饿了么 和 office 365邮箱等都还在使用着它!

使用方法:

<!-- index.html -->
<!DOCTYPE HTML>
<html manifest="test.manifest">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="/appactivity/testmain/css/index.css">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    我是哈哈哈哈哈
</body>
</html>

注意事项:

  • 如何开启缓存:
<html manifest="test.manifest">
  ...
</html>

在html标签中指定manifest文件, 便表示该网页使用manifest进行离线缓存. 该网页内需要缓存的文件列表需要在 test.manifest 文本文件中指定.

  • manifest缓存清单

就像写作文一样, manifest采用经典的三段式. 分别为: CACHE, NETWORK 和 FALLBACK. 如下, 先看一个栗子?:

#test.manifest文件
CACHE MANIFEST
# Time: Sat Jun 04 2016 17:11:50 GMT+0800 (CST)
# webpack-multipage v1.0.0==== ========

CACHE:
css/index.css

NETWORK:
js/app.js

FALLBACK:
/other 404.html

第一行必须以 CACHE MANIFEST 开头, 后可跟若干字符注释, 注释从#号开始. 跟在 CACHE MANIFEST 行后的文件。

第一段内容以 CACHE: 开头

每行列出一个, 这些文件是需要缓存的文件. 因此 index.css 会被缓存, 不需要访问网络.

第二段内容以 NETWORK: 开始

跟在该行后的文件表示需要访问网络. 如: app.js 将直接从网络上下载, 并不走manifest cache, 如果除了第一段中缓存的文件以外, 其他文件都从网络上获取, 那么此时可将 app.js 改为 * (通配符).

第三段内容以 FALLBACK: 开始

跟在该行后的文件表示会有一个替代方案. 如: 当访问 /other 路径时, 如果访问失败, 那么将自动加载 404.html 作为替代.

  • manifest缓存状态

每个manifest缓存都有一个状态, 标示着缓存的情况. 一份缓存清单只有一个缓存状态, 即使它被多个页面引用. 以下是各个缓存状态:

  1. UNCACHED(未缓存): 表明应用缓存对象还没有初始化完成.
  2. IDLE(空闲): 应用缓存并未处于更新状态.
  3. CHECKING(检查): 正在检查是否存在更新.
  4. DOWNLOADING(下载): 清单更新后, 重新下载全部资源到临时缓存中.
  5. UPDATEREADY(更新就绪): 新版本的缓存下载完成, 全部就绪, 随即触发事件 updateready.
  6. OBSOLETE(废弃): 应用缓存已被废弃.
  • applicationCache
//webview下
var cache = window.applicationCache;
//shared worker中
var cache = self.applicationCache;

以下是属性和方法:

  1. status: 返回当前页面的应用缓存的状态, 通常开启应用缓存的页面可能返回1, 其他页面则返回0.

  2. update(): 手动触发应用缓存的更新.

注意:

(1) 若有更新, 则依次触发①检查事件(Checking event), ②下载事件(Downloading event), ③下载进度事件(Progress event), ④更新完成事件(UpdateReady event);

(2) 若无更新, 则依次触发①检查事件(Checking event), ②无更新事件(NoUpdate event);

(3) 在未开启应用缓存的页面调用将抛出Uncaught DOMException 错误.

update() 方法通常在长时间不关闭的页面使用, 比如说邮箱应用, 用于定期检测可能的更新.

  1. abort(): 取消应用缓存的更新. 可用于节省有限的网络带宽.
  2. swapCache(): 如果存在一个更新版本的应用缓存, 那么它将切换过去, 否则将抛出 Uncaught DOMException 错误. 通常, 我们会在updateready事件触发之后手动调用swapCache()方法, swapCache的切换只对后续加载的缓存文件有效, 已经加载成功的资源并不会重新加载.

那么如何利用好上述api更新一个页面的应用缓存呢? 别急, Beginner’s Guide to Using the Application Cache 一文中提供了如下的样板方法:

// Check if a new cache is available on page load.
window.addEventListener('load', function(e) {
  window.applicationCache.addEventListener('updateready', function(e) {
    if (window.applicationCache.status == window.applicationCache.UPDATEREADY) {
      // Browser downloaded a new app cache.
      // Swap it in and reload the page to get the new hotness.
      window.applicationCache.swapCache();
      if (confirm('A new version of this site is available. Load it?')) {
        window.location.reload();
      }
    } else {
      // Manifest didn't changed. Nothing new to server.
    }
  }, false);
}, false);
  • 服务器配置方法

    nginx:

    1. 找到Ngnix服务器配置文件mime.types
    2. 编辑mime.types
    3. 添加manifest文件映射
types {  
      text/html                             html htm shtml;  
      text/css                              css;  
      text/xml                              xml rss;  
      image/gif                             gif;  
      image/jpeg                            jpeg jpg;  
      application/x-javascript              js;  
      application/atom+xml                  atom;  
    
      text/mathml                           mml;  
      text/plain                            txt;  
      text/vnd.sun.j2me.app-descriptor      jad;  
      text/vnd.wap.wml                      wml;  
     text/x-component                      htc;  
   
      image/png                             png;  
     image/tiff                            tif tiff;  
      image/vnd.wap.wbmp                    wbmp;  
      image/x-icon                          ico;  
      image/x-jng                           jng;  
     image/x-ms-bmp                        bmp;  
      image/svg+xml                         svg;  
    
      application/java-archive              jar war ear;  
      application/mac-binhex40              hqx;  
      application/msword                    doc;  
     application/pdf                       pdf;  
      application/postscript                ps eps ai;  
      application/rtf                       rtf;  
      application/vnd.ms-excel              xls;  
      application/vnd.ms-powerpoint         ppt;  
     application/vnd.wap.wmlc              wmlc;  
      application/vnd.wap.xhtml+xml         xhtml;  
      application/x-cocoa                   cco;  
      application/x-java-archive-diff       jardiff;  
      application/x-java-jnlp-file          jnlp;  
      application/x-makeself                run;  
      application/x-perl                    pl pm;  
      application/x-pilot                   prc pdb;  
      application/x-rar-compressed          rar;  
      application/x-RedHat-package-manager  rpm;  
      application/x-sea                     sea;  
      application/x-shockwave-flash         swf;  
      application/x-stuffit                 sit;  
      application/x-tcl                     tcl tk;  
      application/x-x509-ca-cert            der pem crt;  
      application/x-xpinstall               xpi;  
      application/zip                       zip;  
    
      application/octet-stream              bin exe dll;  
      application/octet-stream              deb;  
      application/octet-stream              dmg;  
      application/octet-stream              eot;  
      application/octet-stream              iso img;  
      application/octet-stream              msi msp msm;  
    
      audio/midi                            mid midi kar;  
      audio/mpeg                            mp3;  
     audio/x-realaudio                     ra;  
   
      video/3gpp                            3gpp 3gp;  
     video/mpeg                            mpeg mpg;  
      video/quicktime                       mov;  
     video/x-flv                           flv;  
      video/x-mng                           mng;  
      video/x-ms-asf                        asx asf;  
      video/x-ms-wmv                        wmv;  
     video/x-msvideo                       avi;  
      application/x-nokia-widget            wgz;  
    
      text/cache-manifest                   mf manifest;  
  }  

4. 重启nginx

注意: manifest后面一定要加

  • manifest缓存规则
  1. 遵循全量缓存的规律. 即: manifest文件改动后, 将重新缓存一遍所有的文件(包括html本身和动态添加的需要缓存的文件,即使缓存列表中没有该html). 第一次缓存过程中如果出现缓存失败的文件, 那么, 第二访问, 又将重新缓存一遍所有的文件. 以此类推.
  2. manifest文件本身不能写进缓存清单, 否则连同html和资源在其缓存失效之前, 将永远不能获得更新.
  3. 即使manifest文件丢失, 缓存依然有效. 不过从此以后, 引入该manifest的html, 将永远不能获得更新.
  • webview的缓存现象

通常, webview的缓存有如下三种现象:

  1. 普通网页(无manifest文件), 不受manifest缓存影响, 缓存只走 http cache.
  2. 包含manifest文件的网页, 缓存文件只受manifest缓存影响(只有manifest文件改变时才会更新缓存资源), 缓存资源完全与 http cache 无关, 但是 NETWORK 段落后需要访问网络的文件, 将继续走 http cache.
  3. webview直接加载manifest缓存过的文件时, 优先加载第一个manifest缓存的该文件, 如果没有找到manifest缓存, 那么它将自动寻找 http cache 或者 在线加载.
  • 最佳实践
  1. 通常只使用一个manifest文件, 并保证缓存的文件尽可能的少, 以减小manifest每次更新清单中文件所耗费的时间和流量.
  2. 如果一定要使用两个及以上manifest文件, 缓存文件请尽量不要相同.
  3. 如果以上两条都不能保证, 那么, 请保证尽可能在manifest缓存的状态更新时, 主动去刷新网页.(此时并不能保证不同网页之间同一个缓存文件版本一致)
  • 具体落地步骤
  1. 如果缓存的文件需要加参数运行, 建议将参数内容加到hash中, 如:cached-page.html#parameterName=value
  2. manifest 的引入可以使用绝对路径或者相对路径, 如果你使用的是绝对路径, 那么你的manifest文件必须和你的站点处于同一个域名下.
  3. manifest文件你可以保存为任意的扩展名, 但是响应头中以下字段须取以下定值, 以保证manifest文件正确被解析, 并且它没有http缓存
Content-Type: text/cache-manifest
Cache-Control: max-age=0
Expires: [CURRENT TIME]
  • 总结
  1. 离线缓存与传统浏览器缓存区别:

浏览器缓存(Browser Caching)是为了节约网络的资源加速浏览,浏览器在用户磁盘上对最近请求过的文档进行存储,当访问者再次请求这个页面时,浏览器就可以从本地磁盘显示文档,这样就可以加速页面的阅览

区别

  • 离线缓存是针对整个应用,浏览器缓存是单个文件

  • 离线缓存断网了还是可以打开页面,浏览器缓存不行

  • 离线缓存可以主动通知浏览器更新资源

本地存储和离线存储有什么不同

  • 本地存储与离线缓存都是为了方便网页的加载,提高用户体验等。

  • 本地存储一般存储的都是数据,而离线缓存一般存储的是网页等。

  1. 试用场景
  • 单地址的页面
  • 对实时性要求不高的业务
  • 离线的webapp
  1. 优点
  • 完全离线
  • 资源被缓存,加载更快
  • 降低server负载
  1. 缺点
  • 含有manifest属性的当前请求页无论如何都会被缓存;
  • 更新需要建立在manifest文件的更新,文件更新后是需要页面再次刷新的(需要2次刷新才能获取资源);
  • 更新是全局性的,无法单独更次年某个文件,即一个文件被更新,需要拉取全部文件来更新;
  • 对于链接的参数变化是敏感的,任何一个参数的修改都会被(master)重新缓存(重复缓存含参页面)index.html和Index.html?renew=1会被认为是不同文件,分别缓存
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值