pwa-wp组件架构深度解析7大核心组件如何协作构建Service Worker【免费下载链接】pwa-wpWordPress feature plugin to bring Progressive Web Apps (PWA) to Core项目地址: https://gitcode.com/gh_mirrors/pw/pwa-wppwa-wp 是一个为 WordPress 带来渐进式 Web 应用PWA能力的功能插件其核心是用组件化方式动态生成并协作构建 Service Worker。本文带你快速读懂它的 7 大核心组件各自负责什么、按什么顺序执行、使用哪种缓存策略以及新手如何上手配置。7大核心组件总览所有组件都位于wp-includes/components/目录且统一实现 interface-wp-service-worker-component.php 定义的WP_Service_Worker_Component接口——只需实现两个方法serve()把组件的功能脚本、路由、策略注册进 Service Workerget_priority()声明执行优先级数值越小越先执行这是组件协作的关键。组件优先级职责缓存策略配置组件-999999加载 Workbox、初始化全局配置—预缓存路由组件-99999生成预缓存清单—核心/主题/插件资源缓存组件10注册静态资源缓存路由NetworkFirst上传图片缓存组件10缓存用户上传的图片StaleWhileRevalidate导航路由组件99页面导航、离线页处理NetworkFirst缓存路由组件999999汇总输出全部缓存路由汇总前序注册 这个从最小到最大的优先级排序不是随意的预缓存必须先注册否则后续的路由策略可能拦截掉本应由预缓存直接命中的请求。组件1配置组件——Service Worker的地基文件wp-includes/components/class-wp-service-worker-configuration-component.php它以最高优先级-999999第一个执行负责内联加载 Workbox 库生产环境直接内联避免额外 HTTP 请求设置站点专属的缓存名前缀防止多站点子目录安装互相污染执行skipWaiting()和clientsClaim()让新 Service Worker 版本立即接管页面。组件2预缓存路由组件——离线模板的第一道保险文件wp-includes/components/class-wp-service-worker-precaching-routes-component.php它把必须提前存好的资源清单注入 Service Worker包括离线错误页和 500 错误页模板对应wp-includes/theme-compat/offline.php等文件。模板内容一旦变化其revision版本号会自动变化触发重新预缓存——无需手动刷新缓存。组件3/4导航路由 缓存路由——页面请求的调度中心文件wp-includes/components/class-wp-service-worker-navigation-routing-component.phpwp-includes/components/class-wp-service-worker-caching-routes-component.php导航路由组件优先级 99处理浏览器地址栏发起的页面请求启用离线浏览后导航采用NetworkFirst策略并设置2 秒网络超时基于 LCP 指标调优超时即回退到缓存默认只保留最近访问的10 个页面避免缓存无限膨胀内置拒绝清单自动排除登录页、后台、RSS、REST API 等不应被缓存的 URL。缓存路由组件优先级 999999最后执行把前面所有组件注册的缓存路由统一编译成 JS 代码输出是名副其实的总装车间。组件5三大资源缓存组件——核心/主题/插件资产文件均在前台生效启用离线浏览后才注册class-wp-service-worker-core-asset-caching-component.php核心资源上限 14 条class-wp-service-worker-theme-asset-caching-component.php主题资源上限 34 条class-wp-service-worker-plugin-asset-caching-component.php插件资源三者都采用NetworkFirst策略优先走网络拿最新文件网络失败时回退缓存。条目上限来自 HTTP Archive 对真实 WordPress 站点的 75 分位统计兼顾命中率与存储开销。组件6上传图片缓存组件——图片离线的关键文件wp-includes/components/class-wp-service-worker-uploaded-image-caching-component.php与资源类组件不同用户上传的图片内容基本不变因此采用StaleWhileRevalidate策略先秒开缓存里的旧图同时在后台静默更新为新图有效期 1 个月、最多 100 张防止存储被撑爆使用 CDN 时则由 CDN 插件自行注册策略避免跨域缓存冲突。组件如何协作一次离线浏览的完整链路用户首次访问 → 配置组件初始化 Workbox预缓存组件存好离线模板浏览页面 → 导航路由按 NetworkFirst 缓存页面资源组件缓存 JS/CSS用户断网 → 已访问页面直接命中缓存图片走 StaleWhileRevalidate 秒开完全陌生的页面 → 命中预缓存的离线模板展示优雅的离线页而非白屏。整个流程由wp-includes/class-wp-service-workers.php中的WP_Service_Workers类编排脚本注册则复用 WordPress 熟悉的WP_Scripts依赖机制见wp-includes/class-wp-service-worker-scripts.php对 WordPress 开发者非常友好。新手快速上手指南3步启用离线浏览启用开关进入 设置 → 阅读打开离线浏览Offline browsing开关——它控制后 4 个资产缓存组件是否注册源码中对应offline_browsing选项见wp-admin/options-reading-offline-browsing.php自定义策略每个组件都暴露了过滤器例如修改wp_service_worker_uploaded_image_caching可调整图片缓存的有效期与数量上限确认生效生成的 Service Worker 是动态文件开头会标注PWA v版本号-front/admin在开发者工具的 Application 面板即可查看当前生效的策略。常见问题为什么优先级顺序不能乱预缓存-99999必须先于路由99/999999注册否则缓存策略可能拦截本应直接命中的预缓存资源。后台会被缓存吗不会。资产类缓存组件在is_admin()时直接返回后台导航仅使用 NetworkOnly 策略。组件可以扩展吗可以。实现WP_Service_Worker_Component接口并通过wp_front_service_worker动作钩子注册即可像主题和插件那样安全地复用同一个 Service Worker避免多 SW 互相打架的经典难题。写在最后pwa-wp 的价值不止于给站点加一层缓存它用 7 大组件建立了一套PWA 构建块与协作机制让主题和插件无需各自创建 Service Worker而是围绕统一入口扩展——这正是它作为 WordPress 核心功能插件的设计初衷。【免费下载链接】pwa-wpWordPress feature plugin to bring Progressive Web Apps (PWA) to Core项目地址: https://gitcode.com/gh_mirrors/pw/pwa-wp创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考