stude.appcache
CACHE MANIFEST
CACHE:
#此部分写需要缓存的资源 (#是注释的意思)
./images/img1.jpg
./images/img2.jpg
./images/img3.jpg
./images/img4.jpg
NETWORK:
#此部分要写需要有网络才可访问的资源,无网络刚不访问
./js/main.js
*
FALLBACK:
#当访问不到某个资源的情况下,自动由另一个资源替换
./css/online.css ./css/offline.css
./online.html ./offline.html
index.html
<!DOCTYPE html>
<!--是不是做离线缓存 缓冲清单-->
<html lang="en" manifest="./study.appcache">
<head>
<meta charset="UTF-8">
<title>Application Cache</title>
<link rel="stylesheet" href="./css/main.css">
<link rel="stylesheet" href="./css/online.css">
</head>
<body>
<img src="./images/img1.jpg">
<img src="./images/img2.jpg">
<img src="./images/img3.jpg">
<img src="./images/img4.jpg">
<img src="./images/img5.jpg">
<script src="./js/main.js"></script>
</body>
</html>
online.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Online</title>
</head>
<body>
online
</body>
</html>