前端培训-中级阶段(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


相关文章
|
18天前
|
前端开发 JavaScript 安全
前端性能调优:HTTP/2与HTTPS在Web加速中的应用
【10月更文挑战第27天】本文介绍了HTTP/2和HTTPS在前端性能调优中的应用。通过多路复用、服务器推送和头部压缩等特性,HTTP/2显著提升了Web性能。同时,HTTPS确保了数据传输的安全性。文章提供了示例代码,展示了如何使用Node.js创建一个HTTP/2服务器。
31 3
|
12天前
|
缓存 NoSQL 数据库
运用云数据库 Tair 构建缓存为应用提速,完成任务得苹果音响、充电套装等好礼!
本活动将带大家了解云数据库 Tair(兼容 Redis),通过体验构建缓存以提速应用,完成任务,即可领取罗马仕安卓充电套装,限量1000个,先到先得。邀请好友共同参与活动,还可赢取苹果 HomePod mini、小米蓝牙耳机等精美好礼!
|
19天前
|
Rust 前端开发 JavaScript
前端性能革命:WebAssembly在高性能计算中的应用探索
【10月更文挑战第26天】随着Web应用功能的日益复杂,传统JavaScript解释执行模式逐渐成为性能瓶颈。WebAssembly(Wasm)应运而生,作为一种二进制代码格式,支持C/C++、Rust等语言编写的代码在浏览器中高效运行。Wasm不仅提升了应用的执行速度,还具备跨平台兼容性和安全性,显著改善了Web应用的响应速度和用户体验。
31 4
|
18天前
|
前端开发 数据管理 测试技术
前端自动化测试:Jest与Cypress的实战应用与最佳实践
【10月更文挑战第27天】本文介绍了前端自动化测试中Jest和Cypress的实战应用与最佳实践。Jest适合React应用的单元测试和快照测试,Cypress则擅长端到端测试,模拟用户交互。通过结合使用这两种工具,可以有效提升代码质量和开发效率。最佳实践包括单元测试与集成测试结合、快照测试、并行执行、代码覆盖率分析、测试环境管理和测试数据管理。
35 2
|
19天前
|
前端开发 安全 应用服务中间件
前端性能调优:HTTP/2与HTTPS在Web加速中的应用
【10月更文挑战第26天】随着互联网的快速发展,前端性能调优成为开发者的重要任务。本文探讨了HTTP/2与HTTPS在前端性能优化中的应用,介绍了二进制分帧、多路复用和服务器推送等特性,并通过Nginx配置示例展示了如何启用HTTP/2和HTTPS,以提升Web应用的性能和安全性。
17 3
|
19天前
|
前端开发 JavaScript 数据可视化
前端自动化测试:Jest与Cypress的实战应用与最佳实践
【10月更文挑战第26天】前端自动化测试在现代软件开发中至关重要,Jest和Cypress分别是单元测试和端到端测试的流行工具。本文通过解答一系列问题,介绍Jest与Cypress的实战应用与最佳实践,帮助开发者提高测试效率和代码质量。
28 2
|
19天前
|
前端开发 JavaScript API
前端框架新探索:Svelte在构建高性能Web应用中的优势
【10月更文挑战第26天】近年来,前端技术飞速发展,Svelte凭借独特的编译时优化和简洁的API设计,成为构建高性能Web应用的优选。本文介绍Svelte的特点和优势,包括编译而非虚拟DOM、组件化开发、状态管理及响应式更新机制,并通过示例代码展示其使用方法。
33 2
|
20天前
|
前端开发 JavaScript 开发者
“揭秘React Hooks的神秘面纱:如何掌握这些改变游戏规则的超能力以打造无敌前端应用”
【10月更文挑战第25天】React Hooks 自 2018 年推出以来,已成为 React 功能组件的重要组成部分。本文全面解析了 React Hooks 的核心概念,包括 `useState` 和 `useEffect` 的使用方法,并提供了最佳实践,如避免过度使用 Hooks、保持 Hooks 调用顺序一致、使用 `useReducer` 管理复杂状态逻辑、自定义 Hooks 封装复用逻辑等,帮助开发者更高效地使用 Hooks,构建健壮且易于维护的 React 应用。
28 2
|
25天前
|
JavaScript 前端开发 测试技术
前端全栈之路Deno篇(五):如何快速创建 WebSocket 服务端应用 + 客户端应用 - 可能是2025最佳的Websocket全栈实时应用框架
本文介绍了如何使用Deno 2.0快速构建WebSocket全栈应用,包括服务端和客户端的创建。通过一个简单的代码示例,展示了Deno在WebSocket实现中的便捷与强大,无需额外依赖,即可轻松搭建具备基本功能的WebSocket应用。Deno 2.0被认为是最佳的WebSocket全栈应用JS运行时,适合全栈开发者学习和使用。
|
21天前
|
前端开发 API UED
深入理解微前端架构:构建灵活、高效的前端应用
【10月更文挑战第23天】微前端架构是一种将前端应用分解为多个小型、独立、可复用的服务的方法。每个服务独立开发和部署,但共同提供一致的用户体验。本文探讨了微前端架构的核心概念、优势及实施方法,包括定义服务边界、建立通信机制、共享UI组件库和版本控制等。通过实际案例和职业心得,帮助读者更好地理解和应用微前端架构。