pbootcms网站模板|日韩1区2区|织梦模板||网站源码|日韩1区2区|jquery建站特效-html5模板网

HTML5 離線應用之打造零請求、無流量網站的解決

HTML5 離線應用之打造零請求、無流量網站的解決方法_html5教程技巧HTML5中文學習網,是中國最大的HTML5中文門戶,為廣大HTML5愛好者提供各種HTML5資料,包括HTML5網站、HTML5資訊、HTML5應用、
點評:今天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類別中的每行中指定兩個資源文件,第一個資源文件為能夠在線訪問時使用的資源文件,第二個為不能在線訪問時使用的本地緩存文件

瀏覽器與服務器交互過程

當使用離線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事件觸發時調用,

即當資源文件發生改變時,可使用此方法手工緩存更新。


【網站聲明】本站除付費源碼經過測試外,其他素材未做測試,不保證完整性,網站上部分源碼僅限學習交流,請勿用于商業用途。如損害你的權益請聯系客服QQ:2655101040 給予處理,謝謝支持。

相關文檔推薦

這篇文章主要介紹了有關HTML5頁面在iPhoneX適配問題,需要的朋友可以參考下
本篇文章主要介紹了html5中canvas圖表實現柱狀圖的示例,本文使用canvas來實現一個圖表,小編覺得挺不錯的,現在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
Adobe公司出品的多媒體處理軟件產品線較多,涵蓋了音視頻編輯、圖像處理、平面設計、影視后期等領域。這篇文章主要介紹了Adobe Html5 Extension開發初體驗圖文教程,非常不錯,需要的朋
這篇文章主要介紹了基于HTML5的WebGL經典3D虛擬機房漫游動畫,需要的朋友可以參考下
這篇文章主要介紹了html5實現移動端適配完美寫法,需要的朋友可以參考下
本篇文章主要介紹了HTML5響應式(自適應)網頁設計的實現,小編覺得挺不錯的,現在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
主站蜘蛛池模板: 上海地磅秤|电子地上衡|防爆地磅_上海地磅秤厂家–越衡称重 | 尼龙PA610树脂,尼龙PA612树脂,尼龙PA1010树脂,透明尼龙-谷骐科技【官网】 | 飞利浦LED体育场灯具-吸顶式油站灯-飞利浦LED罩棚灯-佛山嘉耀照明有限公司 | 桁架机器人_桁架机械手_上下料机械手_数控车床机械手-苏州清智科技装备制造有限公司 | 活性炭-蜂窝-椰壳-柱状-粉状活性炭-河南唐达净水材料有限公司 | SRRC认证_电磁兼容_EMC测试整改_FCC认证_SDOC认证-深圳市环测威检测技术有限公司 | 火锅底料批发-串串香技术培训[川禾川调官网] | 存包柜厂家_电子存包柜_超市存包柜_超市电子存包柜_自动存包柜-洛阳中星 | 广东西屋电气有限公司-广东西屋电气有限公司 | 西装定制/做厂家/公司_西装订做/制价格/费用-北京圣达信西装 | 锂电叉车,电动叉车_厂家-山东博峻智能科技有限公司 | 全自动固相萃取仪_高通量真空平行浓缩仪-勤业永为 | 点胶机_点胶阀_自动点胶机_智能点胶机_喷胶机_点胶机厂家【欧力克斯】 | 不锈钢电动球阀_气动高压闸阀_旋塞疏水调节阀_全立阀门-来自温州工业阀门巨头企业 | 热熔胶网膜|pes热熔网膜价格|eva热熔胶膜|热熔胶膜|tpu热熔胶膜厂家-苏州惠洋胶粘制品有限公司 | 盘扣式脚手架-附着式升降脚手架-移动脚手架,专ye承包服务商 - 苏州安踏脚手架工程有限公司 | 氧化铝球_高铝球_氧化铝研磨球-淄博誉洁陶瓷新材料有限公司 | 哈尔滨京科脑康神经内科医院-哈尔滨治疗头痛医院-哈尔滨治疗癫痫康复医院 | 气密性检测仪_气密性检测设备_防水测试仪_密封测试仪-岳信仪器 | 大立教育官网-一级建造师培训-二级建造师培训-造价工程师-安全工程师-监理工程师考试培训 | 亿诺千企网-企业核心产品贸易| 奥因-光触媒除甲醛公司-除甲醛加盟公司十大品牌 | 抖音短视频运营_企业网站建设_网络推广_全网自媒体营销-东莞市凌天信息科技有限公司 | 赛尔特智能移动阳光房-阳光房厂家-赛尔特建筑科技(广东)有限公司 | 济南办公室装修-厂房装修-商铺装修-工装公司-山东鲁工装饰设计 | 行星齿轮减速机,减速机厂家,山东减速机-淄博兴江机械制造 | 断桥铝破碎机_铝合金破碎机_废铁金属破碎机-河南鑫世昌机械制造有限公司 | 查分易-成绩发送平台官网| 盘装氧量分析仪-防爆壁挂氧化锆分析仪-安徽吉帆仪表有限公司 | ERP企业管理系统永久免费版_在线ERP系统_OA办公_云版软件官网 | 工业冷却塔维修厂家_方形不锈钢工业凉水塔维修改造方案-广东康明节能空调有限公司 | 全自动包装秤_全自动上袋机_全自动套袋机_高位码垛机_全自动包装码垛系统生产线-三维汉界机器(山东)股份有限公司 | 电液推杆生产厂家|电动推杆|液压推杆-扬州唯升机械有限公司 | 水质监测站_水质在线分析仪_水质自动监测系统_多参数水质在线监测仪_水质传感器-山东万象环境科技有限公司 | 硅胶制品-硅橡胶制品-东莞硅胶制品厂家-广东帝博科技有限公司 | 大型果蔬切片机-水果冬瓜削皮机-洗菜机切菜机-肇庆市凤翔餐饮设备有限公司 | 超声波流量计_流量标准装置生产厂家 _河南盛天精密测控 | 加热制冷恒温循环器-加热制冷循环油浴-杭州庚雨仪器有限公司 | 食品机械专用传感器-落料放大器-低价接近开关-菲德自控技术(天津)有限公司 | 健康管理师报考条件,考试时间,报名入口—首页 | 刹车盘机床-刹车盘生产线-龙口亨嘉智能装备|