尧图网站设计 尧图网站设计YAOTU DESIGN
ARTICLE DETAIL

资讯详情

深耕网站设计与一线实操的经验洞察。

Meteor appcache 包深度解析:浏览器应用缓存(AppCache)的启用、配置与弃用全指南

Meteor appcache 包深度解析:浏览器应用缓存(AppCache)的启用、配置与弃用全指南 后端前端开发工具移动开发【免费下载链接】meteorMeteor, the JavaScript App Platform项目地址https://gitcode.com/gh_mirrors/me/meteor点击查看免费下载Meteor 的appcache包用于把 Meteor 应用的静态资源客户端 JavaScript、HTML、CSS 与图片存入浏览器应用缓存AppCache、服务端实现、客户端实现、测试用例 与 QA 手册完整讲解其使用方式、配置参数、manifest 生成原理、热更新协作机制以及它为何被官方标记为deprecated。一、版本变迁与弃用状态CHANGELOG 说了什么关联文档 CHANGELOG.md 记录了该包最近两次重要变更是整个包生命周期中最关键的信息来源v1.2.82022-01-19该包被正式标记为已弃用deprecated。原因非常明确——它所依赖的浏览器 APIwindow.applicationCache本身已被 Web 标准弃用且最新的浏览器已不再提供该 API。package.js中同时给出了deprecated: true标记与当前版本号1.2.9-beta300.7。v1.2.32019-12-13重写了“缓存资源超过推荐大小”的调试debug提示信息修复了 issue #10321。从仓库结构也可以印证这一弃用状态该包已被移入packages/deprecated/目录与amplify、backbone、d3、http等一批历史包并列。结论先行如果你的项目仍在使用appcache包建议评估迁移方案但理解其设计思路与实现对于理解 Meteor 热更新、webapp 资源清单manifest与浏览器缓存机制仍有重要参考价值。二、包的作用与启用方式appcache包是 webapp 体系的一部分。其 README 说明了核心定位把 Meteor 应用的静态部分客户端 JavaScript、HTML、CSS 和图片存入浏览器的应用缓存。启用方式极为简单——只需将包加入项目meteor add appcache加入后可获得三个层面的收益二次访问加速用户首次访问后应用被缓存再次访问时浏览器可直接从缓存加载应用无需先连接服务器。后台热更新Hot Code Push新代码由浏览器在后台下载应用继续运行新代码完全加载后浏览器可快速切换到新版本。离线可用应用缓存允许应用在无网络连接时被加载实现离线使用。重要边界appcache包本身并不能让数据离线可用。离线加载的应用中Meteor Collection 在客户端会表现为空集合直到网络恢复、浏览器与服务器建立 DDP 连接为止。这是理解该包能力边界的关键——它缓存的是应用代码不是业务数据。从 package.js 的依赖声明可以看到它的实现边界服务端依赖webapp注入 manifest 处理路由与routepolicy声明 online-only 路由弱依赖autoupdate感知客户端版本客户端依赖reload接入 Meteor 的迁移/重载机制。三、配置 APIMeteor.AppCache.config服务端通过Meteor.AppCache.config(options)进行配置。结合 appcache-server.js 的源码完整支持以下配置项配置项取值作用browsers浏览器名数组显式声明允许启用 AppCache 的浏览器白名单仅保留这些浏览器onlineOnlyURL 前缀数组将这些前缀的资源排除出缓存仅在线可用会声明为static-online路由enableCallback函数更精细的逐请求开关返回false时对该请求禁用 AppCache_disableSizeCheck布尔值内部选项关闭 5MB 大小告警测试用一般用户不应使用浏览器名如chrometrue/false单独启用或禁用某个浏览器的 AppCache3.1 按浏览器启停关闭特定浏览器的 AppCacheMeteor.AppCache.config({ chrome: false, firefox: false });源码中可启停的浏览器包括但不限于android、chrome、chromium、chromeMobileIOS、firefox、ie、mobileSafari、safari。实现上这些布尔值被存入disabledBrowsers对象服务端在每次请求时通过browserDisabled(request)判断——注意其读取的是request.browser.name即 webapp 的categorizeRequest分类结果。browsers白名单模式与之相反Meteor.AppCache.config({ browsers: [chrome, firefox] })会重置disabledBrowsers并把其余浏览器全部视为禁用。若传入的选项既不是已知键、也不是布尔值源码会直接抛出Error(Invalid AppCache config option: ...)防止拼写错误被静默吞掉。3.2 排除大文件onlineOnly浏览器对应用缓存有数据量上限超限时不是禁用缓存改走在线而是更新失败用户继续运行旧代码。因此官方建议将缓存控制在 5MB 以下appcache包会在服务端控制台打印超限警告。按 URL 前缀排除大文件Meteor.AppCache.config({ onlineOnly: [/online/] });这会让public/online目录下的文件不被缓存、仅在线可用之后把大文件移入该目录并按新 URL 引用img src/online/bigimage.jpg如果不愿移动文件也可以直接用文件名作为前缀Meteor.AppCache.config({ onlineOnly: [ /bigimage.jpg, /largedata.json ] });前缀匹配的陷阱这是应用缓存 manifest 格式本身的限制排除是按前缀匹配的排除/largedata.json的同时也会排除/largedata.json.orig、/largedata.json/file1这类 URL使用时需注意。从源码看onlineOnly的每一项都会调用RoutePolicy.declare(urlPrefix, static-online)即路由策略中的static-online类型这类前缀最终会被写进 manifest 的NETWORK:区块详见第五节从而保证浏览器对它们始终走网络而非缓存或 FALLBACK。3.3 逐请求动态控制enableCallback对于需要按请求上下文动态判断的场景可提供回调Meteor.AppCache.config({ enableCallback(request) { // 返回 false 表示该请求禁用 AppCache return shouldEnableAppCacheFor(request); } });源码中browserDisabled(request)会优先检查enableCallback存在回调时!enableCallback(request)即视为禁用未设置回调时才回落到disabledBrowsers[request.browser.name]的静态配置。四、manifest 的注入与服务请求处理链路启用后appcache-server.js 通过WebApp.addHtmlAttributeHook向应用 HTML 的html标签注入manifest/app.manifest属性告诉浏览器本页有应用缓存清单。随后/app.manifest请求由WebApp.handlers中间件处理appcache-server.js逐请求禁用判定如果browserDisabled(request)为真直接返回404。源码注释解释了原因如果只是不再注入 manifest 属性之前已启用缓存的浏览器仍会继续拉取 manifestFirefox 甚至会持续弹出该网站请求在您的计算机上存储数据以供离线使用的提示只有返回 404 才能让浏览器真正关闭应用缓存。构建缓存键以request.modern现代浏览器标志、request.arch架构如web.browser以及WebApp.clientHash(arch)组成cacheInfo序列化后作为manifestCacheMap的键——同一架构的 manifest 只会计算一次减少重复开销。叠加 autoupdate 版本若autoupdate包存在Meteor 1.7.1 之后为Autoupdate.versions旧版为autoupdateVersion且版本号与clientHash不一致则把该版本写入cacheInfo.autoupdateVersion。响应头与输出设置Content-Type: text/cache-manifest以Content-Length返回字节长度源码用Buffer.from(manifest, utf8)保证按字节计数。五、manifest 的生成原理源码级computeManifestappcache-server.js按应用缓存清单规范生成三类区块5.1 头部注释clientHash 与 autoupdateVersionCACHE MANIFEST # clientHash # autoupdateVersionclientHash是客户端资源的真实哈希。因为浏览器只在 manifest 文件内容变化时才重新连接服务器并刷新缓存所以必须把资源哈希写进 manifest才能保证客户端资源更新后缓存随之更新。使用autoupdate时叠加AUTOUPDATE_VERSION否则会出现无限重载循环浏览器没有抓取包含新版本号的新 HTMLautoupdate 检测到新版本又触发一次 reload。5.2 CACHE缓存清单CACHE: /每项资源按以下规则决定是否进入缓存eachResource遍历WebApp.clientPrograms[arch].manifestresource.where必须为client经RoutePolicy.classify(url)判定为路由如 network/static-online的资源跳过shouldSkip跳过的资源跳过dynamic js类型以及以.map结尾或?meteor_js_resourcetrue的 JSONappcache-server.js。关键细节——不可缓存资源的哈希追加如果资源本身不可缓存!resource.cacheable通常指 URL 带查询参数manifest 会追加?hash形式否则会把不可缓存资源放进缓存导致用户无法修改该资源直到缓存头过期。5.3 FALLBACK离线回退FALLBACK: / /全局回退/ /任意 URL 离线时回退到应用首页。对每个不可缓存资源追加url url?hash回退条目使离线时访问裸 URL 也能命中带哈希的缓存副本在线时浏览器仍会请求服务器。架构前缀回退对于asset类型且 URL 带__browser.legacy、__cordova等前缀的资源追加去前缀 URL → 带前缀 URL的回退让 legacy / cordova 浏览器离线时无需显式前缀即可加载资源在线时则直接走无前缀的现代web.browser包。源码特别注释用 FALLBACK 而非重复写入 CACHE是为了规避 appcache 大小限制重复资源会显著增大清单体积。5.4 NETWORK始终在线NETWORK: /app.manifest 各 network / static-online 前缀 *app.manifest自身、所有RoutePolicy.urlPrefixesFor(network)与static-online前缀都会被列入最后以*兜底其他一切走网络。这正是 routepolicy.js 注释所描述的机制static-online路由不缓存是通过写入 NETWORK 实现的否则浏览器会因 FALLBACK 区块而对它们返回应用 HTML。5.5 5MB 大小检查sizeCheckappcache-server.js对web.browser与web.browser.legacy两个架构分别累计客户端资源大小同样排除路由资源与shouldSkip资源超过5 * 1024 * 10245MB时通过Meteor._debug打印警告内容包括每个超限架构的实际大小MB与处理建议。这正是 CHANGELOG v1.2.3 中重写调试信息所对应的代码。检查被安排在Meteor.startup中执行且可被_disableSizeCheck关闭源码注释给出了原因等用户代码运行完毕后再检查这样用户通过onlineOnly排除大文件后警告就不会误报。六、客户端协作与热代码重载Hot Code Push的配合appcache-client.js 展示了该包与 Meteor 重载机制的深度协作整个过程如下对应 docs/long-form/appcache.md 中App Cache 与 Meteor 代码重载一节的流程Meteor 的 livedata 流连接发现代码更新触发重载流程appcache包通过Reload._onMigrate(appcache, retry ...)注册迁移钩子调用window.applicationCache.update()请求浏览器更新应用缓存然后返回false拒绝立即迁移把retry存为reloadRetry等待缓存更新完成浏览器触发updateready或noupdate事件时客户端标记appcacheUpdated true并调用reloadRetry()重载流程继续最终window.location.reload()用新代码重载页面。客户端实现还处理了几个边界情况未缓存应用applicationCache.status UNCACHED即 manifest 尚未生效无法更新直接放行迁移update()抛异常时记录Meteor._debug(applicationCache update error, e)并放行——不能因缓存更新失败而阻塞重载obsolete事件manifest 返回 404通常是缓存被禁用或包被移除会直接触发Reload._reload()让浏览器尽快切到非缓存的新代码。体验差异来自 QA.md无 appcache(页面空白) → (浏览器拉取) → (页面渲染)有 appcache(浏览器拉取) → (页面空白) → (页面渲染)即使用缓存时新代码在后台先行下载页面变白发生在重载前切换更快、离线更稳。需要留意的是因为浏览器始终在后台更新缓存它不会等待缓存就绪首次访问仍是标准的在线加载缓存随后在后台填充。七、设计边界只缓存静态资源docs/long-form/appcache.md 强调了一个根本性设计原则该包只面向静态资源。静态资源指应用特定版本内保持不变的文件如 todo 应用的完成勾选图标改动它需要一次代码发布而用户上传图片这类运行时动态变化的资源不在缓存范围内。作为应用缓存它缓存的是应用运行所需的 HTML、CSS、JavaScript 以及public/目录下发布的内容。八、测试与 QA如何验证缓存行为8.1 自动化测试appcache_tests-client.js 通过fetch(/app.manifest)拉取清单并逐项校验presencemanifest 必须返回 200content type响应头必须是text/cache-manifestsections uniquenessCACHE:、NETWORK:、FALLBACK:三个必需区块各只能出现一次SETTINGS属可选区块本包不使用sections validity逐行用正则校验 manifest 格式——头部为CACHE MANIFEST与注释哈希CACHE:/NETWORK:下每行为单个非空 tokenFALLBACK:下每行为源 URL 空格 目标 URL两个 token空行与#注释合法*合法network section content确认/app.manifest、测试中配置的onlineOnly前缀/online/、/bigimage.jpg、/largedata.json以及*都出现在NETWORK:区块中。配套的 appcache_tests-server.js 展示了测试环境的一个技巧测试时通过addHtmlAttributeHook把 manifest 指向不存在的文件避免浏览器真正进入缓存状态导致测试结果受缓存污染。8.2 手工 QA 清单QA.md 提供了可直接照做的验证步骤查看缓存Chrome 访问chrome://appcache-internals/Firefox 打开工具 → 高级 → 网络允许以下网站存储数据以供离线使用会显示缓存数据量为 0 表示允许使用但当前关闭。离线验证运行 Meteor 并加载应用 → 停止 Meteor → 刷新页面内容应仍可见。热更新验证修改static.html观察变更出现在页面注意使用缓存时重载会因后台拉取而稍有延迟这是正常现象。启用/禁用验证在Meteor.isServer中执行Meteor.AppCache.config({ chrome: false })后热更新应用不再被缓存改为chrome: true后再次热更新缓存恢复。移除验证停止 Meteor、移除appcache包并删除Meteor.AppCache.config调用后重启等待 livedata 连接重建热更新后应用不再被缓存。九、总结与迁移建议appcache包是 Meteor 早期为浏览器应用缓存提供的一层优雅封装服务端自动生成带资源哈希与版本信息的 manifest、按浏览器与 URL 前缀精细控制缓存范围、通过onMigrate钩子与热更新无缝协作并配套完整的自动化测试与 QA 流程。但由于其底层依赖的window.applicationCacheAPI 已被 Web 平台弃用最新浏览器不再提供该包自 v1.2.8 起被官方标记为 deprecated代码亦移入packages/deprecated/appcache/。对仍在使用的项目官方态度明确应规划迁移。替代方向可参考现代离线方案如 Service Worker 缓存策略并在迁移时留意本指南强调的要点——数据离线仍需 DDP 连接、缓存大小应控制在 5MB 以内、onlineOnly是按前缀匹配排除。理解这份实现依然能帮助你厘清 Meteor 资源清单、路由策略与热更新机制之间的耦合关系为设计下一代离线体验提供参照。赞分享后端前端开发工具移动开发【免费下载链接】meteorMeteor, the JavaScript App Platform项目地址https://gitcode.com/gh_mirrors/me/meteor点击查看免费下载相关推荐Meteor appcache 包深度指南浏览器应用缓存、离线支持与 Hot Code PushMeteor appcache 包深度指南浏览器应用缓存、离线支持与 Hot Code Push 本文聚焦 Meteor 官方 appcache 包它把 M后端前端开发工具移动开发Meteor appcache 包实战指南浏览器应用缓存、离线支持与热更新配置Meteor appcache 包实战指南浏览器应用缓存、离线支持与热更新配置 本文以 Meteor 仓库中的 appcache 官方文档 https://l后端前端开发工具移动开发Meteor AppCache 包深度解析浏览器应用缓存、热代码重载与离线支持实战Meteor AppCache 包深度解析浏览器应用缓存、热代码重载与离线支持实战 本篇技术指南围绕 Meteor 开源仓库中的 appcache 包展开系后端前端开发工具移动开发创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考
返回列表