html5 离线资源缓存,html5的离线缓存使用方法
html5的离线缓存使用方法
发布时间:2020-06-15 10:51:01
来源:亿速云
阅读:109
作者:Leah
这篇文章将为大家详细讲解有关html5的离线缓存使用方法,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。
离线访问对基于网络的应用而言越来越重要。虽然所有浏览器都有缓存机制,但它们并不可靠,也不一定总能起到预期的作用。HTML5 使用 ApplicationCache 接口解决了由离线带来的部分难题。
使用缓存接口可为您的应用带来以下三个优势:离线浏览 - 用户可在离线时浏览您的完整网站
速度 - 缓存资源为本地资源,因此加载速度较快。
服务器负载更少 - 浏览器只会从发生了更改的服务器下载资源。
应用缓存(又称 AppCache)可让开发人员指定浏览器应缓存哪些文件以供离线用户访问。即使用户在离线状态下按了刷新按钮,您的应用也会正常加载和运行。
引用清单文件
要启用某个应用的应用缓存,请在文档的 html 标记中添加 manifest 属性:
manifest 属性可指向绝对网址或相对路径,但绝对网址必须与相应的网络应用同源。清单文件可使用任何文件扩展名,但必须以正确的 MIME 类型提供(参见下文)。
...
或
...
您应在要缓存的网络应用的每个页面上都添加 manifest 属性。如果网页不包含 manifest 属性,浏览器就不会缓存该网页(除非清单文件中明确列出了该属性)。
这就意味着用户浏览的每个包含 manifest 的网页都会隐式添加到应用缓存。因此,您无需在清单中列出每个网页。
清单文件必须以 text/cache-manifest MIME类型提供。文件后缀名可以自定义(建议为.manifest)所以我们需要现在服务端将.manifest后缀的文件类型声明为text/cache-manifest。
以apache为例,我们需要在httpd.conf中加上:AddType text/cache-manifest .manifest
清单文件结构
简单的清单格式如下:CACHE MANIFEST
index.html
stylesheet.css
images/logo.png
scripts/main.js
该示例将在指定此清单文件的网页上缓存四个文件。
您需要注意以下几点:
CACHE MANIFEST 字符串应在第一行,且必不可少。
网站的缓存数据量不得超过 5 MB。不过,如果您要编写的是针对 Chrome 网上应用店的应用,可使用 unlimitedStorage 取消该限制。
如果清单文件或其中指定的资源无法下载,就无法进行整个缓存更新进程。在这种情况下,浏览器将继续使用原应用缓存。
我们再来看看更复杂的示例:CACHE MANIFEST
# 2010-06-18:v2
# Explicitly cached 'master entries'.
CACHE:
/favicon.ico
index.html
stylesheet.css
images/logo.png
scripts/main.js
# Resources that require the user to be online.
NETWORK:
login.php
/myapi
http://api.twitter.com
# static.html will be served if main.py is inaccessible
# offline.jpg will be served in place of all images in images/large/
# offline.html will be served in place of all other .html files
FALLBACK:
/main.py /static.html
images/large/ images/offline.jpg
*.html /offline.html
以“#”开头的行是注释行,但也可用于其他用途。例如更新缓存
应用缓存只在其清单文件发生更改时才会更新。例如,如果您修改了图片资源或更改了 JavaScript 函数,这些更改不会重新缓存。您必须修改清单文件本身才能让浏览器刷新缓存文件。使用生成的版本号、文件哈希值或时间戳创建注释行,可确保用户获得您的软件的最新版。
您还可以在出现新版本后,以编程方式更新缓存,如更新缓存部分中所述。
如果页面引入了缓存清单文件,那么清单文件必须包含当前页面需要的所有文件(css,js,image...),否则不会被加载,所以除去固定需要缓存的文件,建议在文件中的NETWORK一项加上星号*,表示其余所有文件
清单可包括以下三个不同部分:CACHE、NETWORK 和 FALLBACK。
CACHE:
这是条目的默认部分。系统会在首次下载此标头下列出的文件(或紧跟在 CACHE MANIFEST 后的文件)后显式缓存这些文件。
NETWORK:
此部分下列出的文件是需要连接到服务器的白名单资源。无论用户是否处于离线状态,对这些资源的所有请求都会绕过缓存。可使用通配符。
FALLBACK:
此部分是可选的,用于指定无法访问资源时的后备网页。其中第一个 URI 代表资源,第二个代表后备网页。两个 URI 必须相关,并且必须与清单文件同源。可使用通配符。
请注意:这些部分可按任意顺序排列,且每个部分均可在同一清单中重复出现。
以下清单定义了用户尝试离线访问网站的根时显示的“综合性”网页 (offline.html),也表明了其他所有资源(例如远程网站上的资源)均需要互联网连接。CACHE MANIFEST
# 2010-06-18:v3
# Explicitly cached entries
index.html
css/style.css
# offline.html will be displayed if the user is offline
FALLBACK:
/ /offline.html
# All other resources (e.g. sites) require the user to be online.
NETWORK:
*
# Additional resources to cache
CACHE:
images/logo1.png
images/logo2.png
images/logo3.png
请注意:系统会自动缓存引用清单文件的 HTML 文件。因此您无需将其添加到清单中,但我们建议您这样做。
请注意:HTTP 缓存标头以及对通过 SSL 提供的网页设置的缓存限制将被替换为缓存清单。因此,通过 https 提供的网页可实现离线运行。
更新缓存
应用在离线后将保持缓存状态,除非发生以下某种情况:用户清除了浏览器对您网站的数据存储。
清单文件经过修改。请注意:更新清单中列出的某个文件并不意味着浏览器会重新缓存该资源。清单文件本身必须进行更改。
应用缓存通过编程方式进行更新。
关于html5的离线缓存使用方法就分享到这里了,希望以上内容可以对大家有一定的帮助,可以学到更多知识。如果觉得文章不错,可以把它分享出去让更多的人看到。
html5 离线资源缓存,html5的离线缓存使用方法相关推荐
- html5保存资源本地,html5之Localstorage本地存储
题外话 今天把博客里面的内容,同步在github的issues中了.具体地址是:https://github.com/confidence68/blog/issues ,欢迎大家访问,给star. L ...
- 资源推荐—HTML5精品资源
资源推荐-HTML5精品资源 导语 HTML5现在很是火爆,月光博客今天就发表了一篇博文<HTML5能取代Android和iOS应用程序吗?> ,很强大把~~~ 想学习HTML的就去HTM ...
- html开启页面离线缓存,HTML5 离线缓存
离线缓存 applicationCache 第一次加载后将数据缓存,如果没有清除缓存,下一次没有网络也能加载. 使用 1. 使用 manifest 属性,引入 .appcache 文件 每个指定了 m ...
- html5 将资源存于客户端,HTML5离线应用与客户端存储的实现
html5几种在客户端存储数据的实例详解 LocalStorage LocalStorage用于持久化的本地存储,存储资料在客户端(client)的浏览器上,除非主动删除数据,否则数 据是永远不会过期 ...
- 浏览器是怎么对html5的离线资源进行加载的呢
当用户与因特网断开连接后,浏览器会通过HTML的manifest属性对HTML的资源进行缓存, 应用程序缓存为应用带来三个优势: 1.离线浏览-用户可以在应用离线时使用他们 速度 - 已缓存资源加载得 ...
- html应用缓存,HTML5应用缓存
使用应用程序缓存,通过创建缓存清单文件,可以轻松地创建web应用程序的脱机版本. 什么是应用缓存? HTML5 介绍应用程序缓存,这意味着Web应用程序缓存,并且在没有Internet连接的时候可访问 ...
- html5离线储存不足,html5的离线存储问题
HTML5的一个重要特性就是离线存储,所谓的离线存储就是将一些资源文件保存在本地,这样后续的页面重新加载将使用本地资源文件,在离线情况下可以继续访问web应用,同时通过一定的手法(更新相关文件或者使用 ...
- android h5 离线缓存,H5 应用程序缓存(离线缓存)
离线缓存这个功能的实现有以下步骤: 1,以nginx做web服务器为例,在mime.types文件中添加一行:text/cache-manifest manifest,作用是为了让服务器识别该 ...
- html5离线存储图片,HTML5教程 离线存储技术详解
本篇教程探讨了HTML5教程 离线存储技术详解,希望阅读本篇文章以后大家有所收获,帮助大家HTML5+CSS3从入门到精通 . < 随着Web App的发展,越来越多的移动端App使用HTML5 ...
最新文章
- 左右无缝轮播图的实现
- 提高jQuery执行效率
- Django 序列化三种方式 对象 列表 元组
- react --- 隔代传递参数的三种方式
- netcat、ncc工具使用
- C#LeetCode刷题-双指针
- 三星Galaxy S21+真机上手视频曝光:外观彻底无悬念
- Java程序员已经饱和了,还有必要培训Java编程嘛
- Linux7没有网卡,centos7安装后缺少网卡如何解决?
- [转]浅谈Normalize.css
- 屏幕方向调节---LANDSCAPE与PORTRAIT
- php 判断是否在指定时间段范围内
- Vue——B站黑马程序员教程
- 使用Cool Edit Pro 去除音频文件中的咝咝噪声
- Excel 精选28个技巧
- matlab四面体网格分割,分割球面
- 计算机关机 休眠睡眠有什么区别,你能分清电脑“休眠”和“睡眠”的区别吗?...
- Excel如何将汉字转成拼音
- 骨传导耳机损伤大脑?具有不伤耳优点的骨传导耳机了解一下
- 上台阶问题:一个人上台阶,一次可以走1、2、3步,问n个台阶有多少种走法?