• 售前

  • 售后

热门帖子
入门百科

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

[复制链接]
天一教育培训寐 显示全部楼层 发表于 2021-10-25 19:47:38 |阅读模式 打印 上一主题 下一主题
前言
今天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变乱触发时调用,
即当资源文件发生改变时,可利用此方法手工缓存更新。

帖子地址: 

回复

使用道具 举报

分享
推广
火星云矿 | 预约S19Pro,享500抵1000!
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

草根技术分享(草根吧)是全球知名中文IT技术交流平台,创建于2021年,包含原创博客、精品问答、职业培训、技术社区、资源下载等产品服务,提供原创、优质、完整内容的专业IT技术开发社区。
  • 官方手机版

  • 微信公众号

  • 商务合作