zoukankan      html  css  js  c++  java
  • h5的离线缓存机制

    什么是Manifest:

    其实Manifest是一个简单的 文本文件,它的扩展名是任意的,定义需要缓存的文件、资源,当第一次打开时,浏览器会自动缓存相应的资源。

    Manifest 的特点:

    • 离线浏览:即当网络断开时,可以继续访问你的页面。
    • 访问速度快:将文件缓存到本地,不需每次都从网络上请求。
    • 稳定性:做了Manifest缓存,遇到突发网络故障或者服务器故障,继续访问本地缓存。

    Manifest的使用:

    html新增了一个manifest属性,可以用来指定当前页面的manifest文件。

    创建一个和html同名的manifest文件,比如页面为index.html,那么可以建一个index.manifest的文件,然后给index.html的html标签添加如下属性即可:

    <html lang="en" manifest="index.manifest"> 或<html manifest="http://www.example.com/index.manifest">

    1、manifest 的引入可以使绝对路径也可以是相对路径,如果你使用的是绝对路径,你的manifest文件必须和你的站点挂在同一个域名下。

    2、manifest文件你可以保存为任意的扩展名,但mine-type 必须是 text/cache-manifest。

    <html lang="en" manifest="index.manifest">  或  <html lang="en" manifest="index.cache"> 在服务器上部署时需要在服务器上添加相应的mie-type

    3、manifest 标签应该包含到你需要缓存资源的页面,当第一次打开该页面时,浏览器会解析该页面中的mainfest,并缓存里面列举的资源,同时该页面也会自动会被浏览器缓存,即使该页面没有在Manifest中列出。

    Manifest文件结构:

    接下来详细说说manifest的细节,一个典型的manifest文件代码结构像下面这样:

    CACHE MANIFEST(必在第一行,必须写)

    # version 2016-01-01  10:10

    CHCHE:(必须写)

    #缓存文件

    NETWORK:

    #不缓存文件

    FALLBACK:

    #页面无法访问时的回退页

    方法:

    update():检测更新manifest文件

    updateready事件:当有新的缓存,并更新完之后,会触发此事件

    swapCache(): 用来执行本地缓存的更新操作触发updateready事件时调用

    window.applicationCache.update();
            window.applicationCache.addEventListener("updateready", function(e) {
                    window.applicationCache.swapCache();
                    if (confirm("A new version of this site is available. Load it?")) {
                        window.location.reload();
                    }

    }, false);

    progress事件:当有新的缓存,并处于正在下载的过程中时会不断出发此事件

    window.applicationCache.addEventListener("progress",function(){
                alert(window.applicationCache.status);   //0未缓存    1空闲     2检查中     3下载中     4更新就绪      5缓存过期

    });

    checking事件:正在检查

    noupdate事件:检查更新结束,没有需要更新。

    downloading事件:正在下载

    cached事件:空闲,缓存为最新状态

    error事件:报错

  • 相关阅读:
    一个ball例程带你进入 Halcon 世界
    新公民读本
    open_window()到底做了什么?
    duilib学习领悟(4)
    duilib学习领悟(3)
    duilib学习领悟(2)
    通过Vue路由传参的两种方式及Vue组件中接收参数的方式
    彻底研透javascript中的对象及面向对象编程
    thinkphp5中使用phpmailer实现发送邮件功能
    小程序和ThinkPHP5结合实现登录状态(含代码)
  • 原文地址:https://www.cnblogs.com/meng-qy/p/5994319.html
Copyright © 2011-2022 走看看