html5 application cache 应用程序缓存 demo-尊龙官方平台

html5 application cache 应用程序缓存 demo

el/2024/3/25 15:12:49

应用程序缓存使用方法可参考 点击打开链接

上边描述的挺好,但是具体实现起来,配置挺麻烦。今天上传一下本人使用的经验,供大家学习交流。

1.配置服务器

!!!!!服务器需要添加配置!!!!!!!!!


建议使用google chrome 测试


我的是apache服务器 conf/httpd.conf文件的mime_module 中添加

.
.
.

addtype text/cache-manifest .appcache


2.下载demo运行

 点击打开链接




以下是具体使用方法,源自点击打开链接


使用 html5,通过创建 cache manifest 文件,可以轻松地创建 web 应用的离线版本。

什么是应用程序缓存(application cache)?

html5 引入了应用程序缓存,这意味着 web 应用可进行缓存,并可在没有因特网连接时进行访问。

应用程序缓存为应用带来三个优势:

  • 离线浏览 - 用户可在应用离线时使用它们
  • 速度 - 已缓存资源加载得更快
  • 减少服务器负载 - 浏览器将只从服务器下载更新过或更改过的资源。

浏览器支持

所有主流浏览器均支持应用程序缓存,除了 internet explorer。

html5 cache manifest 实例

下面的例子展示了带有 cache manifest 的 html 文档(供离线浏览):

实例

manifest="demo.appcache">
the content of the document......

亲自试一试

cache manifest 基础

如需启用应用程序缓存,请在文档的 标签中包含 manifest 属性:

...

每个指定了 manifest 的页面在用户对其访问时都会被缓存。如果未指定 manifest 属性,则页面不会被缓存(除非在 manifest 文件中直接指定了该页面)。

manifest 文件的建议的文件扩展名是:".appcache"。

请注意,manifest 文件需要配置正确的 mime-type,即 "text/cache-manifest"。必须在 web 服务器上进行配置。

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

下面的 network 小节规定文件 "login.asp" 永远不会被缓存,且离线时是不可用的:

network:
login.asp

可以使用星号来指示所有其他资源/文件都需要因特网连接:

network:
*

fallback

下面的 fallback 小节规定如果无法建立因特网连接,则用 "offline.html" 替代 /html5/ 目录中的所有文件:

fallback:
/html5/ /404.html

注释:第一个 uri 是资源,第二个是替补。

更新缓存

一旦应用被缓存,它就会保持缓存直到发生下列情况:

  • 用户清空浏览器缓存
  • manifest 文件被修改(参阅下面的提示)
  • 由程序来更新应用缓存

实例 - 完整的 manifest 文件

cache manifest
# 2012-02-21 v1.0.0
/theme.css
/logo.gif
/main.jsnetwork:
login.aspfallback:
/html5/ /404.html

重要的提示:以 "#" 开头的是注释行,但也可满足其他用途。应用的缓存会在其 manifest 文件更改时被更新。如果您编辑了一幅图片,或者修改了一个 javascript 函数,这些改变都不会被重新缓存。更新注释行中的日期和版本号是一种使浏览器重新缓存文件的办法。

关于应用程序缓存的注释

请留心缓存的内容。

一旦文件被缓存,则浏览器会继续展示已缓存的版本,即使您修改了服务器上的文件。为了确保浏览器更新缓存,您需要更新 manifest 文件。

注释:浏览器对缓存数据的容量限制可能不太一样(某些浏览器设置的限制是每个站点 5mb)。




http://www.ngui.cc/el/5126694.html

相关文章

viewstub 测试demo by terry

viewstub可以实现,布局的异步填充。当需要使用某一部分布局的时候,再去把它加载出来。 有点像苹果中的懒加载。什么时候需要,什么时候加载出来,节约内存空间,提高流畅度。 有两种方法去实…

android app启动时经常会卡顿黑屏或白屏 by terry

app在点击图标启动时,初始化时候需要一段时间。 如果因为各种原因,导致这个初始化时间过长,会造成很糟糕的用户体验。 经常会产生长时间黑屏,或者长时间白屏的现象。其实产生这一现象的时候app已经进入要启动的页面了。 产生黑…

腾讯x5内核 在线视频播放 使用说明 by terry

在线播放视频是一个很常用的功能。但有的视频文件格式不统一,具体播放功能实现起来可能会遇到各种问题!!怎么办?直接第三方,又简单又好用。 x5内核集成了html5的一些特效功能以及在线播放功能,这里先重点说…

android 外部调起高德地图显示坐标点 自定义 标注高德地图 by terry

下载链接:点击下载demo 在app开发中,经常想在高德地图上标注我们想要的坐标点。其实这个动作很简单,但是,高德地图api开发文档把这一块藏得太隐蔽了。不太好找。 就几行代码。 intent i new intent();i.setaction("android…

mangento init process

magento init process bare essentials posted by branko in magento | comments off this article is meant to be a start up point for “newbies” getting ready to digg seriously into the magetno. when i say newbie’s, i meant no disrespect, i only ment new to m…

在产品详细页面的产看上一个,下一个产品的代码!

helper(catalog/output); //data[]里面的数据--通过$this->get(); $_product $this->getpro…

url重写--我认为的

1.url生成器网址:(不会写正则表达式,可以通过下面的工具生成!) http://seohelper.cn/tools/urlrewrite 根据写入的url生成2种不同的url规则(就是正则表达式) 2.url重写---名词解释:…

在phtml和block中获取各种url地址

在magento的二次开发中,我们经常要用magento中的函数去获取各种url。为了magento程序升级的方便而又不需要去大动干戈重建模块的时候,我们可以直接在magento block中编写php代码。 下面是一些常用的获取url的函数:在magento block中获取各种u…

layout下面的xml文件里面的各个标签的加载

1. 标签为产品详细信息页面时候加载的标签 2. 产品对比页面信息时候加载的标签 3.

wordpress和magento整合

1.magento 1.4.1.1 wordpress 2安装插件 名称: fishpigs wordpress integration extension key:magento-community/fishpig_wordpress_integration 网址: http://www.magentocommerce.com/magento-connect/fishpig/extension/3958/fishpig_wordpress_integration 介…
网站地图