使用 HTML5，通过创建 cache manifest 文件，可以轻松地创建 web 应用的离线版本

最新推荐文章于 2021-06-22 09:27:19 发布

qq_34471319

最新推荐文章于 2021-06-22 09:27:19 发布

阅读量329

点赞数

分类专栏：前端文章标签： html5 缓存

本文链接：https://blog.csdn.net/qq_34471319/article/details/52777810

版权

前端专栏收录该内容

1 篇文章 0 订阅

订阅专栏

dom结构

<!DOCTYPE HTML>
<html manifest="demo.appcache">

<body>
The content of the document......
</body>

</html>

manifest 文件格式

manifest 文件可分为三个部分：

CACHE MANIFEST - 在此标题下列出的文件将在首次下载后进行缓存
NETWORK - 在此标题下列出的文件需要与服务器的连接，且不会被缓存
FALLBACK - 在此标题下列出的文件规定当页面无法访问时的回退页面（比如 404 页面）

完整的 Manifest 文件

CACHE MANIFEST
# 2012-02-21 v1.0.0
/theme.css
/logo.gif
/main.js

NETWORK:
login.asp

FALLBACK:
/html5/ /404.html

js检测manifest是否改动

window.applicationCache.addEventListener('updateready', function(e) {
    if (window.applicationCache.status == window.applicationCache.UPDATEREADY) {
     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);

qq_34471319

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
使用 HTML5，通过创建 cache manifest 文件，可以轻松地创建 web 应用的离线版本

dom结构manifest="demo.appcache">The content of the document......manifest 文件格式manifest 文件可分为三个部分：CACHE MANIFEST - 在此标题下列出的文件将在首次下载后进行缓存NETWORK - 在此标题下列出的文件需要与服务器的连接，且不会被缓存FALL
复制链接

扫一扫