移动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.


目录
相关文章
|
3月前
|
JSON 小程序 JavaScript
uni-app开发微信小程序的报错[渲染层错误]排查及解决
uni-app开发微信小程序的报错[渲染层错误]排查及解决
813 7
|
3月前
|
小程序 JavaScript 前端开发
uni-app开发微信小程序:四大解决方案,轻松应对主包与vendor.js过大打包难题
uni-app开发微信小程序:四大解决方案,轻松应对主包与vendor.js过大打包难题
839 1
|
10天前
|
开发框架 小程序 前端开发
圈子社交app前端+后端源码,uniapp社交兴趣圈子开发,框架php圈子小程序安装搭建
本文介绍了圈子社交APP的源码获取、分析与定制,PHP实现的圈子框架设计及代码编写,以及圈子小程序的安装搭建。涵盖环境配置、数据库设计、前后端开发与接口对接等内容,确保平台的安全性、性能和功能完整性。通过详细指导,帮助开发者快速搭建稳定可靠的圈子社交平台。
108 18
|
6天前
|
JSON 供应链 搜索推荐
淘宝APP分类API接口:开发、运用与收益全解析
淘宝APP作为国内领先的购物平台,拥有丰富的商品资源和庞大的用户群体。分类API接口是实现商品分类管理、查询及个性化推荐的关键工具。通过开发和使用该接口,商家可以构建分类树、进行商品查询与搜索、提供个性化推荐,从而提高销售额、增加商品曝光、提升用户体验并降低运营成本。此外,它还能帮助拓展业务范围,满足用户的多样化需求,推动电商业务的发展和创新。
25 5
|
6天前
|
移动开发 安全 搜索推荐
圈子社交系统APP,同城本地圈子论坛开发,让身边的人沟通更加紧密
圈子社交系统APP是一款基于社交网络的移动应用,用户可创建、加入和管理兴趣圈子。主要功能包括:动态分享与交流、实时聊天、会员体系与身份认证、活动策划等。该APP注重个性化定制、社交关系深化、隐私安全及跨平台互联,提供丰富的社交体验。
|
9天前
鸿蒙语言开发 几十套鸿蒙ArkTs app毕业设计及课程作业
鸿蒙语言开发 几十套鸿蒙ArkTs app毕业设计及课程作业
18 1
|
18天前
|
JSON 缓存 前端开发
HarmonyOS NEXT 5.0鸿蒙开发一套影院APP(附带源码)
本项目基于HarmonyOS NEXT 5.0开发了一款影院应用程序,主要实现了电影和影院信息的展示功能。应用包括首页、电影列表、影院列表等模块。首页包含轮播图与正在热映及即将上映的电影切换显示;电影列表模块通过API获取电影数据并以网格形式展示,用户可以查看电影详情;影院列表则允许用户选择城市后查看对应影院信息,并支持城市选择弹窗。此外,项目中还集成了Axios用于网络请求,并进行了二次封装以简化接口调用流程,同时添加了请求和响应拦截器来处理通用逻辑。整体代码结构清晰,使用了组件化开发方式,便于维护和扩展。 该简介概括了提供的内容,但请注意实际开发中还需考虑UI优化、性能提升等方面的工作。
77 11
|
15天前
|
前端开发 数据库 UED
uniapp开发,前后端分离的陪玩系统优势,陪玩app功能特点,线上聊天线下陪玩,只要4800
前后端分离的陪玩系统将前端(用户界面)和后端(服务器逻辑)分开开发,前者负责页面渲染与用户交互,后者处理数据并提供接口。该架构提高开发效率、优化用户体验、增强可扩展性和稳定性,降低维护成本,提升安全性。玩家可发布陪玩需求,陪玩人员发布服务信息,支持在线聊天、预约及线下陪玩功能,满足多样化需求。[演示链接](https://www.51duoke.cn/games/?id=7)
|
21天前
|
供应链 搜索推荐 API
1688APP原数据API接口的开发、应用与收益(一篇文章全明白)
1688作为全球知名的B2B电商平台,通过开放的原数据API接口,为开发者提供了丰富的数据资源,涵盖商品信息、交易数据、店铺信息、物流信息和用户信息等。本文将深入探讨1688 APP原数据API接口的开发、应用及其带来的商业收益,包括提升流量、优化库存管理、增强用户体验等方面。
111 6
|
22天前
|
机器学习/深度学习 前端开发 算法
婚恋交友系统平台 相亲交友平台系统 婚恋交友系统APP 婚恋系统源码 婚恋交友平台开发流程 婚恋交友系统架构设计 婚恋交友系统前端/后端开发 婚恋交友系统匹配推荐算法优化
婚恋交友系统平台通过线上互动帮助单身男女找到合适伴侣,提供用户注册、个人资料填写、匹配推荐、实时聊天、社区互动等功能。开发流程包括需求分析、技术选型、系统架构设计、功能实现、测试优化和上线运维。匹配推荐算法优化是核心,通过用户行为数据分析和机器学习提高匹配准确性。
69 3
下一篇
开通oss服务