前端应用程序缓存 cache manifest_前端 appcache-manifest 依赖-优快云博客

本文链接：https://blog.youkuaiyun.com/javaStudentZhang/article/details/80644885

本文介绍了HTML5新增的离线存储技术，包括如何通过清单文件缓存网站资源，实现离线访问。文章详细解释了清单文件的创建及配置方法，并提供了事件监听代码示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

HTML5新增，他将程序所需的html、css、js、图片等保存到浏览器中。

他不会随着浏览器清缓存而被清除，老数据会被最近一次的访问的新数据代替掉。

首次下载并缓存，之后的任何加载请求都来自缓存。

一、首先创建一个清单：包含程序依赖的所有URL

二、在程序的主页面<html>设置manifest属性，指向清单文件

<html manifest="myapp.appcache">

三、清单文件首行必须以“CACHE MANIFEST"开头。其余每行一个URL,相对路径的URL都相对于清单文件的URL。

#是注释，允许前面有空格，后面不能有非空字符。

CACHE MANIFEST
#Myapp varsion 1(注意：浏览器只会异步检查清单文件，并不能检查文件是否有更改，所以每次更改代码，需修改这个数字重新下载文件)
CHCHE:
#此区域列出需要缓存的所有文件
index.html
index.js
index.css
logo.png

FALLBACK:
#可以包含两个URL,第一个是前缀，任何能够匹配到改前缀的URL都不会被缓存，第二个是需要缓存的资源。如果网络载入第一个URL失败，就会用第二个URL制定的缓存资源代替
videos/offline.html

NETWORK:
#标识该区域从不缓存
cgi/

浏览器缓存过程中会触发一系列事件，该事件处理程序注册在ApplicationCache对象上，此对象是window的applicationCache属性的值。

//载入的时候，检查该清单文件。
window.applicationCache.onchecking = function(){
    $("san").innerHTML = "checking for a new version";
    return false;
}
//如果清单文件没有动，同时应用程序也已经缓存了，该事件执行。
window.applicationCache.onnoupdate = function(){
    $("san").innerHTML = "This version is up-to-date";
    return false;
}
//如果还未缓存应用程序，或者清单有改动
window.applicationCache.ondownloading = function(){
    $("san").innerHTML = "Downloading new version";
    window.progresscount = 0; //在下面的事件中用到
    return false;
}
//下载过程不断调用progress事件，通常在每个文件下载完的时候。
window.applicationCache.onprogress = function(e){
    var progress = ""; 
    if(e && e.lengthComputable){
        progress = "" + Math.round(100*e.loaded / e.total) + "%"; //计算下载完成比例
    }
    else{
        progress = "(" + ++progresscount + ")";  //输出调用次数。
    }
    $("san").innerHTML = "Downloading new version" + progress;
    return false;
}
//当下载完成并且首次将应用程序下载到缓存中时
window.applicationCache.oncached = function(){
    $("san").innerHTML = "This application is now cached locally" ;
    return false;
}
//下载完成并且首次将应用程序下载到缓存中。
window.applicationCache.oncached = function() {
    status("This application is now cached locally");
    return false;
};
//下载完成并缓存的程序更新后触发，注意触发此事件时，用户任然看到老版本，只有当用户再次载入时才会访问最新版。
window.applicationCache.onupdateready = function() {
    status("A new version has been downloaded.  Reload to run it");
    return false;
};
//处于离线时，检擦清单失败触发。

window.applicationCache.onerror = function() {
    status("Couldn't load manifest or cache application");
    return false;
};

//程序引用一个不存在的清单文件触发，同时将应用从缓存中删除。
window.applicationCache.onobsolete = function() {
    status("This application is no longer cached. " + 
           "Reload to get the latest version from the network.");
    return false;
};