html5 manifest 离线缓存知识点
1.最大缓存容量为 5M.
2.manifest文件需要配置正确的MIME-type，即“text/cache-manifest”，这个是在web服务器上进行配置。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | ②编写.manifest文件，文件名可自定义，例如hahaha.manifestCACHE MANIFEST(声明头部文件，必须大写)CACHE:(这里写需要缓存的文件，例如js、css、img)js/index.jscss/index.cssimg/aaa.jpgNETWORK(需要网络调用的文件，大写)*FALLBACK (在此标题下，列出的文件规定页面无法访问的回退页面)404.xml |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | ③编写HTML文件（.manifest文件和HTML页面同级）<!doctype html> <html manifest="hahaha.manifest">（html标签里写入你的.manifest文件） ... <script>（script标签里需要添加版本更新的监听） applicationCache.addEventListener("updateready",function(e){ if(applicationCache.status==applicationCache.UPDATEREADY){ applicationCache.swapCache();//使用新版本资源 window.location.reload();//刷新页面 } },false); </script> ... |
3.控制台里可以找到离线缓存的文件
二，离线缓存的有点
1.减少服务器的负载，提高资源加载速率。
2.离线浏览，方便用户在离线时使用。
缺点：
1.更新完版本后，必须刷新一次才会启动新版本。
2.进入离线存储的页面，如果不更新版本，会将其当做静态页面不请求。
3.无法进行灰度发布（即一部分人使用旧版本，一部分人使用新版本）。
4.无法增量更新
三，传统浏览器缓存的区别
1.离线缓存是针对整个应用，浏览器缓存是单个文件。
2.离线缓存断网还可以打开页面，浏览器缓存不行。
3.离线缓存可以主动通知浏览器更新资源。
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· AI与.NET技术实操系列：基于图像分类模型对图像进行分类
· go语言实现终端里的倒计时
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语，封装的思维：从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热？
· 25岁的心里话
· 闲置电脑爆改个人服务器（超详细） #公网映射 #Vmware虚拟网络编辑器
· 零经验选手，Compose 一天开发一款小游戏！
· 因为Apifox不支持离线，我果断选择了Apipost！
· 通过 API 将Deepseek响应流式内容输出到前端