HTML5的应用缓存

HTML5的应用缓存（application cache），或者简称为appcache，是专门为开发离线Web应用而设计的。

Appcache就是从浏览器的缓存中分出来的一块缓存区。要想在这个缓存中保存数据，可以使用一个描述文件（manifest file），列出要下载和缓存的资源。下面是一个简单的描述文件示例。

CACHE MANIFEST

# version 20200105

CACHE:

base.css

NETWORK:

FALLBACK:

404.html

在最简单的情况下，描述文件中列出的都是需要下载的资源，以备离线时使用。

要将描述文件与页面关联起来，可以在 <html> 中的 manifest 属性中指定这个文件的路径，例如：

它是浏览器自己的一种机制，随着移动互联网时代的到来，网络可靠性降低，如果我们已经将需要的文件缓存下下来，一旦网络无法访问，也能继续访问。

而且做好相应资源的缓存可以带来更好的用户体验，当用户使用自己的流量上网时，本地缓存不仅可以提高用户访问速度，而且大大节约用户的使用流量。

Manifest 的特点

离线浏览：即当网络断开时，可以继续访问你的页面。
访问速度快：将文件缓存到本地，不需每次都从网络上请求。
稳定性：做了Manifest缓存，遇到突发网络故障或者服务器故障，继续访问本地缓存。

运行时的流程图

manifest 文件

而第一行CACHE MANIFEST为固定格式，必须写在前面。

CACHE（必须）标识出哪些文件需要缓存，可以是相对路径也可以是绝对路径。这里列举出来的文件，当第一次加载下来时，会被浏览器缓存在本地。

NETWORk （可选）这一部分是要绕过缓存直接读取的文件，可以使用通配符 *，大多数网站使用 * 。当使用* 时表示出 CACHE指定文件外，其它所有页面都需要联网访问。

FALLBACK （可选）当资源无法访问时，浏览器使用后备资源去替代。比如404页面。

如何更新缓存

如下三种方式，可以更新缓存：更新manifest文件，通过javascript操作，清除浏览器缓存。

html5中引入了js操作离线缓存的方法，下面的js可以手动更新本地缓存。

window.applicationCache.update();

如果用户清除了浏览器缓存（手动或用其他一些工具）都会重新下载文件。

End

HTML5的应用缓存相关推荐

html5结构客户端缓存,Javascript--离线应用与客户端储存
开发离线Web应用需要几个步骤: 首先确保应用知道设备是否能上网. 应用必须能访问一定的资源(图像,Javascript,CSS),这样才能正常工作. 离线检测 navigator.onLine HT ...
HTML5应用程序缓存实现离线Web网页或应用
HTML5应用程序缓存和浏览器缓存的区别. (有些)浏览器会主动保存自己的缓存文件以加快网站加载速度.但是要实现浏览器缓存必须要满足一个前提,那就是网络必须要保持连接.如果网络没有连接,即使浏览器启用 ...
html5 离线资源缓存,html5的离线缓存使用方法
html5的离线缓存使用方法发布时间:2020-06-15 10:51:01 来源:亿速云阅读:109 作者:Leah 这篇文章将为大家详细讲解有关html5的离线缓存使用方法,小编觉得挺实用的, ...
HTML5 应用程序缓存离线浏览【Application Cache】轻松地创建 web 应用的离线版本。
HTML5 应用程序缓存使用 HTML5,通过创建 cache manifest 文件,可以轻松地创建 web 应用的离线版本. 什么是应用程序缓存(Application Cache)? HTML ...
HTML5 应用程序缓存
2019独角兽企业重金招聘Python工程师标准>>> 使用 HTML5,通过创建 cache manifest 文件,可以轻松地创建 web 应用的离线版本. 什么是应用程序缓存( ...
html5 客户端数据缓存机制,深入理解HTML5离线缓存机制
TML5提供了一种离线应用缓存机制,使得网页应用可以离线使用,这种机制在移动端浏览器上支持度非常广,所有版本的android和ios浏览器都能很好的支持.我们可以放心的使用该特性来加速移动端页面的访问 ...
HTML5应用程序缓存Application Cache
什么是Application Cache HTML5引入了应用程序缓存技术,意味着web应用可进行缓存,并在没有网络的情况下使用,通过创建cache manifest文件,可以轻松的创建离线应用. A ...
HTML5 - 应用程序缓存(Application Cache)
为什么要使用Application Cache技术? 在HTML5之前,我们需要接入网络才能访问,这毫无疑问是网站多次请求服务器,造成速度变慢,对于PC用户,网络相对比较稳定,载入速度也不会差太多.但 ...
离线缓存html5,HTML5新技术离线缓存
什么是离线缓存离线缓存,就是将指定的网页文件(例如css.js)保存到本地,当用户没有网络时,依旧可以通过浏览器使用这些文件. 为何要用离线缓存从网站所有者的角度来说,增加离线缓存功能,能够让用户 ...

HTML5的应用缓存

HTML5的应用缓存相关推荐

最新文章

热门文章