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


目录
相关文章
|
1月前
|
前端开发 安全 JavaScript
2025年,Web3开发学习路线全指南
本文提供了一条针对Dapp应用开发的学习路线,涵盖了Web3领域的重要技术栈,如区块链基础、以太坊技术、Solidity编程、智能合约开发及安全、web3.js和ethers.js库的使用、Truffle框架等。文章首先分析了国内区块链企业的技术需求,随后详细介绍了每个技术点的学习资源和方法,旨在帮助初学者系统地掌握Dapp开发所需的知识和技能。
2025年,Web3开发学习路线全指南
|
2月前
|
设计模式 前端开发 数据库
Python Web开发:Django框架下的全栈开发实战
【10月更文挑战第27天】本文介绍了Django框架在Python Web开发中的应用,涵盖了Django与Flask等框架的比较、项目结构、模型、视图、模板和URL配置等内容,并展示了实际代码示例,帮助读者快速掌握Django全栈开发的核心技术。
206 45
|
2月前
|
存储 缓存 监控
后端开发中的缓存机制:深度解析与最佳实践####
本文深入探讨了后端开发中不可或缺的一环——缓存机制,旨在为读者提供一份详尽的指南,涵盖缓存的基本原理、常见类型(如内存缓存、磁盘缓存、分布式缓存等)、主流技术选型(Redis、Memcached、Ehcache等),以及在实际项目中如何根据业务需求设计并实施高效的缓存策略。不同于常规摘要的概述性质,本摘要直接点明文章将围绕“深度解析”与“最佳实践”两大核心展开,既适合初学者构建基础认知框架,也为有经验的开发者提供优化建议与实战技巧。 ####
|
2月前
|
存储 前端开发 JavaScript
如何在项目中高效地进行 Web 组件化开发
高效地进行 Web 组件化开发需要从多个方面入手,通过明确目标、合理规划、规范开发、加强测试等一系列措施,实现组件的高效管理和利用,从而提高项目的整体开发效率和质量,为用户提供更好的体验。
36 7
|
2月前
|
开发框架 搜索推荐 数据可视化
Django框架适合开发哪种类型的Web应用程序?
Django 框架凭借其强大的功能、稳定性和可扩展性,几乎可以适应各种类型的 Web 应用程序开发需求。无论是简单的网站还是复杂的企业级系统,Django 都能提供可靠的支持,帮助开发者快速构建高质量的应用。同时,其活跃的社区和丰富的资源也为开发者在项目实施过程中提供了有力的保障。
|
2月前
|
开发框架 JavaScript 前端开发
TypeScript 是一种静态类型的编程语言,它扩展了 JavaScript,为 Web 开发带来了强大的类型系统、组件化开发支持、与主流框架的无缝集成、大型项目管理能力和提升开发体验等多方面优势
TypeScript 是一种静态类型的编程语言,它扩展了 JavaScript,为 Web 开发带来了强大的类型系统、组件化开发支持、与主流框架的无缝集成、大型项目管理能力和提升开发体验等多方面优势。通过明确的类型定义,TypeScript 能够在编码阶段发现潜在错误,提高代码质量;支持组件的清晰定义与复用,增强代码的可维护性;与 React、Vue 等框架结合,提供更佳的开发体验;适用于大型项目,优化代码结构和性能。随着 Web 技术的发展,TypeScript 的应用前景广阔,将继续引领 Web 开发的新趋势。
45 2
|
2月前
|
前端开发 API 开发者
Python Web开发者必看!AJAX、Fetch API实战技巧,让前后端交互如丝般顺滑!
在Web开发中,前后端的高效交互是提升用户体验的关键。本文通过一个基于Flask框架的博客系统实战案例,详细介绍了如何使用AJAX和Fetch API实现不刷新页面查看评论的功能。从后端路由设置到前端请求处理,全面展示了这两种技术的应用技巧,帮助Python Web开发者提升项目质量和开发效率。
60 1
|
2月前
|
XML 安全 PHP
PHP与SOAP Web服务开发:基础与进阶教程
本文介绍了PHP与SOAP Web服务的基础和进阶知识,涵盖SOAP的基本概念、PHP中的SoapServer和SoapClient类的使用方法,以及服务端和客户端的开发示例。此外,还探讨了安全性、性能优化等高级主题,帮助开发者掌握更高效的Web服务开发技巧。
|
2月前
|
安全 数据库 开发者
Python Web开发:Django框架下的全栈开发实战
【10月更文挑战第26天】本文详细介绍了如何在Django框架下进行全栈开发,包括环境安装与配置、创建项目和应用、定义模型类、运行数据库迁移、创建视图和URL映射、编写模板以及启动开发服务器等步骤,并通过示例代码展示了具体实现过程。
74 2
WK
|
2月前
|
安全 Java 编译器
C++和Java哪个更适合开发web网站
在Web开发领域,C++和Java各具优势。C++以其高性能、低级控制和跨平台性著称,适用于需要高吞吐量和低延迟的场景,如实时交易系统和在线游戏服务器。Java则凭借其跨平台性、丰富的生态系统和强大的安全性,广泛应用于企业级Web开发,如企业管理系统和电子商务平台。选择时需根据项目需求和技术储备综合考虑。
WK
122 0