移动web app开发-----application cache 离线缓存应用篇

简介:
在移动web app应用中,请求数非常昂贵,请求数过多不但耗电,耗流量,同时速度也非常的慢,为了减少请求,加快资源的加载速度,使用application cache,是一个比较不错的方案,下面通过三篇文章来全面的介绍application cache,第一篇为应用篇,第二篇为原理篇,第三篇为高级进阶篇。本篇内容主要包括三个方面
  • manifest文件书写
  • application cache类型
  • application cache状态
     
manifest文件书写

要想使用application cache,首先必须为html标签添加manifest属性,该属性的值【 example.appcache】是一个位于服务器端的文件,一般可以把这个文件叫做manifest文件。
<html manifest="example.appcache"></html> 

example.appcache文件路径可以是绝对路径和相对路径,绝对路径必须和网站同域,它的 MIME类型必须为 text/cache-manifest,文件的格式为utf-8, 文件的基本内容,如下所示:
CACHE MANIFEST
# v1 2011-08-14
# This is another comment
index.html
cache.html
style.css
image1.png

# Use from network if available
NETWORK:
network.html

# Fallback content
FALLBACK:
/ fallback.html
   上面的内容有几个需要主要的地方:
          1. 第一行必须包含 CACHE MANIFEST,这两个单词之间是一个 U+0020这样的空格,后面可以有0个或者多个空格,其余的文本字符都会被忽略
     2. 文件中可以包含空行,注释,片段头和片段数据,这些都是可选的
          空行:可以包含0个或者多个空白或者tab字符。
          注释:以#开头
          片段头: CACHE【要缓存的资源】; NETWORK【必选请求网络的资源】, FALLBACK【当资源请求失败时,需要转向的url】
          片段数据:在CACHE片段中,每一行必须为一个合法的 URI或者 IRI reference to a resource to cache ,每一行的开始或者结束可以有空               格;NETWORK片段中,每一行必须为一个合法的 URI 或者 IRI reference to a resource to fetch from the network ,可以使用【*】通配符;在 FALLBACK片段中, 每一行必须为一个合法的 URI  或者IRI reference to a resource,当网络不可用时,需要跳转的资源。文件中的相对地址是相对example.appcache的地址, 而不是相对于当前文档的地址。
     3.第二行是一个注释,表示是一个版本号,一般会使用一个时间戳,这个版本号不是必须的,但是一般情况下就需要,至于为什么下篇文章会说明。


application cache类型:


Master entries【表示含有manifest属性的文档】
Explicit entries【位于CACHE片段中列举的资源】
Network entries【位于NETWORK片段列举的资源】
Fallback entries【位于FALLBACK中列举的资源】

注意必须至少包含下面一种类型, 同一个资源可以被标记为多种类型

application cache状态:

UNCACHED 表示app cache未被初始化 IDLE app cache没有在当前更新的进程中。 CHECKING 表示manifest文件正在被获取和检查更新状态。 DOWNLOADING 资源已经被下载,并添加到缓存中,这时还没有更新缓存。 UPDATEREADY 表示一个新版本的app cache可用了,同时会触发一个update ready事件。 OBSOLETE
          所有缓存的资源都已经过时
到此为止application cache的应用相信大家肯定是没有问题的了,那么缓存是如何更新的,我们如何能够知道缓存的状态,带着这些问题,敬请关注下篇文章【application cache 离线缓存原理篇】

感谢:


目录
相关文章
|
2月前
|
存储 监控 安全
如何在Python Web开发中确保应用的安全性?
如何在Python Web开发中确保应用的安全性?
|
2月前
|
前端开发 JavaScript
探索现代Web应用的微前端架构
【10月更文挑战第40天】在数字时代的浪潮中,Web应用的发展日益复杂多变。微前端架构作为一种新兴的设计理念,正逐步改变着传统的单一前端开发模式。本文将深入探讨微前端的核心概念、实现原理及其在实际项目中的应用,同时通过一个简单的代码示例,揭示如何将一个庞大的前端工程拆分成小而美的模块,进而提升项目的可维护性、可扩展性和开发效率。
|
21天前
|
弹性计算 Java 关系型数据库
Web应用上云经典架构实践教学
Web应用上云经典架构实践教学
Web应用上云经典架构实践教学
|
29天前
|
Kubernetes 安全 Devops
有效抵御网络应用及API威胁,聊聊F5 BIG-IP Next Web应用防火墙
有效抵御网络应用及API威胁,聊聊F5 BIG-IP Next Web应用防火墙
63 10
有效抵御网络应用及API威胁,聊聊F5 BIG-IP Next Web应用防火墙
|
1月前
|
前端开发 安全 JavaScript
2025年,Web3开发学习路线全指南
本文提供了一条针对Dapp应用开发的学习路线,涵盖了Web3领域的重要技术栈,如区块链基础、以太坊技术、Solidity编程、智能合约开发及安全、web3.js和ethers.js库的使用、Truffle框架等。文章首先分析了国内区块链企业的技术需求,随后详细介绍了每个技术点的学习资源和方法,旨在帮助初学者系统地掌握Dapp开发所需的知识和技能。
2025年,Web3开发学习路线全指南
|
21天前
|
供应链 搜索推荐 API
1688APP原数据API接口的开发、应用与收益(一篇文章全明白)
1688作为全球知名的B2B电商平台,通过开放的原数据API接口,为开发者提供了丰富的数据资源,涵盖商品信息、交易数据、店铺信息、物流信息和用户信息等。本文将深入探讨1688 APP原数据API接口的开发、应用及其带来的商业收益,包括提升流量、优化库存管理、增强用户体验等方面。
111 6
|
21天前
|
弹性计算 Java 数据库
Web应用上云经典架构实战
本课程详细介绍了Web应用上云的经典架构实战,涵盖前期准备、配置ALB、创建服务器组和监听、验证ECS公网能力、环境配置(JDK、Maven、Node、Git)、下载并运行若依框架、操作第二台ECS以及验证高可用性。通过具体步骤和命令,帮助学员快速掌握云上部署的全流程。
|
2月前
|
存储 前端开发 JavaScript
如何在项目中高效地进行 Web 组件化开发
高效地进行 Web 组件化开发需要从多个方面入手,通过明确目标、合理规划、规范开发、加强测试等一系列措施,实现组件的高效管理和利用,从而提高项目的整体开发效率和质量,为用户提供更好的体验。
38 7
|
2月前
|
前端开发 JavaScript UED
在数字化时代,Web 应用性能优化尤为重要。本文探讨了CSS与HTML在提升Web性能中的关键作用及未来趋势
在数字化时代,Web 应用性能优化尤为重要。本文探讨了CSS与HTML在提升Web性能中的关键作用及未来趋势,包括样式表优化、DOM操作减少、图像优化等技术,并分析了电商网站的具体案例,强调了技术演进对Web性能的深远影响。
44 5
|
2月前
|
机器学习/深度学习 人工智能 JavaScript
JavaScript和TypeScript的未来发展趋势及其在Web开发中的应用前景
本文探讨了JavaScript和TypeScript的未来发展趋势及其在Web开发中的应用前景。JavaScript将注重性能优化、跨平台开发、AI融合及WebAssembly整合;TypeScript则强调与框架整合、强类型检查、前端工程化及WebAssembly的深度结合。两者结合发展,特别是在Vue 3.0中完全采用TypeScript编写,预示着未来的Web开发将更加高效、可靠。
54 4
下一篇
开通oss服务