HTML5 manifest离线缓存_weixin_33722405的博客-程序员宅基地

技术标签: 区块链  python  php  

简介

离线访问对基于网络的应用而言越来越重要。虽然所有浏览器都有缓存机制,但它们并不可靠,也不一定总能起到预期的作用。HTML5 使用 ApplicationCache 接口解决了由离线带来的部分难题。

使用缓存接口可为您的应用带来以下三个优势:

  1. 离线浏览 - 用户可在离线时浏览您的完整网站
  2. 速度 - 缓存资源为本地资源,因此加载速度较快。
  3. 服务器负载更少 - 浏览器只会从发生了更改的服务器下载资源。

应用缓存(又称 AppCache)可让开发人员指定浏览器应缓存哪些文件以供离线用户访问。即使用户在离线状态下按了刷新按钮,您的应用也会正常加载和运行。

引用清单文件

要启用某个应用的应用缓存,请在文档的 html 标记中添加 manifest 属性:
manifest 属性可指向绝对网址或相对路径,但绝对网址必须与相应的网络应用同源。清单文件可使用任何文件扩展名,但必须以正确的 MIME 类型提供(参见下文)。

<html manifest="/cache.manifest">
  ...
</html>

或

<html manifest="http://www.example.com/example.mf">
  ...
</html>

您应在要缓存的网络应用的每个页面上都添加 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 提供的网页可实现离线运行。

更新缓存

应用在离线后将保持缓存状态,除非发生以下某种情况:

  1. 用户清除了浏览器对您网站的数据存储。
  2. 清单文件经过修改。请注意:更新清单中列出的某个文件并不意味着浏览器会重新缓存该资源。清单文件本身必须进行更改。
  3. 应用缓存通过编程方式进行更新。



欢迎订阅「K叔区块链」 - 专注于区块链技术学习

博客地址: http://www.jouypub.com
简书主页: https://www.jianshu.com/u/756c9c8ae984
segmentfault主页: https://segmentfault.com/blog/jouypub
腾讯云主页: https://cloud.tencent.com/developer/column/72548
版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/weixin_33722405/article/details/88771065

智能推荐

荣耀30青春版发布 简单说说有哪些亮点_hanniuniu13的博客-程序员宅基地

不久之前,荣耀在7月2日发布荣耀30青春版,受到很多人的关注。作为许多年轻人青睐的品牌,荣耀一直努力打造年轻人喜爱的潮流新品,这次荣耀30青春版就是其中之一。这款手机以“5G青春 美好如你”为主题,在海报上首次展示两种时尚配色,美轮美奂。下面我就简单来说说,荣耀30青春版都有哪些亮点。 在外观方面,荣耀30青春版充分考虑到年轻人“颜值为上”原则,将光影与手机结合,搭配夏日彩虹、幻镜银等四种潮流配色,总有一款能吸引到你。屏幕方面采用一块6.5英寸水滴屏,屏占比高达91.2%,并支持90Hz屏幕刷新率,使用

Go开发工具_lovewater的博客-程序员宅基地

1.4 Go开发工具本节我将介绍几个开发工具,它们都具有自动化提示,自动化fmt功能。因为它们都是跨平台的,所以安装步骤之类的都是通用的。LiteIDELiteIDE是一款专门为Go语言开发的跨平台轻量级集成开发环境(IDE),由visualfc编写。图1.4 LiteIDE主界面LiteIDE主要特点:支持主流操作系统WindowsLinuxMacOS X

使用jackson将java对象转换成标准的json格式,便于与easyui的datagrid交互_javasgl的博客-程序员宅基地

我在一篇 《Easyui的datagrid结合hibernate实现数据分页 》中使用了JSONParser的自己编写的工具类,现在分享一下,其实这个工具很简单。   大多数情况下,我后台都是把结果以List的形式返回给前台,但list的形式却不能满足AJAX处理json的格式,为了方便起见,我就简单了写了一个JSONParser类。       一、首先得准备三个jar包,下载网址是ht

用户级线程和内核级线程_Azhemaker的博客-程序员宅基地

用户级线程一个浏览器的模型:两个执行序列与一个栈的弊端:Yield()是一个切换函数,在线程切换中,我们需要像Yield()这样的函数允许B-&gt;C-&gt;D并直接返回 -&gt;B,否则只能逐层调用返回,这不是线程切换想要的结果。这种情况如果我们希望用Yield()从D返回到B,即直接跳转到204,但当函数返回时(ret指令),我们发现此时栈已经乱了,ret将会导致意外,会使程序跳转到404.从一个栈到两个栈如果使用两个栈,那么我们自然需要在Yield()中切换栈,把栈顶指针存入

Solidity 常用方法总结_wilson_go的博客-程序员宅基地

block中的方法block.blockhash(uint blockNumber) returns (bytes32):给定块的散列 - 仅适用于256个最近的块block.coinbase (address):当前块矿工的地址block.difficulty (uint):当前块难度block.gaslimit (uint):当前块gaslimitblock.number (uint...

NYOJ204Coin Test_weixin_34120274的博客-程序员宅基地

Coin Test时间限制:3000ms | 内存限制:65535KB难度:1描述As is known to all,if you throw a coin up and let it droped on the desk there are usually three results. Yes,just believe what I say ~it can...

随便推点

python 文件读写中文件指针坑(连续两次reallines())_wonengguwozai的博客-程序员宅基地

今天做数据筛选任务时,需要统计txt文件中所有行数和满足要求的行数,bug实现如下:执行后得到的posi_sum 始终为0.。。很苦恼啊。几番奔波原因原来时在打开一次文件后连续进行了两次文件指针操作(两次readlines())原因---文件是一个可迭代对象,第一次readlines()执行完后,返回该文件的字符串列表,当readlines()语句执行完后,指针指向后列表的最后一行。所以下一次再r...

蚂蚁集团万级规模 k8s 集群 etcd 高可用建设之路_高可用架构的博客-程序员宅基地

蚂蚁集团运维着可能是全球最大的 k8s 集群:k8s 官方以 5k node 作为 k8s 规模化的顶峰,而蚂蚁集团事实上运维着规模达到 10k node 规模的 k8s 集群。一个形象的...

JavaEE.sql.Delete删除语句_weixin_30951743的博客-程序员宅基地

DELETE语法格式DELETE FROM table_name WHERE condition;S1.常用用法DELETEFROM test_masterWHERE bindNo = 'bn002'S2.清空表// DELETE...

Hadoop学习之路(一)理论基础和逻辑思维_一尘在心的博客-程序员宅基地

目录三个题目 第一题 第二题 第三题  正文回到顶部三个题目第一题问题描述统计出当前这个一行一个IP的文件中,到底哪个IP出现的次数最多解决思路//必须要能读取这个内容 BufferedReader br = new BuffedReader(new FileInputStream(new File(&quot;c:/big...

Pentest - Spwan a shell from meterpreter_Nixawk的博客-程序员宅基地

msf post(system_session) > sessions -lActive sessions=============== Id Type Information Connection -- ---- ----------

使用default-servlet-handler出现的问题/bug_问题少年阿涛的博客-程序员宅基地_defaultservlethandler不起作用

本人小白一个,不能保证博客中内容都准确,如果博客中有错误的地方,望各位多多指教,请指正。上面的内容仅仅能解决本人遇到的错误,不一定适用于所有人,如有不适用,请多多包涵。问题 描述: 使用default-servlet-handler,只能通过url 访问静态资源,而无法在controller层访问静态资源。...