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


目录
相关文章
|
4月前
|
JSON Dart 安全
Flutter App混淆加固、保护与优化原理
Flutter App混淆加固、保护与优化原理
54 0
|
4月前
|
移动开发 小程序 JavaScript
Uniapp 中,能够同时兼容H5、web、app、微信小程序的引入高德地图的语法格式
Uniapp 中,能够同时兼容H5、web、app、微信小程序的引入高德地图的语法格式
110 0
|
4天前
|
XML 开发框架 .NET
C#/ASP.NET应用程序配置文件app.config/web.config的增、删、改操作
C#/ASP.NET应用程序配置文件app.config/web.config的增、删、改操作
|
13天前
|
缓存 移动开发 前端开发
【专栏:HTML与CSS前端技术趋势篇】HTML与CSS在PWA(Progressive Web Apps)中的应用
【4月更文挑战第30天】PWA(Progressive Web Apps)结合现代Web技术,提供接近原生应用的体验。HTML在PWA中构建页面结构和内容,响应式设计、语义化标签、Manifest文件和离线页面的创建都离不开HTML。CSS则用于定制主题样式、实现动画效果、响应式布局和管理字体图标。两者协同工作,保证PWA在不同设备和网络环境下的快速、可靠和一致性体验。随着前端技术进步,HTML与CSS在PWA中的应用将更广泛。
|
16天前
|
Web App开发 缓存 前端开发
【专栏】探索前端技术WebAssembly和Progressive Web Apps(PWA)如何塑造前端开发的未来
【4月更文挑战第27天】本文探讨了WebAssembly和Progressive Web Apps(PWA)如何塑造前端开发的未来。WebAssembly是一种低级字节码格式,允许在浏览器中运行接近原生性能的代码,解决JavaScript在高性能计算上的局限。PWA则通过Service Workers等技术提升网站的离线使用和性能,提供类似原生应用的体验。这两项技术的崛起将使前端开发更高效、多样化,并推动Web应用向更离线化和本地化发展。随着5G和物联网的发展,前端技术将在边缘计算和智能设备中发挥更大作用。开发者需持续学习适应新技术,以应对这个快速变化的领域。
|
2月前
|
测试技术 Android开发
快速上手App自动化测试利器,Toast原理解析及操作实例
`Toast`是Android中的轻量级通知,短暂显示在屏幕任意位置,1-2秒后自动消失,不获取焦点且不可点击。Appium通过uiautomator2在控件树中处理Toast。在测试中,可设置隐式等待,利用XPath或Accessibility ID定位Toast元素进行检测和验证。示例代码展示了如何初始化driver,点击触发Toast,以及如何定位并读取Toast文本。
28 3
|
2月前
|
前端开发 JavaScript 安全
深入探索 Qt6 web模块 WebEngineCore:从基础原理到高级应用与技巧
深入探索 Qt6 web模块 WebEngineCore:从基础原理到高级应用与技巧
100 0
|
2月前
|
Web App开发 存储 搜索推荐
谈谈 Web 应用里界面图标 Icon 的显示原理
谈谈 Web 应用里界面图标 Icon 的显示原理
29 0
|
3月前
|
机器学习/深度学习 缓存 前端开发
用纯python写web app:Streamlit
一句话,Streamlit是一个可以用python编写web app的库,可以方便的动态展示你的机器学习的项目。【2月更文挑战第9天】
97 0
|
3月前
|
搜索推荐
手写字生成器(app+原理)
手写字生成器(app+原理)
30 0