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

感谢:


目录
打赏
0
0
0
0
5
分享
相关文章
【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
185 90
【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
如何在Python Web开发中确保应用的安全性?
如何在Python Web开发中确保应用的安全性?
MNN-LLM App:在手机上离线运行大模型,阿里巴巴开源基于 MNN-LLM 框架开发的手机 AI 助手应用
MNN-LLM App 是阿里巴巴基于 MNN-LLM 框架开发的 Android 应用,支持多模态交互、多种主流模型选择、离线运行及性能优化。
1772 20
MNN-LLM App:在手机上离线运行大模型,阿里巴巴开源基于 MNN-LLM 框架开发的手机 AI 助手应用
|
8天前
|
【04】微信支付商户申请下户到配置完整流程-微信开放平台移动APP应用通过-微信商户继续申请-微信开户函-视频声明-以及对公打款验证-申请+配置完整流程-优雅草卓伊凡
【04】微信支付商户申请下户到配置完整流程-微信开放平台移动APP应用通过-微信商户继续申请-微信开户函-视频声明-以及对公打款验证-申请+配置完整流程-优雅草卓伊凡
61 0
【04】微信支付商户申请下户到配置完整流程-微信开放平台移动APP应用通过-微信商户继续申请-微信开户函-视频声明-以及对公打款验证-申请+配置完整流程-优雅草卓伊凡
docker快速部署OS web中间件 数据库 编程应用
通过Docker,可以轻松地部署操作系统、Web中间件、数据库和编程应用。本文详细介绍了使用Docker部署这些组件的基本步骤和命令,展示了如何通过Docker Compose编排多容器应用。希望本文能帮助开发者更高效地使用Docker进行应用部署和管理。
56 19
【08】flutter完成屏幕适配-重建Android,增加GetX路由,屏幕适配,基础导航栏-多版本SDK以及gradle造成的关于fvm的使用(flutter version manage)-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
【08】flutter完成屏幕适配-重建Android,增加GetX路由,屏幕适配,基础导航栏-多版本SDK以及gradle造成的关于fvm的使用(flutter version manage)-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
184 20
【08】flutter完成屏幕适配-重建Android,增加GetX路由,屏幕适配,基础导航栏-多版本SDK以及gradle造成的关于fvm的使用(flutter version manage)-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
【09】flutter首页进行了完善-采用android studio 进行真机调试开发-增加了直播间列表和短视频人物列表-增加了用户中心-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
【09】flutter首页进行了完善-采用android studio 进行真机调试开发-增加了直播间列表和短视频人物列表-增加了用户中心-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
59 4
【09】flutter首页进行了完善-采用android studio 进行真机调试开发-增加了直播间列表和短视频人物列表-增加了用户中心-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
使用Web浏览器访问UE应用的最佳实践
在3D/XR应用开发中,尤其是基于UE(虚幻引擎)开发的高精度场景,传统终端因硬件局限难以流畅运行高帧率、复杂效果的三维应用。实时云渲染技术,将渲染任务转移至云端服务器,降低终端硬件要求,确保用户获得流畅体验。具备弹性扩展、优化传输协议、跨平台支持和安全性等优势,适用于多种终端和场景,特别集成像素流送技术,帮助UE开发者实现低代码上云操作,简化部署流程,保留UE引擎的强大开发能力,确保画面精美且终端轻量化。
147 17
使用Web浏览器访问UE应用的最佳实践
java spring 项目若依框架启动失败,启动不了服务提示端口8080占用escription: Web server failed to start. Port 8080 was already in use. Action: Identify and stop the process that’s listening on port 8080 or configure this application to listen on another port-优雅草卓伊凡解决方案
java spring 项目若依框架启动失败,启动不了服务提示端口8080占用escription: Web server failed to start. Port 8080 was already in use. Action: Identify and stop the process that’s listening on port 8080 or configure this application to listen on another port-优雅草卓伊凡解决方案
80 7
1688APP 原数据 API 接口的开发、应用与收益
1688作为阿里巴巴旗下的B2B平台,汇聚海量供应商和商品资源。其APP原数据API接口为开发者提供获取商品详细信息的强大工具,涵盖商品标题、价格、图片等。通过注册开放平台账号、申请API权限并调用接口,开发者可构建比价工具、供应链管理及自动化上架工具等应用,提升用户体验与运营效率,创造新的商业模式。示例代码展示了如何使用Python调用API并解析返回结果。
127 8

热门文章

最新文章

AI助理

你好,我是AI助理

可以解答问题、推荐解决方案等