HTML 5 应用程序缓存
2019独角兽企业重金招聘Python工程师标准>>>
使用 HTML5,通过创建 cache manifest 文件,可以轻松地创建 web 应用的离线版本。
什么是应用程序缓存(Application Cache)?
HTML5 引入了应用程序缓存,这意味着 web 应用可进行缓存,并可在没有因特网连接时进行访问。
应用程序缓存为应用带来三个优势:
- 离线浏览 - 用户可在应用离线时使用它们
- 速度 - 已缓存资源加载得更快
- 减少服务器负载 - 浏览器将只从服务器下载更新过或更改过的资源。
浏览器支持
所有主流浏览器均支持应用程序缓存,除了 Internet Explorer。
Manifest 文件
manifest 文件是简单的文本文件,它告知浏览器被缓存的内容(以及不缓存的内容)。
manifest 文件可分为三个部分:
- CACHE MANIFEST - 在此标题下列出的文件将在首次下载后进行缓存
- NETWORK - 在此标题下列出的文件需要与服务器的连接,且不会被缓存
- FALLBACK - 在此标题下列出的文件规定当页面无法访问时的回退页面(比如 404 页面)
CACHE MANIFEST
第一行,CACHE MANIFEST,是必需的:
CACHE MANIFEST
/theme.css
/logo.gif
/main.js
上面的 manifest 文件列出了三个资源:一个 CSS 文件,一个 GIF 图像,以及一个 JavaScript 文件。当 manifest 文件加载后,浏览器会从网站的根目录下载这三个文件。然后,无论用户何时与因特网断开连接,这些资源依然是可用的。
# NETWORK 小节规定文件 "login.asp" 永远不会被缓存,且离线时是不可用的NETWORK:
login.asp
#可以使用星号来指示所有其他资源/文件都需要因特网连接:NETWORK:
*
# FALLBACK 小节规定如果无法建立因特网连接,则用 "offline.html" 替代 /html5/ 目录中的所有文件:FALLBACK:
/html5/ /404.html
更新缓存
一旦应用被缓存,它就会保持缓存直到发生下列情况:
- 用户清空浏览器缓存
- manifest 文件被修改(参阅下面的提示)
- 由程序来更新应用缓存
# 实例 - 完整的 Manifest 文件CACHE MANIFEST
# 2012-02-21 v1.0.0
/theme.css
/logo.gif
/main.jsNETWORK:
login.aspFALLBACK:
/html5/ /404.html
重要的提示:以 "#" 开头的是注释行,但也可满足其他用途。应用的缓存会在其 manifest 文件更改时被更新。如果您编辑了一幅图片,或者修改了一个 JavaScript 函数,这些改变都不会被重新缓存。更新注释行中的日期和版本号是一种使浏览器重新缓存文件的办法。
转载于:https://my.oschina.net/u/3759656/blog/2876774
HTML 5 应用程序缓存相关推荐
- HTML5 应用程序缓存
2019独角兽企业重金招聘Python工程师标准>>> 使用 HTML5,通过创建 cache manifest 文件,可以轻松地创建 web 应用的离线版本. 什么是应用程序缓存( ...
- 神奇的HTML5离线存储(应用程序缓存)
声明:本文为原创文章,如需转载,请注明来源并保留原文链接前端小尚,谢谢! 前言 使用 HTML5,通过创建 cache manifest 文件,可以轻松地创建 web 应用的离线版本. HTML5引入 ...
- 083_html5应用程序缓存
1. 使用html5, 通过创建cache manifest文件, 可以轻松地创建web应用的离线版本. 2. 什么是应用程序缓存(Application Cache)? 2.1. html5引入了应 ...
- 网站性能优化之应用程序缓存-初篇
一. 摘要 首先声明这篇服务器缓存篇是我平时工作中的一些经验心得,对没有用过,或者不知道如何使用服务器缓存的朋友们提供一个简单的认识与实现思路,本文只是抛 砖引玉,还请各位多多提出宝贵意见,希望能够在 ...
- 同时存多个变量缓存 微信小程序_微信小程序 缓存(本地缓存、异步缓存、同步缓存)详解...
微信小程序 缓存 关于本地缓存 1.wx.setStorage(wx.setStorageSync).wx.getStorage(wx.getStorageSync).wx.clearStorage( ...
- 本地缓存需要高时效性怎么办_详解微信小程序缓存--缓存时效性
关于本地缓存 1.wx.setStorage(wx.setStorageSync).wx.getStorage(wx.getStorageSync).wx.clearStorage(wx.clearS ...
- 应用程序缓存_应用程序模块和实体缓存
应用程序缓存 任何具有ADF业务组件基础知识的ADF开发人员都应该熟悉下图: 它代表运行时ADF业务组件的核心构建块. 有一个包含视图对象实例的根应用程序模块实例. 视图对象实例可能由存储在实体集合或 ...
- w3c html5 客户端缓存数据格式,Html5应用程序缓存(Cache manifest)
一.作用 离线浏览 - 根据文件规则把资源缓存在本地,脱机依然能够访问资源,联网会直接使用缓存在本地的文件.优化加载速度,节约服务器资源. 二.适用场景 正如 manifest 英译的名字:离线应用程 ...
- HTML5应用程序缓存Application Cache
什么是Application Cache HTML5引入了应用程序缓存技术,意味着web应用可进行缓存,并在没有网络的情况下使用,通过创建cache manifest文件,可以轻松的创建离线应用. A ...
最新文章
- 如何在网站上同步查看BCH数据
- 为什么你闻不到自己胳肢窝的味道?
- 修改Chrome默认搜索引擎
- 可行性研究报告计算机,台式计算机项目可行性研究报告范文.doc
- dnastar拼接反向互补序列_什么叫“反向互补序列”????????
- 一年级计算机上册计划进度表,一年级上册语文教学计划及进度表
- Markdown入门指南
- 研发工程师面试题整理
- 成功解决Win10连接上wifi但是却显示“无Internet,安全”
- bzoj3698 XWW的难题
- 人工智能常用评估指标
- Codeforces1221 B. Knights(构造)
- 5G专网是个大西瓜(一):价值之问
- 同余方程、欧拉定理、乘法逆元、定义在Zm上的矩阵求逆
- 速观!GitHub 总星 5.4w+,这里藏着 Git 从入门到轻松玩转的秘密!
- Chrome关闭后无法打开
- 通过KXTF9-2050芯片分析I2C协议
- 弘辽科技:做电商开网店流量不精准?你的人群标签没做好
- 飞书搜索初步分析-以移动端为例
- ros2 代码结构及源码解析
热门文章
- TinyMind 汉字书法识别竞赛开启总决赛啦!!
- delete后加 limit是个好习惯么 !
- 这 10 款插件让你的 GitHub 更好用、更有趣
- 【收藏】万字综述,核心开发者全面解读PyTorch内部机制
- Coding-字符串
- Datawhale第四期组队学习团队成员
- ACL 2022录用结果出炉:国内多支团队晒“战绩”,清华一实验组18篇入选
- 第四范式申请港交所上市:2021上半年营收7.88亿,研发费用占七成
- 新冠能被根除吗?医学顶刊BMJ:比根除天花难不少、比脊髓灰质炎容易一点
- PyTorch 多机多卡训练:DDP 实战与技巧