html5 manifest离线存储实用记录

最新推荐文章于 2023-02-03 22:33:39 发布

原创最新推荐文章于 2023-02-03 22:33:39 发布 · 328 阅读

0 ·

CC 4.0 BY-SA版权

html 专栏收录该内容

2 篇文章

订阅专栏

本文介绍了如何通过配置服务器及创建manifest文件实现网页资源的离线缓存，并提供了监控缓存状态以确保最新资源被使用的JavaScript代码。同时，还探讨了离线存储的限制和注意事项。

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

notes:

1.使用manifest 需要配置服务器，在nginx中配置是在conf/mime.types中添加

text/cache-manifest                   appcache;

然后重启nginx。

2.实际运用中，新建name.appcache文件，结构为如下：

CACHE MANIFEST
#v1.0.0.0
#需要缓存的文件
./public/images/u1.png
./public/css/light7.css
./public/font/iconfont.css
./public/js/jquery-2.1.4.js
./public/js/config.js
./public/js/light7.js
./public/js/jquery.cookie.js
./public/js/template-web.js
./public/js/echarts.min.js
./public/js/jquery-ajax-cache.min.js
./public/js/jquery.i18n.properties.js
./public/js/language.js
./public/font/iconfont.css

#不需要缓存的页面
NETWORK:
*

#无法访问页面
FALLBACK
404.html

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

# 为注释，使用离线存储的时候，修改appcache文件中的文件，游览器会自动在缓存中读取文件，必须修改appcache中的内容才会重新缓存该文件中的所有资源，包括修改注释，所以可以修改注释中的版本号来更新manifest，其中如果某个资源请求失败，所有资源都会缓存失败，继续应用上一次的manifest（且因为manifest的加载对于游览器来说是晚于其他资源的，这就导致check manifest的过程是滞后的，从发现manifest改变，游览器都是先应用上一次的manifest，等手动刷新之后才会应用更新后的manifest，解决办法随后附出。）。

Html文件中的结构：

<html manifest="./6.cash.appcache">

由于运用manifest会默认缓存当前页，(网上查资料用iframe加载新的带有manifest入口的Html文件，实际测试发现还是会默认缓存当前页。)所以，最好的方式是只缓存静态资源，不缓存可以从后台更新的资源及html文件。

3.监控applicationCache的状态，当更新之后，自动刷新一次！

        var appCache = window.applicationCache;
        appCache.addEventListener('updateready', function(){
          window.location.reload();
        }, false);

4.404页面无法导入，暂时未解决！

5.注意：