离线缓存 manifest 的设置

最新推荐文章于 2021-06-23 07:14:07 发布

原创最新推荐文章于 2021-06-23 07:14:07 发布 · 626 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#h5 #离线缓存 #manifest

HTML 专栏收录该内容

10 篇文章

订阅专栏

本文介绍了如何通过manifest文件实现网页资源的离线缓存，包括设置服务器MIME类型、编写manifest文件及在HTML中引用的方法，使得页面即使在网络断开时也能快速加载。

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

虽然 manifest 已经从web标准中移除，但是还是来看看manifest的实现吧；

这个需要服务器的支持，也就是需要设置MIME,

我在本地的wamp 环境下进行设置的，对应的是第四个，也就是下面最后一个

    AddType application/x-compress .Z
    AddType application/x-gzip .gz .tgz
    AddType application/x-httpd-php .php
    AddType application/x-httpd-php .php3
    AddType text/cache-manifest .manifest

服务器上可以支持之后：

写一个app.manifest文件：参数有很多可以设置，下面简单设置我需要缓存的内容：

一个主页（默认），一个图片，一个juqery.js文件；

--------------------------------------

CACHE MANIFEST
# VERSION 0.1
# 直接缓存的文件
CACHE:
index.html
he.png

jquery.js

-------------------------------------

再看看主页需要添加的内容：在头部<html>添加缓存的文件如下就可以了，

<!DOCTYPE html>
<html lang="en" manifest="app.manifest">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="jquery.js"></script>
</head>
<body>
    需要服务器支持，设置mime:
    <p>manifest 测试文件</p>
    <img src="he.png" alt="">
    <img src="he.png" alt="">
    <img src="he.png" alt="">
    <img src="he.png" alt="">
    <img src="he.png" alt="">
    <img src="he.png" alt="">
    <img src="he.png" alt="">
    <img src="he.png" alt="">

    <script>
          $(function(){
               $("img").css("width","300px");
            }
        );
    </script>
</body>
</html>