HTML5 离线应用之打造零请求、无流量网站的解决方法
发布时间：2013-04-25 11:04:06 作者：佚名 
我要评论
我要评论今天Web应用程序已经很复杂了，以现在的发展，会将越来越复杂，但他有一个致命缺点，不能脱离internet链接，因此在HTML中新增了一API，它使用一个本地存储机制很好地解决了这个问题，为离线web应用铺平了道路
前言
今天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类别中的每行中指定两个资源文件，第一个资源文件为能够在线访问时使用的资源文件，第二个为不能在线访问时使用的本地缓存文件
因为如果一个页面具有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事件触发时调用，
即当资源文件发生改变时，可使用此方法手工缓存更新。
相关文章
这篇文章主要介绍了HTML5播放实现rtmp流直播,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-06-16
这篇文章主要介绍了html5用video标签流式加载的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习2020-05-20
物联网( IoT )，简单的理解就是物体之间通过互联网进行链接。这篇文章给大家介绍基于 HTML5 WebGL 实现的医疗物流系统，感兴趣的朋友跟随小编一起看看吧2019-10-08- 这篇文章主要介绍了Html5 实现微信分享及自定义内容的流程，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下2019-08-20
这篇文章主要介绍了HTML5 canvas 瀑布流文字效果的示例代码的相关资料,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-01-31- 这篇文章主要为大家介绍了HTML5移动端手机网站开发流程，想要进行移动端手机网站开发的朋友可以参考一下2016-04-25
- 一款网页瀑布流效果，可以实现图片的无限制加载。基于时下流行的HTML5技术编写而成，除了实现瀑布流，还加入了CSS5的图片修饰效果，比如图片的圆角边框、图片阴影立体效果2014-03-07
- 流星出现的时候，人们都喜欢对着它们许愿，因为传说对着流星许下愿望后，愿望就能实现，最近出于兴趣，制作一个拖尾效果，后来想到可以通过拖尾效果来实现一下流星雨的效果2013-08-06
这篇文章主要介绍了Html5之webcoekt播放JPEG图片流,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学2020-09-22
最新评论