H5缓存-Manifest的示例代码分享（图文）-H5教程-PHP中文网

首页

web前端

H5教程

H5缓存-Manifest的示例代码分享（图文）

黄舟

Apr 01, 2017 am 11:56 AM

在app中更新h5页面一直有缓存问题。默认什么都不做的情况下，app有一定的空间缓存页面。一开始更新之后会马上加载，等到app缓存空间上来之后更新就无法下载了。安卓能够清理缓存空间，ios就只能卸载重装(are u kidding me?)。这是最坏的情况，你可以更换下地址。

no-cache

注意到这一点之后，页面加入no-cache.

<meta http-equiv="Cache-Control" content="no-cache">

告诉浏览器不要缓存页面。实际是页面没有发生改变的时候请求是304,如果页面改变了才是200，所以说加了no-cache不是说每次都全新下载，而是更新了就会重新下载。但这个时候不同的手机表现还是不一样的。4s与6sp就不同。访问同一个页面，修改了js。4s更新了，6sp还是老样子。咋整呢，因为服务端还有缓存。先设置nginx缓存：

 location / {
           root   html;           expires -1;
           index  index.html index.htm;
        }

并需要重启下nginx：

nginx -s reload

这个时候6sp也更新了。

但老是重启nginx不是办法啊，可能造成一些请求丢失。而且这种情况下，离线是完全不能用了。比如断网了去发消息，原本设置的一张红色叹号的图片和人物的头像都显示不出来。当然可以转成base64的字符串解决这个问题。base64就是很长，放在哪儿都占空间。怎么解决，manifest

no-cache+更新文件名+更新地址待测

manifest

介绍可以先看w3shool的：www.w3school.com.cn/html5/html_5_app_cache.asp ,这里就说下使用的情况。

1.设置html

<html manifest="index.appcache">

2.设置缓存目录

CACHE MANIFEST
#v1.0.0.0#需要缓存的文件js/zepto.js#不需要缓存的页面
NETWORK:*#无法访问页面
FALLBACK404.html

3.设置nginx mime

text/cache-manifest         appcache;

mime types文件都在conf目录下。启动nginx之后。这个时候页面会出现加载情况：

这个图说明2个事情，一个是流程上会先下载index.appcache，然后会陆续触发checking event,download event，progress event 和 updateReady event.二个是默认缓存了当前页面。而且居然是带个参数也缓存。看样子只要地址不一样的当前页都给缓存了(上面的缓存目录我只写了一个zepto)。再刷新页面：

index.appcache没有更新就不会触发检查。

加载缓存的文件状态是200，size一栏是from cache。从浏览器加载的是304，时间上一个是几毫秒，一个是十几毫秒。 f12进入开发者模式，在Application cache一栏可以看见被缓存的文件。

但在这个地方是无法清理的，需要在Application 中的 clear storage来清理。

更新已缓存的文件

最明显的就是首页，默认缓存下来。这个时候你改变首页内容而不修改index.appache是完全没有作用的。比如你删掉一个js的引用，客户端还是下载了这个js。这个时候你需要修改这个缓存文件：

#不需要缓存的页面
NETWORK:  
mobile/index.html
*

注意到虽然index.appache和index位于同一级，但不能写index.html，得写相当于网站的路径，其他资源也是一样。这个时候触发更新了，但页面还是加载的缓存资源，所以还需要做一个处理：

  window.applicationCache.addEventListener("updateready", function(){
    location.reload()
  });

这样才会加载最新的页面。如果首页再发生修改，可以随意(加个空格，加空行)修改缓存文件，就能触发更新。所以剩下的问题就是记得在更新资源之后记得更新缓存文件。建议就是不变的资源(框架样式，框架js，图片)缓存下来，经常要修改的js就让浏览器缓存吧。现在这样就避免了reload nginx。这个效果要比加no-cache的方法好。当然，如果无所谓消息或者reload的影响。no-cache还是很方便，毕竟这个index.appache一旦加上，难以去掉，除非清理缓存。

以上是H5缓存-Manifest的示例代码分享（图文）的详细内容。更多信息请关注PHP中文网其他相关文章！

声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

HTML中的H5标签是什么？May 09, 2025 am 12:11 AM

HTML中的H5标签是第五级标题，用于标记较小的标题或子标题。1)H5标签帮助细化内容层次，提升可读性和SEO。2)结合CSS可定制样式，增强视觉效果。3)合理使用H5标签，避免滥用，确保内容结构逻辑性。

H5代码：Web结构的初学者指南May 08, 2025 am 12:15 AM

HTML5构建网站的方法包括：1.使用语义化标签定义网页结构，如、、等；2.嵌入多媒体内容，使用和标签；3.应用表单验证和本地存储等高级功能。通过这些步骤，你可以创建一个结构清晰、功能丰富的现代网页。

H5代码结构：组织内容以实现可读性May 07, 2025 am 12:06 AM

通过合理的H5代码结构可以让页面在众多内容中脱颖而出。1)使用语义化标签如、、等组织内容，使结构清晰。2)通过CSS布局如Flexbox或Grid控制页面在不同设备上的呈现效果。3)实现响应式设计，确保页面在不同屏幕尺寸上自适应。

H5与较旧的HTML版本：比较May 06, 2025 am 12:09 AM

HTML5（H5）与旧版本HTML的主要区别包括：1）H5引入了语义化标签，2）支持多媒体内容，3）提供离线存储功能。H5通过新标签和API增强了网页的功能和表现力，如和标签，提高了用户体验和SEO效果，但需注意兼容性问题。

H5与HTML5：澄清术语和关系May 05, 2025 am 12:02 AM

H5和HTML5的区别在于：1）HTML5是网页标准，定义结构和内容；2）H5是基于HTML5的移动网页应用，适用于快速开发和营销。

HTML5特征：H5的核心May 04, 2025 am 12:05 AM

HTML5的核心特性包括语义化标签、多媒体支持、表单增强和离线存储与本地存储。1.语义化标签如、等提高了代码可读性和SEO效果。2.多媒体支持通过和标签简化了嵌入媒体内容的过程。3.表单增强引入了新的输入类型和验证属性，简化了表单开发。4.离线存储和本地存储通过ApplicationCache和localStorage等提高了网页性能和用户体验。

H5：探索最新版本的HTMLMay 03, 2025 am 12:14 AM

html5isamajorrevisionofthehtmlStandardThatRevolutionsWebDevelopmentBybyIntroDucingNewSemanticeLementSemelementsandAndCapabilities.1）itenhancesCodereAdabilityAndSeowitability andSeowithelientsLike，and.2）