关于离线缓存Application Cache /使用 manifest文件缓存

ApplicationCache的配置文件首先需要在服务器上建立一个文件,里面的内容确定了哪些文件需要缓存,哪些文件不需要,如果资源无法访问会使用什么页面等这个文件一般为.appcache类型,称为缓存清单(cachemanifest)文件,一个完整的缓存清单文件如下:CACHEMANIFEST#versionxx.xx.xxCACHE:needBeCached.pn…

大家好,又见面了,我是你们的朋友全栈君。

Application Cache的配置文件

首先需要在服务器上建立一个文件,里面的内容确定了哪些文件需要缓存,哪些文件不需要,如果资源无法访问会使用什么页面等

这个文件一般为.appcache类型,称为缓存清单(cache manifest)文件,一个完整的缓存清单文件如下:

CACHE MANIFEST
# version xx.xx.xx
CACHE:
needBeCached.png
needBeCached2.js

NETWORK:
notNeedBeCached.html
notNeedBeCached2.css

FALLBACK:
/ 404.html

可以看到,文件的头部信息CACHE MANIFEST用来标注这个文件是缓存清单文件,其后一般情况下(最好是)跟着一行标明版本的注释,这行注释非常重要,将在后面文件加载部分详细介绍这行注释的重要性

CACHE部分

除了头部信息,这个缓存清单文件分为几部分,第一部分为CACHE部分:

CACHE:
needBeCached.png
needBeCached2.js

这一部分标注了哪些资源文件需要被缓存可以列出多个

如果有路径,如需要缓存blog下的blog.css文件,可以写成blog/blog.css

另外CACHE:可以被省略,让需要缓存的资源文件直接跟在注释之后

NETWORK部分

第二部分为NETWORK部分:

NETWORK:
notNeedBeCached.html
notNeedBeCached2.css

这一部分定义了哪些文件不需要缓存,这些文件需要与服务器连接

与CACHE一样,可以定义多个资源,而如果直接输入一个文件夹路径,也是合法的,比如/blog这样,blog文件夹下的所有文件都不会被缓存

可以使用通配符来,如除了上面CACHE中定义的资源,其他都必须与服务器连接:

NETWORK:
*

需要注意一点是,载有这个manifest文件的HTML文档将一定会缓存,这个会在后面再次提到

FALLBACK部分

第三部分为FALLBACK部分:

FALLBACK:
/ 404.html

这一部分指定了一个后备页面,当资源无法访问时,浏览器会使用该页面

同样可以定义多条记录,每条记录列出两个URI,一个表示资源,一个表示后备页面。需要注意的是两个资源文件都需要使用相对路径切与manifest文件同源

同样可以使用通配符

保存和引用manifest文件

manifest文件可以保存在服务器上,保存为.appcache后缀,但必须与应用本身同源。在HTML文档中,可以指定清单文件的相对路径和绝对URL。需要注意的是,manifest文件的MIME类型必须是text/cache-manifest

需要在HTML文档中引入manifest文件,可以使用类似如下代码:

<!doctype html>
<html manifest="manifest.appcache">
...
</html>

这样,HTML文档加载后,就会根据manifest.appcache的内容来缓存资源文件,在下次访问相同页面的时候,会直接使用缓存的资源文件来进行加速

缓存和加载机制

在第一次访问时,浏览器加载完HTML文档后,会查看其是否有引入manifest文件。若引入,则加载manifest文件,然后根据manifest的文件内容进行资源的缓存,并缓存当前文档

之后访问,浏览器首先会查看manifest文件是否被修改(无论是内容还是注释),如果被修改,将当做第一次访问,重新根据manifest文件内容进行缓存

如果应用缓存存在,且manifest没有被修改,浏览器直接从缓存中加载文档(注意:加载文档)和资源,不会访问网络(注意:无论联网与否,都不会访问网络)

在缓存多个资源文件时,浏览器下载资源文件会先放在一个临时的缓存中,如果有任何一个资源文件下载失败,浏览器将停止其他缓存资源的下载,并清除临时缓存。如果所有资源文件都被成功下载,浏览器将会把这些资源文件以及引用manifest文件的HTML文档移动到永久离线缓存中

满满的都是坑

一些小坑

  1. 需要注意的是manifest文件放在服务器上,MIME类型必须是text/cache-manifest,如果使用 Apache,需要修改.htaccess文件。IE下默认application/octet-stream,需要在服务器指定
  2. 每个需要缓存的页面的html都需要加入manifest属性
  3. 不要将manifest文件本身加入缓存,如果加入,浏览器将不会检测到服务器上manifest的更新,页面版本将万年不变
  4. 不要以为一个资源文件加载失败,其他文件就会被缓存,原因参见缓存和加载机制的最后一段

一些大坑

  1. 在manifest文件中定义的资源全部被成功加载后,这些资源文件连同引用manifest文件的HTML文档一并被移动到永久离线缓存中。所以如果想只缓存js、css、图片等文件,而不希望缓存HTML文档以保持获得最新内容的情况来说,这就是个大坑
  2. 根据Application Cache的加载机制,如果仅仅修改资源文件的内容(没有修改资源文件的路径或名称),浏览器将直接从本地离线缓存中获取资源文件。所以在每次修改资源文件的同时,需要修改manifest文件,以触发资源文件的重新加载和缓存。这其中,最有效的方式是修改manifest文件内部的版本注释(所以说那句注释相当重要)
  3. 如果资源没有被缓存,在而没有设置NETWORK的情况下,将会无法加载(浏览器不会去网络上进行加载),所以需要使用通配符来表明除了CACHE中确定的资源以外,其他资源都需要去网络上加载

使用iframe来避开一号坑?

网上传言避开一号坑的方法是使用iframe来指定需要缓存的资源,而避开HTML文档的缓存。具体做法是在HTML中嵌入一个iframe,iframe中的页面的HTML标签包含manifest属性引用manifest文件,里面定义了需要缓存的文件。这样就会只缓存iframe中的HTML文档,而持续更新主页面:

<!doctype html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>主页面</title>
    <link rel="stylesheet" href="css/style.css">
    <script src="js/javascript.js"></script>
</head>
<body>
    <iframe src="cache.html"></iframe>
</body>
</html>

可以看到,主页面的html标签中,并没有引入manifest文件。只是在其中加载了一个iframe,而这个iframe所加载的页面文档如下:

<!DOCTYPE html>
<html manifest="manifest.appcache">
<head>
    <meta charset=utf-8 />
    <title>缓存页面</title>
</head>
<body>
</body>
</html>

缓存页面中引入了manifest文件,这样浏览器就会缓存manifest文件中定义的资源列表,比如这里manifest文件的内容如下:

CACHE MANIFEST
# VERSION 1.0

CACHE:
css/someStyle.css
js/someJavaScript.js

NETWORK:
*

在chrome中运行,可以在命令行中看到如下效果:

Creating Application Cache with manifest http://localhost:8000/manifest.appcache
Application Cache Checking event
Application Cache Downloading event
Application Cache Progress event (0 of 2) http://localhost:8000/css/someStyle.css
Application Cache Progress event (1 of 2) http://localhost:8000/js/someJavaScript.js
Application Cache Progress event (2 of 2)
Application Cache Cached event 

浏览器缓存了manifest文件中定义的资源文件,其实同时还缓存了iframe中的缓存页面的文档,但不会缓存主页面,修改一下主页面,并按F5刷新

Document was loaded from Application Cache with manifest http://localhost:8000/manifest.appcache
Application Cache Checking event
Application Cache NoUpdate event 

可以看到主页面被更新了,但是someStyle.css和someJavaScript.js文件依旧从网络上加载了,而没有从cache中加载。打开chrome的chrome://appcache-internals/可以看到,里面cache.html、someStyle.css、someJavaScript.js确实被缓存了,去掉NETWORK段,结果也是一样

Flags       URL                                         Size (headers and data)
Master,     http://localhost:8000/cache.html            388 B
Explicit,   http://localhost:8000/css/someStyle.css     228 B
Explicit,   http://localhost:8000/js/someJavaScript.js  244 B
Manifest,   http://localhost:8000/manifest.appcache     316 B

在firefox、opera上测试也是一样,虽然被缓存了,但依旧会从网络上加载,而iframe的解答方法也是2011~2012年左右提出的,后来就没有相关文章了,估计已经彻底失效了

 

Application主要是为了构建离线缓存,使得页面在离线模式下也能浏览。这比较适合一些页面上的应用以及静态的不经常变更的页面。其会缓存载体页面也是由于其机制。如果上面iframe机制实现有错误,或是有其他方法只缓存资源不缓存HTML文档,也请联系我

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/128204.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • Kettle工具简单使用(spoon)[通俗易懂]

    Kettle工具简单使用(spoon)[通俗易懂]1、添加测试数据在navicat中随便找个表当做被转化的数据进行测试,以下表为例:在SQLserver数据库中创建表2、下载spoon软件下载路径:https://download.csdn.net/download/qq_57404736/85013576打开文件夹,双击spoon.bat打开软件3、配置输入和输出文件双击左边输入,然后找到表输入,拖到右侧工作区双击工作区的表输入,进行配置点击确定,配置完毕点击获取

    2022年10月16日
  • Django(17)orm查询操作「建议收藏」

    Django(17)orm查询操作「建议收藏」前言查找是数据库操作中一个非常重要的技术。查询一般就是使用filter、exclude以及get三个方法来实现。我们可以在调用这些方法的时候传递不同的参数来实现查询需求。在ORM层面,这些查询条件都

  • Vim简明教程【CoolShell】

    Vim简明教程【CoolShell】

  • php二次开发知识,Discuz二次开发基本知识详细讲解

    php二次开发知识,Discuz二次开发基本知识详细讲解Discuz是国内最流行的论坛软件管理系统,今天小编跟大家分享一篇关于Discuz二次开发基本知识详细讲解,感兴趣的朋友跟小编一起来了解一下吧!一)Discuz!的文件系统目录注:想搞DZ开发,就得弄懂DZ中每个文件的功能。a)Admin:后台管理功能模块b)Api:DZ系统与其它系统之间接口程序c)Archiver:DZ中,用以搜索引擎优化的无图版d)Attachments:DZ中,…

  • 网课作业禁止粘贴?禁用JavaScript了解一下!

    网课作业禁止粘贴?禁用JavaScript了解一下!一转眼,放假快半年了早上起来睁开眼,诶呀,考试周又到了。各个科目的期中作业都在各自的平台陆续发布了。各种乱七八糟的科目,让人烦不胜烦。首先在这里郑重声明:本人黑眼圈纯粹是熬夜学习,与多人运动无关,请放心交友。以iwrite英语教学平台为例,先来补一补之前落下的英语作文。刚点到输入框,就弹出来了禁止粘贴的消息框,emmm,这都大学了,师生之间连这点基本的信任都没有吗?不过,作为一名准程序…

  • js中的ajax和jquery中的ajax学习笔记

    js中的ajax和jquery中的ajax学习笔记

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号