前端培训-中级阶段(23)- Manifest ApplicationCache应用程序缓存(2019-10-31期)

简介: 前端最基础的就是 HTML+CSS+Javascript。掌握了这三门技术就算入门,但也仅仅是入门,现在前端开发的定义已经远远不止这些。前端小课堂(HTML/CSS/JS),本着提升技术水平,打牢基础知识的中心思想,我们开课啦(每周四)。

Manifest



一种应用缓存机制,基于它可以实现离线访问。

已被web标准废弃,当然浏览器还是支持的。




https://www.caniuse.com/#feat=mdn-html_elements_html_manifest

测试地址-打印在控制台中


Manifest 的能力


  1. 离线访问
  2. 更快的加载速度
  3. 更低的流量损耗


Manifest 如何使用


html 文件部分


<html manifest="1190000020779678.appcache>

<html> 标签上指定 manifest 属性,值为文件地址。


manifest 文件部分


CACHE MANIFEST
# v1.0.0
/static/js/public_header.js
/static/js/falseReport.js
/static/js/utils.js
/static/css/normalize-8.0.0.css
/static/img/wx-linong.jpg
NETWORK:
*
FALLBACK:
/ /404.html


CACHE MANIFEST 需要缓存的请求。

NETWORK: 需要访问网络的请求。可以是使用通配符*,也就是除了需要缓存的都访问网络。


FALLBACK: 为异常请求处理,使用替代。


manifest 缓存状态


  1. _UNCACHED_(未缓存): 一般用于表示未指定 manifest文件


  1. _IDLE_(空闲): 用于表示已指定 manifest文件,并已缓存可用


  1. _CHECKING_(检查): 正在检查是否存在更新.


  1. _DOWNLOADING_(下载): 清单更新后, 重新下载全部资源。


  1. _UPDATEREADY_(更新就绪): 新版本的缓存下载完成, 全部就绪, 随即触发事件 updateready


  1. _OBSOLETE_(废弃): 应用缓存已被废弃。


applicationCache



是用于操作应用缓存的接口。

  1. status 对应缓存状态。


  1. on* 对应所有可以监听的事件,也对应各个阶段


  1. update() 为主动触发更新,当然这个更新也是去检测manifest文件。


  1. abort() 为主动终止更新


  1. swapCache() 将cache源切换到最新版本。比如一个页面开始只缓存 a.js。调用update()之后,新增了 b.js,但是默认规则下并无 b.js。所以可以使用 swapCache() 来切换。


bVbzzBt.webp.jpg


applicationCache 的事件监听


applicationCache.oncached = function(){console.log('oncached', arguments)}
applicationCache.onchecking = function(){console.log('onchecking', arguments)}
applicationCache.ondownloading = function(){console.log('ondownloading', arguments)}
applicationCache.onerror = function(){console.log('onerror', arguments)}
applicationCache.onnoupdate = function(){console.log('onnoupdate', arguments)}
applicationCache.onobsolete = function(){console.log('onobsolete', arguments)}
applicationCache.onprogress = function(){console.log('onprogress', arguments)}
applicationCache.onupdateready = function(){console.log('onupdateready', arguments)}


bVbzASk.webp.jpg

bVbzAV7.webp.jpg


注意事项



  1. manifest 缓存与浏览器缓存不一样


  1. 不同 manifest 缓存的也不一样


  1. 更新机制依赖于 manifest 文件的更改


  1. 因为 manifest 缓存依赖 manifest 更改,所以尽可能少的缓存资源,否则每次更新都会大量更新资源。


  1. manifest 会缓存当前的 HTML。


bVbzBed.webp.jpg


相关文章
|
7天前
|
缓存 前端开发 jenkins
Serverless 应用引擎产品使用合集之前端的项目部署在镜像里时,页面总是自动刷新,是什么导致的
阿里云Serverless 应用引擎(SAE)提供了完整的微服务应用生命周期管理能力,包括应用部署、服务治理、开发运维、资源管理等功能,并通过扩展功能支持多环境管理、API Gateway、事件驱动等高级应用场景,帮助企业快速构建、部署、运维和扩展微服务架构,实现Serverless化的应用部署与运维模式。以下是对SAE产品使用合集的概述,包括应用管理、服务治理、开发运维、资源管理等方面。
|
4天前
|
前端开发 持续交付 开发工具
详细介绍Git的基本原理、在前端开发中的应用以及如何使用Git来优化团队协作
【6月更文挑战第14天】Git是前端开发中的必备工具,它通过分布式版本控制管理代码历史,支持分支、合并和冲突解决,促进团队协作。在前端开发中,Git用于代码追踪、版本控制、代码审查和持续集成部署,优化团队协作。制定分支策略、编写清晰提交信息、定期合并清理分支以及使用Git钩子和自动化工具能进一步提升效率。理解并善用Git,能有效提升前端项目的质量和开发效率。
16 3
|
9天前
|
存储 前端开发 API
大型前端应用如何做系统融合?
【6月更文挑战第8天】在数字化时代,大型前端应用需与多系统融合以增强功能和体验。融合的关键步骤包括:清晰规划和设计,深入理解各系统,统一数据模型,设计稳定接口,确保安全性与稳定性,以及团队协作。通过这些方法,实现系统间的无缝衔接,提升服务质量和应用价值。示例代码展示了前端应用与外部系统数据交互。在不断变化的技术环境中,持续创新融合策略至关重要。
21 3
|
9天前
|
前端开发 算法 JavaScript
优化算法在前端性能提升中的应用
随着互联网应用的日益复杂,前端性能优化成为开发者关注的焦点。本文探讨了优化算法在前端性能提升中的重要作用,包括对JavaScript代码的优化、资源加载的算法选择以及页面渲染的优化策略。通过合理应用优化算法,可以有效提升前端应用的性能和用户体验。
|
9天前
|
前端开发 JavaScript 云计算
未来趋势下的前端开发:探索WebAssembly的应用
在移动端和云计算时代的背景下,前端开发正逐渐走向更高效、更强大的WebAssembly技术。本文将深入探讨WebAssembly在前端开发中的应用和未来发展趋势,带您领略前端技术的新风貌。
|
17天前
|
前端开发 JavaScript Java
Java语言在Web前端开发中的技术应用
Java语言在Web前端开发中的技术应用
|
25天前
|
JavaScript 前端开发 NoSQL
构建基于Node.js的全栈应用:从前端到后端的完整指南
【5月更文挑战第24天】本文是关于使用Node.js构建全栈应用的指南,涵盖前端(React或Vue)、后端(Node.js + Express)和数据库(MongoDB)的选型与实现。文章介绍了项目结构、前端组件化开发、后端API接口编写、前后端联调及部署上线的注意事项,帮助读者掌握全栈开发流程。
|
26天前
|
JavaScript 前端开发
TypeScript 学习笔记(六):TypeScript 与前端框架的结合应用
笔记,进一步提升 TypeScript 编程技能。
23 1
|
27天前
|
存储 缓存 前端开发
HTML应用缓存
HTML应用缓存
24 0
|
27天前
|
存储 缓存 前端开发
学习和理解前端缓存
前端缓存通过存储重复资源提升网页加载速度,减少服务器压力,优化用户体验。它涉及静态资源(如图片、CSS、JS)的HTTP缓存,动态数据(使用`localStorage`、`IndexedDB`)缓存,用户登录态、页面状态管理,以及预加载缓存。实现方式包括HTTP缓存(强缓存、协商缓存),浏览器存储(localStorage、sessionStorage、IndexedDB),Service Worker和Cache API。在项目中,应根据资源特性和需求选择合适的缓存策略。