移动web app开发-----application cache 离线缓存原理篇

简介:
         
         上篇文章中写了appcache的manifest文件如何书写,appcache的类型和状态,下面我们通过这篇文章来学习下appcache的下载和更新机制。

浏览器自动更新

1.假如入我们要访问一个网站的主页,它的html标签有个manifest属性。
2.页面从服务器端返回,包括动态资源和静态资源,同时静态资源会采用浏览器常规的缓存方式缓存起来。
3.当浏览器解析页面时,发现他的html标签有一个manifest属性,浏览器会在后台把manifest文件中要cache片段所指定
的资源下载并缓存在application cache中(在这种情况cache中的资源会再次下载)
4.这时候如果你把浏览器设置为离线浏览【 Regular caching is also in effect, so watch for false positives here.
你在manifest文件的network片段中指定需要联网访问的资源,这时会不可用,但是在cache片段的资源没有影响,
注意:在opare和firefox中可以通过【文件---脱机】工作,把浏览器设为离线模式,在chrome和safari中没有这样的设置,
但是可以通过代理来达到同样的目的
4.1 这时候你访问cache中的资源,会直接从appcache中取得缓存中的内容
4.2这时候你访问network中的资源,会显示fallback中指定的资源

下面你如果取消离线模式,重新连上网,后续的过程如下
1.返回线上模式
2.你在服务器端改变一个文件的内容【如cache.html】
3.这时候重新加载cache.html,页面上会显示从appcache中加载的原来的内容,即使你联网了,内容仍然没有改变,这是因为
一旦一个文件在appcache中缓存,以后会永远呈现第一次记载的内容,
4.这时候浏览器会检查manifest文件是否更新,如果没有更新,就不会做任何事。

注意:只有manifest文件改变,缓存中要更新的文件才能更新

5.更新menifest文件

最佳实践:一般通过注释的方式为manifest文件增加版本号,一旦文件更改,就需要修改版本号。

6.你重新加载cache.html
7.浏览器仍然从缓存中加载老的内容,缓存中更改的内容这时并没有呈现。
8.浏览器检查manifest是否更新,这时manifeset文件更新了,他会通过浏览器常规缓存检查文件的状态,有可能是304或者200
注意: 这里检查所有文件的状态,比较耗性能,这里有个比较不错的 解决方案
9.这时缓存会被重新更新,当下次再从新刷新页面,就会看到更新的内容。

脚本手动更新

在上篇文章中我们介绍了appcache的可能的各种状态,那么当appcache处于这些状态时会触发哪些事件呢,其实浏览器已经向我们暴漏了相应 的事件,通过监听这些事件我们做相应的处理:


同样我们可以通过applicationCache的status属性拿到appcache的各个状态:

最后就可以通过监听application cache的状态和属性来手动更新缓存


注意:通过swapCache()方法更新appcache以后必须再重新加载页面才能真正看到更新的内容。

到此为止我们已经介绍完了所有有关appcache的内容,在下篇文章中我们回来看看在实际的开发中到底如何才能更好的使用
application cache.


目录
相关文章
|
8天前
|
移动开发 小程序 Android开发
基于 uni-app 开发的废品回收类多端应用功能与界面说明
本文将对一款基于 uni-app 开发的废品回收类多端应用,从多端支持范围、核心功能模块及部分界面展示进行客观说明,相关资源信息也将一并呈现。
35 0
|
2月前
|
人工智能 文字识别 小程序
旅游社用什么工具收报名 + 资料?不开发 App 也能自动收集信息
本文探讨了旅游行业中报名信息收集的常见痛点及解决方案,重点介绍了二维码表单工具在提升信息收集效率、简化操作流程方面的优势。通过对比多种工具,分析其适用场景与实际应用逻辑,为一线旅游从业者提供高效、低成本的执行参考。
|
3月前
|
容器
HarmonyOS NEXT仓颉开发语言实战案例:外卖App
仓颉语言实战分享,教你如何用仓颉开发外卖App界面。内容包括页面布局、导航栏自定义、搜索框实现、列表模块构建等,附完整代码示例。轻松掌握Scroll、List等组件使用技巧,提升HarmonyOS应用开发能力。
|
3月前
|
IDE 开发工具 开发者
使用DevEcoStudio 开发、编译鸿蒙 NEXT_APP 以及使用中文插件
# 使用DevEcoStudio 开发、编译鸿蒙 NEXT_APP 以及使用中文插件 #鸿蒙开发工具 #DevEco Studio
312 1
|
3月前
|
人工智能 小程序 JavaScript
【一步步开发AI运动APP】十、微调优化内置运动分析器,灵活适配不同的应用场景
本文介绍了如何通过【一步步开发AI运动APP】系列博文,利用`ISportOptimizer`对内置运动分析器进行微调优化。相比小程序,APP框架(如uni-app)因技术差异,无法直接修改运动分析器参数,因此提供了统一的优化机制。开发者可通过`ISportOptimizer`获取和更新检测规则、动作样本等,灵活适应不同场景需求,如全民运动赛事的宽松模式或学生体测的严格模式。文中还提供了示例代码,展示如何对具体运动项目(如仰卧起坐)进行优化。需要注意的是,微调优化适用于标准动作的小范围调整,若动作变化过大(如花式跳绳),可期待后续自定义扩展功能。
|
3月前
|
容器
HarmonyOS NEXT仓颉开发语言实战案例:健身App
本期分享一个健身App首页的布局实现,顶部采用Stack容器实现重叠背景与偏移效果,列表部分使用List结合Scroll实现可滚动内容。代码结构清晰,适合学习HarmonyOS布局技巧。
|
3月前
|
容器
HarmonyOS NEXT仓颉开发语言实战案例:银行App
仓颉语言银行App项目分享,页面布局采用List容器,实现沉浸式体验与模块化设计。顶部资产模块结合Stack与Row布局,背景图与内容分离,代码清晰易懂;功能按钮部分通过负边距实现上移效果,圆角仅保留顶部;热门推荐使用header组件,结构更规范。整体代码风格与ArkTS相似,但细节更灵活,适合金融类应用开发。
|
13天前
|
存储 开发者 容器
鸿蒙 HarmonyOS NEXT星河版APP应用开发-ArkTS面向对象及组件化UI开发使用实例
本文介绍了ArkTS语言中的Class类、泛型、接口、模块化、自定义组件及状态管理等核心概念,并结合代码示例讲解了对象属性、构造方法、继承、静态成员、访问修饰符等内容,同时涵盖了路由管理、生命周期和Stage模型等应用开发关键知识点。
128 0
鸿蒙 HarmonyOS NEXT星河版APP应用开发-ArkTS面向对象及组件化UI开发使用实例
|
13天前
鸿蒙 HarmonyOS NEXT星河版APP应用开发-阶段三
本文介绍了UI开发中的样式复用与组件构建技术,涵盖@Extend、@Styles和@Builder的使用方法,并通过Swiper轮播、Scroll滚动、Tabs导航等常用组件实现典型界面效果,结合生肖抽卡、小米轮播、回顶按钮等案例,展示实际应用技巧。
57 0
|
13天前
鸿蒙 HarmonyOS NEXT星河版APP应用开发-阶段二
本文介绍鸿蒙应用界面开发中的弹性布局(Flex)、绝对定位、层叠布局及ArkTS语法进阶,涵盖字符串拼接、类型转换、数组操作、条件与循环语句,并结合B站视频卡、支付宝首页等案例,深入讲解点击事件、状态管理与界面交互功能。
66 0
鸿蒙 HarmonyOS NEXT星河版APP应用开发-阶段二