html离线教程,HTML5离线存储整理
前端html部分
//canvas.html
浏览器离线存储
配置文件
CACHE MANIFEST
#v1.0.5
#需要缓存的文件
CACHE:
/photos/canvas.png
#不需要缓存的文件
NETWORK:
*
#无法访问页面
FALLBACK:
404.html
服务器端node.js
app.js
var express = require('express');
var app = express();
var path = require('path');
var join = path.join;
var ejs = require('ejs') //ejs模板
var fs = require("fs"); //fs模块
var bodyParser = require('body-parser'); //解析post请求模块
var favicon = require('serve-favicon');
var events = require("events");
var emitter = new events.EventEmitter()
app.set('views', __dirname+'/views');
app.disable('view cache'); //解除视图缓存
app.engine('.html', ejs.__express);
app.set('view engine', 'html')
app.use(express.static(path.join(__dirname,'public'))); //设置静态文件夹
app.use(bodyParser.urlencoded({ extended: false }));
app.use(favicon(__dirname + '/favicon.ico'));
app.use(function(req,res,next){
if(req.url=='/test.appcache'){
res.setHeader('content-type','text/cache-manifest');
};
next();
})
app.get('/canvas',function(req,res){
res.sendFile( __dirname + "/views/" + "canvas.html" );
})
app.listen(8081,function(){
console.log('success connect')
})
第一次加载页面时候(需联网)
第二次加载页面的时候(离线加载)
我们设置离线缓存的图片在无网络情况下能够正常从缓存中访问。
离线缓存中的坑:
清单文件经过修改。请注意:更新清单中列出的某个文件并不意味着浏览器会重新缓存该资源。清单文件本身必须进行更改。
1.查看缓存状态
var appCache = window.applicationCache;
switch (appCache.status) {
case appCache.UNCACHED: // UNCACHED == 0
return 'UNCACHED';
break;
case appCache.IDLE: // IDLE == 1
return 'IDLE';
break;
case appCache.CHECKING: // CHECKING == 2
return 'CHECKING';
break;
case appCache.DOWNLOADING: // DOWNLOADING == 3
return 'DOWNLOADING';
break;
case appCache.UPDATEREADY: // UPDATEREADY == 4
return 'UPDATEREADY';
break;
case appCache.OBSOLETE: // OBSOLETE == 5
return 'OBSOLETE';
break;
default:
return 'UKNOWN CACHE STATUS';
break;
};
2.更新浏览器缓存
var appCache = window.applicationCache;
appCache.update(); // Attempt to update the user's cache.
...
if (appCache.status == window.applicationCache.UPDATEREADY) {
appCache.swapCache(); // The fetch was successful, swap in the new cache.
}
请注意:以这种方式使用 update() 和 swapCache() 不会向用户提供更新的资源。此流程只是让浏览器检查是否有新的清单、下载指定的更新内容以及重新填充应用缓存。因此,还需要对网页进行两次重新加载才能向用户提供新的内容,其中第一次是获得新的应用缓存,第二次是刷新网页内容。
好消息是,您可以避免重新加载两次的麻烦。要使用户更新到最新版网站,可设置监听器,以监听网页加载时的 updateready 事件:
//Check if a new cache is available on page load.
window.addEventListener('load', function(e) {
window.applicationCache.addEventListener('updateready', function(e) {
if (window.applicationCache.status == window.applicationCache.UPDATEREADY) {
// Browser downloaded a new app cache.
// Swap it in and reload the page to get the new hotness.
window.applicationCache.swapCache();
if (confirm('A new version of this site is available. Load it?')) {
window.location.reload();
}
} else {
// Manifest didn't changed. Nothing new to server.
}
}, false);
}, false);
由于离线缓存会默认缓存html页面,所以对于动态html输出的页面例如(php,jsp)等来说使用离线缓存会出现很多问题, 根据Application Cache的加载机制,如果仅仅修改资源文件的内容(没有修改资源文件的路径或名称),浏览器将直接从本地离线缓存中获取资源文件。所以在每次修改资源文件的同时,需要修改manifest文件,以触发资源文件的重新加载和缓存。这其中,最有效的方式是修改manifest文件内部的版本注释(所以说那句注释相当重要) 如果资源没有被缓存,在而没有设置NETWORK的情况下,将会无法加载(浏览器不会去网络上进行加载),所以需要使用通配符来表明除了CACHE中确定的资源以外,其他资源都需要去网络上加载。
html离线教程,HTML5离线存储整理相关推荐
- html开启页面离线缓存,HTML5 离线缓存
离线缓存 applicationCache 第一次加载后将数据缓存,如果没有清除缓存,下一次没有网络也能加载. 使用 1. 使用 manifest 属性,引入 .appcache 文件 每个指定了 m ...
- tomcat html5离线缓存,HTML5离线缓存在tomcat部署可实现图片flash等离线浏览打
tomcat能解析html5的页面吗?为什么我的H5页面放到...为什么我的H5页面放到tomcat里面后,在手机端用服务器地址访问时,页面html5本身不支持hbuilder的扫码功能,native ...
- html5离线存储图片,HTML5教程 离线存储技术详解
本篇教程探讨了HTML5教程 离线存储技术详解,希望阅读本篇文章以后大家有所收获,帮助大家HTML5+CSS3从入门到精通 . < 随着Web App的发展,越来越多的移动端App使用HTML5 ...
- 神奇的HTML5离线存储(应用程序缓存)
声明:本文为原创文章,如需转载,请注明来源并保留原文链接前端小尚,谢谢! 前言 使用 HTML5,通过创建 cache manifest 文件,可以轻松地创建 web 应用的离线版本. HTML5引入 ...
- html5离线保存需要联网吗,html5 离线存储
在html页面中引入manifest文件 在服务器添加mime-type text/cache-manifest 如下: sample.appcache内容如下: CACHE MANIFEST #ve ...
- html5 将资源存于客户端,HTML5离线应用与客户端存储的实现
html5几种在客户端存储数据的实例详解 LocalStorage LocalStorage用于持久化的本地存储,存储资料在客户端(client)的浏览器上,除非主动删除数据,否则数 据是永远不会过期 ...
- HTML5(3) -- 离线缓存与客户端存储总结
1.离线检测 可以使用navigator.onLine属性来检测 <!DOCTYPE html> <html lang="en"><head>& ...
- HTML5离线存储利与弊
一.概念 离线存储是HTML5中的一个重要特性,顾名思义就是将一些资源文件保存在本地,这样后续的页面重新加载将使用本地资源文件,这样子使得你的web应用可以在用户离线的状况下进行访问,很显眼有三个好处 ...
- 50000字,数仓建设保姆级教程,离线和实时一网打尽(理论+实战) 下
文档大纲: 本文上半部分之前已经发过了,传送门:50000字,数仓建设保姆级教程,离线和实时一网打尽(理论+实战) 上 此篇文章是整个文档的下半部分,将接着上半部分从第五章开始. 五.实时数仓建设核心 ...
最新文章
- 强烈推荐Spring Web Flow权威指南
- 开源ImageFilter库v0.4:新增26种图片效果
- 全年月平均工作时间和工资折算办法
- Ubuntu12.04安装中文字体,解决导出图片乱码
- 避免css中文字体在浏览器中解析成乱码
- Node中Exports与module.export的使用与区别
- oracle .ctl 是什么文件_Oracle误删dual表怎么办?这里教你怎么恢复
- JAVA中的isMirror函数_Swift中的反射Mirror
- 学JAVA第十三天,方法、方法重载及构造函数
- Java-static概述
- 需求分析报告模板(免费)
- Clover Configurator 5.16.0.0 黑苹果引导四叶草配置工具
- eclipse和myeclipse集成Xjad
- 仿淘宝Banner:左右滑动ViewPager+最后一张滑动查看详情
- 计算机打代码的技巧,工作超实用的电脑技巧
- onkeyup+onafterpaste 限制文本框只能输入数字 在thinkPHP框架中某些不触发的现象
- SG-UAP电网项目开发简介
- iOS - 暗黑模式图片、颜色的适配
- 英特尔微软强强联手开发智能广告技术
- 如何进行APP界面设计
热门文章
- 「项目实战」有一说一这才是RabbitMQ实现分布式事务的正确姿势(附源码)
- Android 动画之ScaleAnimation应用具体解释
- 【MySQL】MySQL数据库的安装详细步骤
- 笔记本的M.2下岗,sata固态的任务交接时,开机无法引导到sata固态的问题
- python是编写机器人的语言么_工业机器人用什么语言编程的?
- c语言上机题库20套题,C语言上机试题1-20套
- 解决window Server 2008 R2环境下无法安装.NetFramwork4.6错误
- mysql my.init
- 赛博格简史:过去、现在和未来
- 洛谷oj题单【入门1】顺序结构-入门难度(Java)