zoukankan      html  css  js  c++  java
  • html5离线缓存原理

    只要在头部加一个manifest属性
    <html manifest = "cache.manifest">

    然后cache.manifest文件的书写方式如下:
    CACHE MANIFEST
    #v0.11

    CACHE:

    js/app.js
    css/style.css

    NETWORK:
    resourse/logo.png

    FALLBACK:
    / /offline.html
    离线存储的manifest一般由三个部分组成:
    1.CACHE:表示需要离线存储的资源列表,由于包含manifest文件的页面将被自动离线存储,所以不需要把页面自身也列出来。
    2.NETWORK:表示在它下面列出来的资源只有在在线的情况下才能访问,他们不会被离线存储,所以在离线情况下无法使用这些资源。不过,如果在CACHE和NETWORK中有一个相同的资源,那么这个资源还是会被离线存储,也就是说CACHE的优先级更高。
    3.FALLBACK:表示如果访问第一个资源失败,那么就使用第二个资源来替换他,比如上面这个文件表示的就是如果访问根目录下任何一个资源失败了,那么就去访问offline.html。

    原理和环境:
    如上面提到的HTML5的离线存储是基于一个新建的.appcache文件的,通过这个文件上的解析清单离线存储资源,这些资源就会像cookie一样被存储了下来。之后当网络在处于离线状态下时,浏览器会通过被离线存储的数据进行页面展示。
    就像cookie一样,html5的离线存储也需要服务器环境


    解析清单:

    manifest 文件是简单的文本文件,它告知浏览器被缓存的内容(以及不缓存的内容)。

    manifest 文件可分为三个部分:
    CACHE MANIFEST - 在此标题下列出的文件将在首次下载后进行缓存
    NETWORK - 在此标题下列出的文件需要与服务器的连接,且不会被缓存
    FALLBACK - 在此标题下列出的文件规定当页面无法访问时的回退页面(比如 404 页面)
    在线的情况下,用户代理每次访问页面,都会去读一次manifest.如果发现其改变, 则重新加载全部清单中的资源。


    CACHE MANIFEST:

    CACHE MANIFEST / theme.css /logo.gif / main.js

    NETWORK:

    白名单,使用通配符”*”. 则会进入白名单的open状态. 这种状态下.所有不在相关Cache区域出现的url都默认使用HTTP相关缓存头策略.
    下面的 NETWORK 小节规定文件 “login.asp” 永远不会被缓存,且离线时是不可用的:NETWORK: login.asp
    可以使用*来指示所有其他资源/文件都需要因特网连接:NETWORK: *

    FALLBACK:

    ALLBACK:/html5/ /404.html 第一个 URI 是资源,第二个是替补。


    更新缓存:

    一旦应用被缓存,它就会保持缓存直到发生下列情况:

    用户清空浏览器缓存
    manifest 文件被修改
    由程序来更新应用缓存

  • 相关阅读:
    移动应用跨平台之旅
    ReactNative之坑爹的在线安装
    关于拆箱装箱引发的类型转换报错
    Unity HDR (高动态范围 )
    Instruments如何看Mono内存分配
    Unity编辑器崩溃大全
    Unity3D获取手机存储空间
    关于构建AssetBundle哈希冲突的问题
    关于UnityWebRequest的超时讨论
    Wwise音频插件介绍
  • 原文地址:https://www.cnblogs.com/jm306/p/6557653.html
Copyright © 2011-2022 走看看