html5的离线缓存

编程之家收集整理的这篇文章主要介绍了html5的离线缓存编程之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

一个离线网络应用程序就是一个URL的列表,html,css,js,图片,或者其他类型的资源。

把这些资源,在本地缓存下来,当你尝试在没有网络连接时访问网络应用程序,你的浏览器将自动切换并使用本地代替。

1、服务器端配置
需要在apache配置文件加:AddType text/cache-manifest .manifest,并重启服务器。

2、manifest文件,格式如下

#这一句必须存在,而且必须放在头部
CACHE MANIFEST
#指明要缓存的内容
CACHE
#指定无需缓存的文件
NETWORK
#这个声明,允许你在资源不可用的情况下,将用户重定向到特定文件
FALLBACK


创建res.manifest如下:

CACHE MANIFEST
CACHE:
test.html
test.css
test.js
NETWORK:
test.jpg
FALLBACK:

 

3、在html标签添加属性manifest

<!DOCTYPE html>
<html lang="en" manifest="res.manifest">
<head>
    <Meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="./test.css">
    <script src="test.js"></script>
</head>
<body>
    <img src="test.jpg" alt="">
</body>
</html>

重新联网后,html内容改变,但页面仍没有变化,因为默认优先使用缓存,修改manifest文件,刷新就可以。

html5提供了两种检测是否在线的方式:
navigator.onLine和online/offline事件。

1、navigator.onLine属性表示当前是否在线。
2、开发者还需要在网络状态发生变化时立刻得到通知,所以提供了online/offline事件。

applicationCache属性,事件,方法API,慎用。

总结

以上是编程之家为你收集整理的html5的离线缓存全部内容,希望文章能够帮你解决html5的离线缓存所遇到的程序开发问题。

如果觉得编程之家网站内容还不错,欢迎将编程之家网站推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
喜欢与人分享编程技术与工作经验,欢迎加入编程之家官方交流群!

相关文章

猜你在找的HTML5相关文章

概述 WeUI是一套同微信原生视觉体验一致的基础样式库,为微信Web开发量身设计,可以令用户的使用感知更加统一。包含button、cell、dialog、toast、article、icon等各式元素
在新的HTML5标准中,新增了一个非常重要的元素—canvas元素。使用该元素,可以在页面中直接进行各种复杂图形的制作。因此,如果使用该元素绘制统计图,比之前使用服务器端控件来生成统计图的方法更加具有
ReactJS通常也被称为&quot;React&quot;,是一个刚刚在这场游戏中登场的新手。它由Facebook创建,并在2013年首次发布。Facebook认为React在处理SPA问题上可以成
又到了一年一度的中国春运,今年的网络订票(12306.cn)有好多的故事上演,下面几条是这两天的几条相关新闻。猎豹浏览器推出春运抢票版 九大优势轻松订票抢票插件风靡的恶果:农民工成购车票弱势群体123
Twitter发布了Flight项目。Flight是一个轻量级的、基于组件的JavaScript框架,可以将行为映射到DOM节点上。Twitter将其用在自己的Web应用上,Twitter基于MIT许
JayData 是一个标准的、跨平台的库和方法,用于访问和操作各种不同的数据源,最适合用于 JavaScript 和 HTML5 应用。 官方网站:http://jaydata.org/ ASP.NE
简洁优雅的 Twitter Bootstrap Metro 界面风格开发框架,是 GitHub 上的开源项目http://talkslab.github.com/metro-bootstrap 。Me
XB 软件公司最近发布了JavaScript UI 库Webix ,其中包含的组件超过45个,用这些组件可以构建跟HTML5 和 CSS3 兼容的程序,这些程序不仅能在个人电脑上运行,还能用在iOS、