HTML5 离线应用之打造零请求、无流量网站的解决方法


Posted in HTML / CSS onApril 25, 2013

前言

今天Web应用程序已经很复杂了,以现在的发展,会将越来越复杂,但他有一个致命缺点,不能脱离internet链接,因此在HTML中新增了一API,

它使用一个本地存储机制很好地解决了这个问题,为离线web应用铺平了道路。
本地缓存于浏览器缓存

复制代码
代码如下:

本地缓存是为整个web应用程序服务
浏览器缓存只对单个网页服务</p> <p>任何网页都具有网页缓存
本地缓存只缓存那些你指定缓存的页面</p> <p>网页缓存不可靠、不安全,因为我们不知道网站中到底缓存了哪些页面、哪些资源
本地缓存可以控制对哪些内容进行缓存

manifest文件

web应用程序本地缓存是通过每个页面的manifest文件来管理的,manifest是一简单文本,在该文件中以清单的形式列举了需要被缓存的不需要被缓存的文件的名字、路径。

可以为每个页面单独指定manifest也可以为整个应用程序指定,例我们为hello.htm的设置:

复制代码
代码如下:

CACHE MANIFEST
CACHE:
other.html
hellow.js
images/myphoto.jpg
NETWORK:
http://LuLinniu/NotOffline
NotOffline.asp
*
FALLBACK:
online.js locale.js
CACHE:
newhellow.html
newhellow.js

在manifest文件中,第一行必须是CACHE MANIFEST,以把文本的作用告诉浏览器,即对本地缓存中的资源文件进行具体设置。
同时真正运行离线web应用程序时,需要对服务器进行配置,让服务器支持text/cache-manifest这个mime类型。

在指定文件源文件时可以把资源文件分为三类,CACHE、NETWORK、FALLBACK

复制代码
代码如下:
</p> <p>在CACHE类别中指定需要被缓存在本地的资源文件,为某个页面指定需要本地缓存的资源文件时,不需要把这个页面本身指定在CACHE类别中,
因为如果一个页面具有manifest文件,浏览器会自动对该页面进行本地缓存</p> <p>NETWORK类别为显式指定不进行缓存的资源文件,这些文件只有建立服务器端链接才能访问,本例使用通配符*表示没有进行记录的都不缓存</p> <p>FALLBACK类别中的每行中指定两个资源文件,第一个资源文件为能够在线访问时使用的资源文件,第二个为不能在线访问时使用的本地缓存文件

浏览器与服务器交互过程

当使用离线web应用程序进行工作时,有必要了解浏览器与服务器之间的交互过程:

复制代码
代码如下:

比如一个http://LuLingniu,以index.htm为主页,该主页使用index.manifest,
在文件中缓存index.htm,hello.js,hello.jpg,首次访问时流程如下:
浏览器请求url
服务器返回index.htm首页
浏览器解析index.htm网页,请求页面上所有资源文件
服务器返回资源文件
浏览器处理manifest文件,请求manifest中需要缓存的文件,即使请求过亦会再请求
服务器返回需要缓存的文件
浏览器对本地缓存进行更新,存入资源文件,并触发一个事件通知本地缓存更新</p> <p>再次打开该URL
请求url
浏览器发现页面被缓存,于是使用本地缓存文件
解析文件
浏览器像服务器请求manifest文件
服务器返回304,通知manifest文件没有变化(若是改变将会有所不同)

applicationCache对象

该对象代表了本地缓存,可以用它来通知用户本地缓存已经被更新,也允许手动更新本地缓存。

前面当浏览器对本地缓存做了更新装入新资源文件时,会触发applicationCache对象的updateready事件,通知本地缓存已被修改,然后提示用户手动刷新页面。
swapCache

swapCache方法用来手动执行本地缓存的更新,它只能在applicationCache对象的updateReady事件触发时调用,

即当资源文件发生改变时,可使用此方法手工缓存更新。

HTML / CSS 相关文章推荐
css3气泡 css3关键帧动画创建的动态通知气泡
Feb 26 HTML / CSS
推荐一些比较有用的css3新属性
Nov 11 HTML / CSS
使用css3实现的tab选项卡代码分享
Dec 09 HTML / CSS
CSS Grid布局教程之网格单元格布局
Dec 30 HTML / CSS
8款使用 CSS3 实现超炫的 Loading(加载)的动画效果
Mar 17 HTML / CSS
详解通过变换矩阵实现canvas的缩放功能
Jan 14 HTML / CSS
html5 canvas 使用示例
Oct 22 HTML / CSS
HTML5 语音搜索(淘宝店语音搜素)
Jan 03 HTML / CSS
html5 利用canvas实现超级玛丽简单动画
Sep 06 HTML / CSS
实例讲解利用HTML5 Canvas API操作图形旋转的方法
Mar 22 HTML / CSS
html5实现输入框fixed定位在屏幕最底部兼容性
Jul 03 HTML / CSS
详解CSS故障艺术
May 25 HTML / CSS
HTML5 本地存储之如果没有数据库究竟会怎样
Apr 25 #HTML / CSS
HTML5 通信API 跨域门槛将不再高、数据推送也不再是梦
Apr 25 #HTML / CSS
基于HTML5 FileSystem API的使用介绍
Apr 24 #HTML / CSS
HTML5 绘制图像(上)之:关于canvas元素引领下一代web页面的问题
Apr 24 #HTML / CSS
HTML5 form标签之解放表单验证、增加文件上传、集成拖放的使用方法
Apr 24 #HTML / CSS
HTML5 Web Workers之网站也能多线程的实现
Apr 24 #HTML / CSS
HTML5组件Canvas实现图像灰度化(步骤+实例效果)
Apr 22 #HTML / CSS
You might like
WordPress判断用户是否登录的代码
2011/03/17 PHP
php数组声明、遍历、数组全局变量使用小结
2013/06/05 PHP
php脚本守护进程原理与实现方法详解
2017/07/20 PHP
JQuery 网站换肤功能实现代码
2009/11/02 Javascript
JS 判断undefined的实现代码
2009/11/26 Javascript
JavaScript实现twitter puddles算法实例
2014/12/06 Javascript
基于javascript实现漂亮的页面过渡动画效果附源码下载
2015/10/26 Javascript
模仿password输入框的实现代码
2016/06/07 Javascript
nodejs搭建本地服务器并访问文件的方法
2017/03/03 NodeJs
jQuery+ajax实现局部刷新的两种方法
2017/06/08 jQuery
JS去掉字符串前后空格、阻止表单提交的实现代码
2017/06/08 Javascript
Vue官方文档梳理之全局配置
2017/11/22 Javascript
js实现的格式化数字和金额功能简单示例
2019/07/30 Javascript
Vue 数组和对象更新,但是页面没有刷新的解决方式
2019/11/09 Javascript
vue使用swiper实现中间大两边小的轮播图效果
2019/11/24 Javascript
JS面向对象编程实现的Tab选项卡案例详解
2020/03/03 Javascript
微信小程序实现时间戳格式转换
2020/07/20 Javascript
在react-antd中弹出层form内容传递给父组件的操作
2020/10/24 Javascript
Python中的rfind()方法使用详解
2015/05/19 Python
Python的Django框架中URLconf相关的一些技巧整理
2015/07/18 Python
Tornado Web Server框架编写简易Python服务器
2018/07/28 Python
Python + Requests + Unittest接口自动化测试实例分析
2019/12/12 Python
python中selenium库的基本使用详解
2020/07/31 Python
python3爬虫中多线程进行解锁操作实例
2020/11/25 Python
Python实现微信表情包炸群功能
2021/01/28 Python
浅谈HTML5 FileReader分布读取文件以及其方法简介
2017/11/09 HTML / CSS
VIVOBAREFOOT赤脚鞋:让您的脚做自然的事情
2017/06/01 全球购物
美国眼镜网站:LensCrafters
2020/01/19 全球购物
家乐福台湾线上购物网:Carrefour台湾
2020/09/15 全球购物
Internet体系结构
2014/12/21 面试题
请介绍一下WSDL的文档结构
2013/03/17 面试题
连锁酒店店长职责范本
2014/02/13 职场文书
目标责任书格式
2014/07/28 职场文书
观看信仰心得体会
2014/09/04 职场文书
化工见习报告范文
2014/10/31 职场文书
《浅水洼里的小鱼》教学反思
2016/02/16 职场文书