移动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
分享
相关文章
|
23天前
|
如何在苹果内购开发中获取App Store Connect API密钥-共享密钥理解内购安全-优雅草卓伊凡
如何在苹果内购开发中获取App Store Connect API密钥-共享密钥理解内购安全-优雅草卓伊凡
99 15
如何在苹果内购开发中获取App Store Connect API密钥-共享密钥理解内购安全-优雅草卓伊凡
布谷一对一直播源码开发:阿里云视频语音通话社交交友App的必备功能
在当今移动社交领域,一对一视频和语音通话功能已成为用户期待的基础配置。从熟人社交到陌生人交友,从专业咨询到情感陪伴,实时音视频互动能力直接决定了社交App的用户留存和市场竞争力。山东布谷科技将深入探讨一对一直播源码开发高质量一对一视频和语音通话功能的关键要素和技术实现方案。
布谷一对一直播源码开发:阿里云视频语音通话社交交友App的必备功能
【一步步开发AI运动APP】四、使用相机组件抽帧
本文介绍了如何使用`ai-camera`组件开发AI运动APP,助力开发者深耕AI运动领域。`ai-camera`是专为AI运动场景设计的相机组件,支持多平台,提供更强的抽帧处理能力和API。文章详细讲解了获取相机上下文、执行抽帧操作以及将帧保存到相册的功能实现,并附有代码示例。无论是AI运动APP还是其他场景,该组件都能满足预览、拍照、抽帧等需求。下篇将聚焦人体识别检测,敬请期待!
【一步步开发AI运动APP】六、运动计时计数能调用
本文章介绍了如何通过【一步步开发AI运动APP】系列博文,利用uniAPP插件开发高性能的AI运动应用。文中详细说明了创建运动分析器、进行运动分析、监听计数变化以及停止/重置分析等功能实现步骤。插件内置多种常见运动(如跳绳、俯卧撑等),支持自定义扩展,满足健身、体测等场景需求。示例代码展示了人体检测、运动计时计数及UI更新的完整流程,帮助开发者快速上手并深耕AI运动领域。
工会成立100周年纪念,开发职工健身AI运动小程序、APP方案推荐
为庆祝中华全国总工会成立100周年,特推出基于AI技术的智能健身系统,以小程序和APP形式呈现,助力职工健康生活。方案包括:1) 小程序插件,支持多种运动识别,开箱即用;2) APP插件,提供更高精度的运动检测;3) 成熟的「AI乐运动」系统,支持赛事活动管理。这些方案满足不同需求,推动全民健身体验升级,彰显工会对职工健康的关怀。
鸿蒙NEXT开发App相关工具类(ArkTs)
这段代码展示了一个名为鸿蒙NEXT开发 `AppUtil` 的工具类,主要用于管理鸿蒙应用的上下文、窗口、状态栏、导航栏等配置。它提供了多种功能,例如设置灰阶模式、颜色模式、字体类型、屏幕亮度、窗口属性等,并支持获取应用包信息(如版本号、包名等)。该工具类需在 UIAbility 的 `onWindowStageCreate` 方法中初始化,以便缓存全局变量。代码由鸿蒙布道师编写,适用于鸿蒙系统应用开发,帮助开发者更便捷地管理和配置应用界面及系统属性。
【一步步开发AI运动APP】五、人体检测能力调用
本文介绍如何开发性能更强、体验更优的AI运动APP,涵盖人体检测、实例创建、检测识别、骨骼图绘制及完整代码实现。通过API `createHumanDetector`,可灵活配置高性能、高精度或多人检测模式,省去模型部署麻烦。检测结果可通过`yz-pose-grapher`组件高效渲染骨骼图。最后提醒使用完毕需调用`destroy()`释放资源,下篇将聚焦运动检测分析,敬请期待!
【一步步开发AI运动APP】二、跨平台APP AI运动识别方案介绍
本系列博文旨在帮助开发者从【AI运动小程序】迈向性能更优的【AI运动APP】开发。通过「云智AI运动识别」uni-app版插件,提供本地原生极速识别、精准姿态检测及运动计时计数功能,支持健身系统、线上赛事、学生体测、康复锻炼等多场景应用。插件无需云端依赖,一次付费永久使用,成本低且扩展性强。同时兼容uni-app与uni-app x框架,适合不同技术背景的开发者快速上手,助力抢占AI辅助运动市场。下篇将介绍插件引入,敬请期待!
【一步步开发AI运动APP】一、写在最前
本文介绍新系列【一步步开发AI运动APP】,旨在帮助开发者突破小程序限制,打造性能更强、体验更佳的AI运动APP。相比小程序,APP可充分利用CPU/GPU算力,实现高精度人体检测、多人检测等复杂功能。本系列基于跨平台框架`uni`及扩展插件`uni AI运动识别插件`,适合有小程序开发经验的开发者。内容涵盖抽帧、人体识别、运动分析、姿态交互等,逐步进阶实现完整AI运动APP,并支持多手机平台发布。
|
1月前
|
【04】微信支付商户申请下户到配置完整流程-微信开放平台移动APP应用通过-微信商户继续申请-微信开户函-视频声明-以及对公打款验证-申请+配置完整流程-优雅草卓伊凡
【04】微信支付商户申请下户到配置完整流程-微信开放平台移动APP应用通过-微信商户继续申请-微信开户函-视频声明-以及对公打款验证-申请+配置完整流程-优雅草卓伊凡
121 0
【04】微信支付商户申请下户到配置完整流程-微信开放平台移动APP应用通过-微信商户继续申请-微信开户函-视频声明-以及对公打款验证-申请+配置完整流程-优雅草卓伊凡
AI助理

你好,我是AI助理

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