0

0

H5缓存-Manifest的示例代码分享(图文)

黄舟

黄舟

发布时间:2017-04-01 11:56:23

|

2674人浏览过

|

来源于php中文网

原创

在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)。再刷新页面:

LLaMA-Factory Online
LLaMA-Factory Online

在线大模型训练与微调服务平台

下载

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

 

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

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

 

 更新已缓存的文件

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

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

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

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

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

相关文章

相关标签:

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

热门AI工具

更多
DeepSeek
DeepSeek

幻方量化公司旗下的开源大模型平台

豆包大模型
豆包大模型

字节跳动自主研发的一系列大型语言模型

通义千问
通义千问

阿里巴巴推出的全能AI助手

腾讯元宝
腾讯元宝

腾讯混元平台推出的AI助手

文心一言
文心一言

文心一言是百度开发的AI聊天机器人,通过对话可以生成各种形式的内容。

讯飞写作
讯飞写作

基于讯飞星火大模型的AI写作工具,可以快速生成新闻稿件、品宣文案、工作总结、心得体会等各种文文稿

即梦AI
即梦AI

一站式AI创作平台,免费AI图片和视频生成。

ChatGPT
ChatGPT

最最强大的AI聊天机器人程序,ChatGPT不单是聊天机器人,还能进行撰写邮件、视频脚本、文案、翻译、代码等任务。

相关专题

更多
pixiv网页版官网登录与阅读指南_pixiv官网直达入口与在线访问方法
pixiv网页版官网登录与阅读指南_pixiv官网直达入口与在线访问方法

本专题系统整理pixiv网页版官网入口及登录访问方式,涵盖官网登录页面直达路径、在线阅读入口及快速进入方法说明,帮助用户高效找到pixiv官方网站,实现便捷、安全的网页端浏览与账号登录体验。

286

2026.02.13

微博网页版主页入口与登录指南_官方网页端快速访问方法
微博网页版主页入口与登录指南_官方网页端快速访问方法

本专题系统整理微博网页版官方入口及网页端登录方式,涵盖首页直达地址、账号登录流程与常见访问问题说明,帮助用户快速找到微博官网主页,实现便捷、安全的网页端登录与内容浏览体验。

126

2026.02.13

Flutter跨平台开发与状态管理实战
Flutter跨平台开发与状态管理实战

本专题围绕Flutter框架展开,系统讲解跨平台UI构建原理与状态管理方案。内容涵盖Widget生命周期、路由管理、Provider与Bloc状态管理模式、网络请求封装及性能优化技巧。通过实战项目演示,帮助开发者构建流畅、可维护的跨平台移动应用。

42

2026.02.13

TypeScript工程化开发与Vite构建优化实践
TypeScript工程化开发与Vite构建优化实践

本专题面向前端开发者,深入讲解 TypeScript 类型系统与大型项目结构设计方法,并结合 Vite 构建工具优化前端工程化流程。内容包括模块化设计、类型声明管理、代码分割、热更新原理以及构建性能调优。通过完整项目示例,帮助开发者提升代码可维护性与开发效率。

19

2026.02.13

Redis高可用架构与分布式缓存实战
Redis高可用架构与分布式缓存实战

本专题围绕 Redis 在高并发系统中的应用展开,系统讲解主从复制、哨兵机制、Cluster 集群模式及数据分片原理。内容涵盖缓存穿透与雪崩解决方案、分布式锁实现、热点数据优化及持久化策略。通过真实业务场景演示,帮助开发者构建高可用、可扩展的分布式缓存系统。

23

2026.02.13

c语言 数据类型
c语言 数据类型

本专题整合了c语言数据类型相关内容,阅读专题下面的文章了解更多详细内容。

29

2026.02.12

雨课堂网页版登录入口与使用指南_官方在线教学平台访问方法
雨课堂网页版登录入口与使用指南_官方在线教学平台访问方法

本专题系统整理雨课堂网页版官方入口及在线登录方式,涵盖账号登录流程、官方直连入口及平台访问方法说明,帮助师生用户快速进入雨课堂在线教学平台,实现便捷、高效的课程学习与教学管理体验。

14

2026.02.12

豆包AI网页版入口与智能创作指南_官方在线写作与图片生成使用方法
豆包AI网页版入口与智能创作指南_官方在线写作与图片生成使用方法

本专题汇总豆包AI官方网页版入口及在线使用方式,涵盖智能写作工具、图片生成体验入口和官网登录方法,帮助用户快速直达豆包AI平台,高效完成文本创作与AI生图任务,实现便捷智能创作体验。

421

2026.02.12

PostgreSQL性能优化与索引调优实战
PostgreSQL性能优化与索引调优实战

本专题面向后端开发与数据库工程师,深入讲解 PostgreSQL 查询优化原理与索引机制。内容包括执行计划分析、常见索引类型对比、慢查询优化策略、事务隔离级别以及高并发场景下的性能调优技巧。通过实战案例解析,帮助开发者提升数据库响应速度与系统稳定性。

51

2026.02.12

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
HTML5/CSS3/JavaScript/ES6入门课程
HTML5/CSS3/JavaScript/ES6入门课程

共102课时 | 7.1万人学习

HTML+CSS基础与实战
HTML+CSS基础与实战

共132课时 | 11.2万人学习

前端开发(基础+实战项目合集)
前端开发(基础+实战项目合集)

共60课时 | 4.1万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号