H5离线缓存--manifest

最新推荐文章于 2024-11-06 08:59:29 发布
最新推荐文章于 2024-11-06 08:59:29 发布
阅读量131 收藏 1
点赞数
文章标签： 运维
原文链接：https://juejin.im/post/5a1bd4ee5188254a701ec580
版权

1、服务器端需要维护一个manifest清单

manifest 文件需要配置正确的 MIME-type，即 "text/cache-manifest"。必须在 web 服务器上进行配置，不同的服务器不一样。
a、 让Apache支持manifest：
新建或编辑现有的 .htaccess文件，在里面加上一行

    AddType text/cache-manifest .manifest复制代码

b、让nginx支持manifest文件：
修改mime.types文件，在里面增加manifest文件的映射

 text/cache-manifest manifest复制代码

如果服务器没设置，浏览器会报如下的错误：

 Application Cache Error event: Manifest fetch failed (404)复制代码

2、新建一个 .manifest文件（推荐使用）

文件里面写上需要处理的文件的列表：

CACHE MANIFEST
# v1.0.0.0 版本号（#表示注释，非必写）
# 需要缓存的文件
https://hahahahah.jpg

# 不需要缓存的页面
NETWORK:
*

# 无法访问页面
FALLBACK
404.html复制代码

3、在html标签上添加manifest属性

<html manifest="/cache/abc.manifest">
.....
</html>复制代码

4、通过Header设置缓存的各种属性

改变meta标签里面的键值对

<meta http-equiv="Cache-Control" content="max-age=3600" />
<!-- 表示当访问此网页后的一小时内再次访问不会去服务器 -->
<!-- <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" /> -->
<!-- <meta http-equiv="Pragma" content="no-cache" /> -->
<!-- <meta http-equiv="Expires" content="0" /> -->
<!-- no-cache指示请求或响应消息不能缓存 -->
<!-- no-store用于防止重要的信息被无意的发布。在请求消息中发送将使得请求和响应消息都不使用缓存。 -->
<!-- max-age指示客户机可以接收生存期不大于指定时间（以秒为单位）的响应 -->
<!-- min-fresh指示客户机可以接收响应时间小于当前时间加上指定时间的响应 -->
<!-- max-stale指示客户机可以接收超出超时期间的响应消息。如果指定max-stale消息的值，那么客户机可以接收超出超时期指定值之内的响应消息。 -->复制代码

第一次渲染的时候可以在控制台里面看到：

//通过清单下载需要的缓存文件
Creating Application Cache with manifest https://hahahahah/cache/abc.manifest
//下载并执行相应的事件
abc.html?product_id=329:1 Application Cache Checking event
abc.html?product_id=329:1 Application Cache Downloading event
abc.html?product_id=329:1 Application Cache Progress event (0 of 1) https://hahahahah.jpg
abc.html?product_id=329:1 Application Cache Progress event (1 of 1) 
abc.html?product_id=329:1 Application Cache Cached event复制代码

再次刷新：

//  文件从缓存中获取文件
Document was loaded from Application Cache with manifest https://hahahahah/cache/abc.manifest
abc.html?product_id=329:1 Application Cache Checking event
abc.html?product_id=329:1 Application Cache NoUpdate event复制代码

可以再application里面查看application Cache 里面的列表。里面显示着我们缓存下来的文件。

5、更新缓存

a. 修改manifest文件
b. 通过js清除缓存，window.applicationCache.update();
c. 清除浏览器缓存

6、如何不通过服务器配置清单，在本地进行设置实现缓存效果（不建议线上项目中使用）

  <!--直接在meta标签里面设置manifest文件类型，建议放在前面-->
  <!--这种情况是在本地服务跑，不需要去配置服务器的清单-->
  <meta http-equiv="content-type" content="text/cache-manifest" />复制代码

转载于:https://juejin.im/post/5a1bd4ee5188254a701ec580

weixin_34345560
关注
android h5 离线缓存,H5 应用程序缓存(离线缓存)
weixin_29421409的博客
05-27 1085
离线缓存这个功能的实现有以下步骤：1,以nginx做web服务器为例，在mime.types文件中添加一行：text/cache-manifest manifest,作用是为了让服务器识别该类型文件2,在html文件html标签中添加一行manifest="cache.appcache",告诉浏览器要加载的内容。3.在该目录下新建一个文件cache.appcache，文件内容为：chche...
H5离线储存-使用serverWorker实现
耶温的博客
04-12 249
H5 离线存储-使用 serverWorker 实现 离线存储所用技术 serverWorker serviceWorker 生命周期 install 事件会在 serviceWorker 注册成功时候触发，主要用于缓存资源 activate 事件会在 serviceWorker 激活的时候触发，主要用于删除旧的资源 fetch 事件会在发送请求的时候触发，主要用于操作缓存或者读取网络资源 注意： 如果 sw.js 发生了改变，install 事件会重新触发 activate 事件会在
html5 manifest 离线缓存知识点
weixin_30760895的博客
07-06 188
1.最大缓存容量为 5M. 2.manifest文件需要配置正确的MIME-type，即“text/cache-manifest”，这个是在web服务器上进行配置。 ②编写.manifest文件，文件名可自定义，例如hahaha.manifest CACHE MANIFEST(声明头部文件，必须大写) CACHE:(这里写需要缓存的文件，例如js、css、img) js/...
HTML5 离线缓存manifest浅析
昕鸿的博客
04-14 6804
最近公司项目开发app内嵌入H5应用，由于公司网络不佳，导致开发的H5应用首页加载时快时慢，体验效果不佳，和原生app相比感觉区别很大。以前学习了解H5的时候对H5的缓存有点印象，故就有了把首页缓存在客户端本地的想法，这样可以保证首页、js-lib、图片的快速加载。这才有了这篇基础文章。 1、简介 W3C官方对manifest的介绍是HTML5 引入了应用程序缓存，这意味着 web 应用可进行
html5 自动缓存,HTML5 缓存
weixin_29978783的博客
05-30 173
一、在html/htm文件中声明缓存，声明方式：...3 二、在 manifest 文件中直接指定了需要缓存的页面请注意：manifest 文件的建议的文件扩展名是：".appcache"。manifest 文件需要配置正确的 MIME-type，即 "text/cache-manifest"。必须在 web 服务器上进行配置。CACHE MANIFEST #CACHE MANIFEST - 在此...
应用程序缓存
weixin_30539625的博客
01-15 63
一、设置方法 <!DOCTYPE HTML> <html manifest="demo.appcache"> ... </html> manifest文件需要配置正确的MIME-type，即"text/cache-manifest"，必须在web服务器上进行配置。manifest文件是简单的文本文件，它告知浏览器被缓存的内容以及不缓存的内容。m...
HTML5学习-0-基础知识
狼行千里吃肉
11-23 400
目录 前言 个人学习看法 视频video 音频audio 拖放drag/drop 画布canvas 内联SVG 地理定位 Web存储 应用程序缓存 定义 使用方法 cache manifest文件说明 Manifest文件 更新缓存 Web Workers 服务器发送事件 开发过程 EventSource对象事件属性 前言 自己基于HTML4 + JQery开发好几年了，然后HTML5一直没怎么认真看，因此，想趁着不忙的时候，把HTML5认真看一遍，看看..
H5离线缓存总结
热门推荐
Alin_leeon的博客
05-14 1万+
看完慕课H5离线缓存的视频以及三天了，由于有事情一直耽误了，今天总结一下，希望对自己的前端学习能有所帮助。 首先关于存储有以下集中方式：1>cache：缓存为了让从DB/磁盘拿出来的东西放到缓存（放于内存）；2>磁盘文件：本地存储的视频，图片，计算机里面的文件；3>数据库：系统项目中的数据存储；4>内存：计算机中所有的程序运行都是在内存中，所以内存对计算机的影响很大。 HTML5缓存可以做到以
h5离线缓存
while(True): print('adorable')
08-03 264
html5离线缓存1. 简介1.1 什么是离线缓存2. 优点3. 针对对象2. 实现方式2.1 使用3. window.applicationCache对象相关api3.1 属性3.2 事件3.3 方法 1. 简介 1.1 什么是离线缓存 HTML5中引入了应用程序缓存，意味着Web应用可以进行数据缓存， 并可以在没有因特网连接的情况下进行访问。带来较好的用户体验。 2. 优点 1. 离线浏览 2. 提升页面载入速度 3. 减轻服务器负载 3. 针对对象 1. html中的缓存机制 浏览器自带缓存
H5 离线缓存及 Nginx 服务器配置
邪人君子的博客
04-23 841
离线缓存什么是Application CacheApplication Cache 的优势离线Web应用的运行机制manifest 文件内容示例理解manifest 文件页面被自动加载到离线缓存版本注释的用途nginx 服务器配置查看离线缓存的效果 什么是Application Cache HTML5 的应用缓存（application cache），或者简称为appcache，是专门为开发离线W...
MANIFEST.MF清单文件格式要求
阿江的故事
11-27 2834
MANIFEST.MF清单文件是jar包的必备文件，是一个普通的文本文件，使用记事本即可编辑修改，但有一定的格式要求。MANIFEST.MF清单文件的内容由如下格式的多个key-value组成： key:value MANIFEST.MF清单文件格式要求： 1、每行只能定义一个key-value对，每行的key-value对之前不能有空格，即key-value对必须顶格写。 2、每组key
html5 中创建manifest缓存以及更新方法
zhangxiang_1102的博客
03-24 872
一、manifestMIME TYPE：text/cache-manifest 需要由你创建的：NAME.manifest 作用：主要是配置需要缓存的文件二、实现在服务器上添加MIME TYPE支: 比如 Apache 中可在 .htaccess 中添加：AddType text/cache-manifest manifest 创建 NAME.manifest: 其中第一行的 CACHE
HTML5的manifest缓存
wk843620202的专栏
10-10 6658
一，Web存储: 1，localStorage - 没有时间限制的数据存储(永久) localstorage的存储位置： 比如：Chrome 的存储方式是以sqlite的数据库文件形式存储。存在C:\Users\Username\AppData\Local\Google\Chrome\UserData\Default\Local Storage 中，虽然后缀名是.localstorege 但
HTML5之---Manifest 文件--离线缓存
basycai的博客
01-08 1792
完整的 Manifest 文件 CACHE MANIFEST # 2012-02-21 v1.0.0 /theme.css /logo.gif /main.js NETWORK: login.asp FALLBACK: /html5/ /404.html 重要的提示：以 "#" 开头的是注释行，但也可满足其他用途。应用的缓存会在其 manifest 文件更改时被更新。如果您编辑了一幅
前端性能优化（Application Cache篇）
Lucky Star的博客
06-07 6673
之前在segmentfault上刷问题看到一个关于manifest的问题，很好奇就研究了一下application cache。Application Cache是HTML5的新特性，允许浏览器在本地存储页面所需要的资源，使得页面离线也可以访问。之前研究的目的是为了在博客中使用，将一些不需要改动的CSS、JavaScript、图片文件离线缓存，这样加载速度必然飞起，希望能用在博客上，但是失败了，但
HTML5创建 cache manifest缓存文件
Vin的学习专栏
12-20 5040
今天看到H5通过创建与配置.manifest文件实现web应用程序缓存，Mark下来供进一步学习：
智能运维新时代：机器学习模型的部署与管理
Echo_Wish的博客
11-06 550
通过合理的部署方案、版本管理、监控与自动化部署，可以确保模型在生产环境中的稳定运行和持续优化。Flask是一个轻量级的Web框架，适用于小型和中型模型的部署。通过Docker，可以将模型和其依赖打包成一个容器镜像，方便部署和管理。监控与告警：使用监控工具（如Prometheus和Grafana）实时监控模型的运行状态和性能指标，及时发现并处理异常情况。版本管理：通过版本控制系统（如Git）管理模型的版本，确保能够追踪和回滚模型更新。模型部署的方式多种多样，下面介绍几种常用的部署方法。
【系统配置】信创终端操作系统如何彻底禁用ssh _ 统信 _ 麒麟 _ 方德
最新发布
鹏大圣运维
11-06 811
Hello，大家好啊！今天带来一篇关于如何在信创终端操作系统中彻底禁用SSH的文章。在某些安全性要求较高的环境中，禁用SSH服务可以防止未经授权的远程访问，避免潜在的入侵风险。SSH虽然便捷，但在不需要远程管理或只有本地操作的场景中，禁用SSH服务是提高系统安全性的有效手段。
软设师知识点-计算机网络
loop_nervous的博客
11-04 1044
在一台安装好TCP/IP协议的计算机上，当网络连接不可用时，为了测试编写好的网络程序，通常使用的目的主机IP地址127.0.0.1（本地回送地址）
探索HTML5离线缓存与骨架屏开发实践
1. **H5离线缓存技术** HTML5提供了一种名为离线缓存的技术，通过`.appcache`文件实现。这个机制并不是传统的存储技术，而是利用一个manifest配置文件来管理离线资源。开发者需要在HTML文档头部添加`manifest`属性...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值