移动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 离线缓存原理篇】

感谢:


目录
相关文章
|
17天前
|
前端开发 JavaScript 关系型数据库
从前端到后端:构建现代化Web应用的技术探索
在当今互联网时代,Web应用的开发已成为了各行各业不可或缺的一部分。从前端到后端,这篇文章将带你深入探索如何构建现代化的Web应用。我们将介绍多种技术,包括前端开发、后端开发以及各种编程语言(如Java、Python、C、PHP、Go)和数据库,帮助你了解如何利用这些技术构建出高效、安全和可扩展的Web应用。
|
22天前
|
监控 JavaScript 前端开发
《理解 WebSocket:Java Web 开发的实时通信技术》
【4月更文挑战第4天】WebSocket是Java Web实时通信的关键技术,提供双向持久连接,实现低延迟、高效率的实时交互。适用于聊天应用、在线游戏、数据监控和即时通知。开发涉及服务器端实现、客户端连接及数据协议定义,注意安全、错误处理、性能和兼容性。随着实时应用需求增加,WebSocket在Java Web开发中的地位将更加重要。
|
2天前
|
设计模式 存储 前端开发
Java从入门到精通:2.2.1学习Java Web开发,了解Servlet和JSP技术,掌握MVC设计模式
Java从入门到精通:2.2.1学习Java Web开发,了解Servlet和JSP技术,掌握MVC设计模式
|
7天前
|
JSON Java fastjson
Spring Boot 底层级探索系列 04 - Web 开发(2)
Spring Boot 底层级探索系列 04 - Web 开发(2)
16 0
|
7天前
|
安全 编译器 PHP
PHP 8.1版本发布:引领Web开发新潮流
PHP编程语言一直是Web开发的主力军,而最新发布的PHP 8.1版本则为开发者们带来了更多创新和便利。本文将介绍PHP 8.1版本的主要特性,包括更快的性能、新的语言功能和增强的安全性,以及如何利用这些功能来提升Web应用程序的质量和效率。
|
9天前
|
缓存 负载均衡 数据库
优化后端性能:提升Web应用响应速度的关键策略
在当今数字化时代,Web应用的性能对于用户体验至关重要。本文探讨了如何通过优化后端架构和技术手段,提升Web应用的响应速度。从数据库优化、缓存机制到异步处理等多个方面进行了深入分析,并提出了一系列实用的优化策略,以帮助开发者更好地应对日益增长的用户访问量和复杂的业务需求。
15 1
|
9天前
|
缓存 监控 数据库
Flask性能优化:打造高性能Web应用
【4月更文挑战第16天】本文介绍了提升Flask应用性能的七大策略:优化代码逻辑,减少数据库查询,使用WSGI服务器(如Gunicorn、uWSGI),启用缓存(如Flask-Caching),优化数据库操作,采用异步处理与并发(如Celery、Sanic),以及持续监控与调优。通过这些手段,开发者能有效优化Flask应用,适应大型或高并发场景,打造高性能的Web服务。
|
11天前
|
PHP
web简易开发——通过php与HTML+css+mysql实现用户的登录,注册
web简易开发——通过php与HTML+css+mysql实现用户的登录,注册
|
11天前
|
数据库 开发者 Python
Python中使用Flask构建简单Web应用的例子
【4月更文挑战第15天】Flask是一个轻量级的Python Web框架,它允许开发者快速搭建Web应用,同时保持代码的简洁和清晰。下面,我们将通过一个简单的例子来展示如何在Python中使用Flask创建一个基本的Web应用。
|
11天前
|
前端开发 数据挖掘 API
使用Python中的Flask框架进行Web应用开发
【4月更文挑战第15天】在Python的Web开发领域,Flask是一个备受欢迎的轻量级Web框架。它简洁、灵活且易于扩展,使得开发者能够快速地构建出高质量的Web应用。本文将深入探讨Flask框架的核心特性、使用方法以及在实际开发中的应用。