serviceworker-rails配置完全参考routes.draw的5种语法与自定义响应头的隐藏技巧【免费下载链接】serviceworker-railsUse Service Worker with the Rails asset pipeline项目地址: https://gitcode.com/gh_mirrors/se/serviceworker-railsserviceworker-rails 是一款让你在 Rails 资产管道Asset Pipeline中无缝使用Service Worker的开源 Ruby Gem几行配置就能把 Rails 应用变成可离线访问的渐进式 Web 应用PWA。本文面向新手带你一次看懂核心配置入口config.serviceworker.routes.draw的5 种语法并揭秘一套自定义响应头的实用技巧。为什么 Rails 需要 serviceworker-railsRails 默认给静态资源加上哈希指纹和长期缓存头这对普通 JS/CSS 是好事但对 Service Worker 恰恰是反模式作用域限制Service Worker 只在自己所在的目录范围内生效。若放在/assets/serviceworker-abcd.js它只能拦截/assets/下的请求无法守护整个站点。更新机制冲突浏览器约每 24 小时后台检查 Service Worker 更新而指纹 URL 一旦发布就不可变浏览器会误判没有更新。serviceworker-rails 用一行中间件解决了这两个问题把 Service Worker 以固定无指纹路径如/serviceworker.js实时编译并返回同时默认注入Cache-Control: no-cache响应头确保浏览器每次都能拿到最新版本。routes.draw 的 5 种语法速览运行rails g serviceworker:install后生成器会创建config/initializers/serviceworker.rb配置模板对应源码模板lib/generators/serviceworker/templates/serviceworker.rb。所有路由都通过routes.draw块声明官方在 README 和模板注释中给出了 5 种典型写法Rails.application.configure do config.serviceworker.routes.draw do # ① 隐式映射 match /serviceworker.js # ② 显式映射到指定资产 match /proxied-serviceworker.js nested/asset/serviceworker.js # ③ 命名通配符捕获任意层级路径段 match /captures/*segments/serviceworker.js %{segments}/serviceworker.js # ④ 命名参数捕获单个路径段 match /parameter/:id/serviceworker.js project/%{id}/serviceworker.js # ⑤ 匿名 glob暴露 paths 变量 match /*/serviceworker.js %{paths}/serviceworker.js end end语法 1隐式映射最常用match /serviceworker.js不写右值时中间件会自动把路径去掉开头的/当作资产名去app/assets/javascripts/serviceworker.js或.js.erb中查找并编译。90% 的项目只需要这一行。语法 2显式映射到指定资产match /proxied-serviceworker.js nested/asset/serviceworker.js左值是浏览器请求的 URL右值是 Sprockets 中的真实资产路径。适合把脚本藏在深层目录、对外暴露简短 URL 的场景。语法 3命名通配符*segmentsmatch /captures/*segments/serviceworker.js %{segments}/serviceworker.js*segments会捕获任意深度的路径段多段时用/连接再通过%{segments}插值拼出资产名。例如请求/captures/foo/bar/serviceworker.js将命中资产captures/foo/bar-serviceworker.js示例工程见test/sample/config/initializers/serviceworker.rb。语法 4命名参数:idmatch /parameter/:id/serviceworker.js project/%{id}/serviceworker.js:id只匹配单个路径段适合按项目/按团队分发 Service Worker这类一对一参数化路由比通配符更精确、不易误匹配。语法 5匿名 glob*match /*/serviciceworker.js %{paths}/serviceworker.js不带名称的*会自动暴露一个名为paths的变量。注意它只匹配一段路径与语法 3 的多段捕获不同常用作兜底路由放在draw块的最后一行。 两个小彩蛋get是match的别名可写成get /serviceworker.js右值哈希还支持asset:选项直接指定资产如match /nested/serviceworker.js, asset: another/serviceworker.js。路由的匹配与插值逻辑都实现于lib/serviceworker/route.rb与lib/serviceworker/router.rb路由按声明顺序逐条尝试首个命中即返回。自定义响应头的 3 层技巧这是很多教程没提到的部分。中间件lib/serviceworker/middleware.rb的响应头合并遵循默认值 → 全局 → 路由级的优先级路由级配置永远覆盖全局配置。技巧 1理解内置的 Cache-Control框架默认对每个 Service Worker 路由注入Cache-Control: private, max-age0, no-cache这就是浏览器能及时发现更新的关键。除非有特殊需求建议保持默认不要改成缓存 7 天之类。技巧 2全局 headers 一键加头想让所有 Service Worker 共享的响应头直接改全局哈希# config/initializers/serviceworker.rb config.serviceworker.headers[Service-Worker-Allowed] / config.serviceworker.headers[X-Custom-Header] foobar其中Service-Worker-Allowed是 W3C 实验性头可以把 Service Worker 的作用域提升到站点根目录——这是让 SW 守护全站请求最重要的隐藏开关。技巧 3路由级 headers 精确加头只想给某一条路由附加响应头在match上直接声明match /header-serviceworker.js another/serviceworker.js, headers: { X-Resource-Header A resource }它只作用于这一条路由且优先级最高。验证方式用浏览器 DevTools 的 Network 面板查看/serviceworker.js请求确认Cache-Control和自定义头都正确出现。✅新手常见坑位清单现象原因与对策页面 404DevTools 里看不到 SW 注册忘记把serviceworker.js加入config.assets.precompile列表serviceworker.js被打包进application.jsService Worker 运行在独立线程切勿require_tree进主入口改了脚本却不生效确认响应头仍是no-cache且浏览器检查更新最长需等 24 小时开发时刷新页面即可通配符匹配不到多段路径*只匹配单段多段请用*name命名通配符语法 3写在最后掌握routes.draw的 5 种语法隐式、显式、命名通配符、命名参数、匿名 glob加上 3 层响应头配置内置 no-cache、全局 headers、路由级 headers你就拥有了 serviceworker-rails 的全部核心能力。接下来不妨在app/assets/javascripts/serviceworker.js.erb里写一个离线缓存策略配合生成器产出的public/offline.html让你的 Rails 应用真正断网也能用。【免费下载链接】serviceworker-railsUse Service Worker with the Rails asset pipeline项目地址: https://gitcode.com/gh_mirrors/se/serviceworker-rails创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
serviceworker-rails配置完全参考：routes.draw的5种语法与自定义响应头的隐藏技巧
serviceworker-rails配置完全参考routes.draw的5种语法与自定义响应头的隐藏技巧【免费下载链接】serviceworker-railsUse Service Worker with the Rails asset pipeline项目地址: https://gitcode.com/gh_mirrors/se/serviceworker-railsserviceworker-rails 是一款让你在 Rails 资产管道Asset Pipeline中无缝使用Service Worker的开源 Ruby Gem几行配置就能把 Rails 应用变成可离线访问的渐进式 Web 应用PWA。本文面向新手带你一次看懂核心配置入口config.serviceworker.routes.draw的5 种语法并揭秘一套自定义响应头的实用技巧。为什么 Rails 需要 serviceworker-railsRails 默认给静态资源加上哈希指纹和长期缓存头这对普通 JS/CSS 是好事但对 Service Worker 恰恰是反模式作用域限制Service Worker 只在自己所在的目录范围内生效。若放在/assets/serviceworker-abcd.js它只能拦截/assets/下的请求无法守护整个站点。更新机制冲突浏览器约每 24 小时后台检查 Service Worker 更新而指纹 URL 一旦发布就不可变浏览器会误判没有更新。serviceworker-rails 用一行中间件解决了这两个问题把 Service Worker 以固定无指纹路径如/serviceworker.js实时编译并返回同时默认注入Cache-Control: no-cache响应头确保浏览器每次都能拿到最新版本。routes.draw 的 5 种语法速览运行rails g serviceworker:install后生成器会创建config/initializers/serviceworker.rb配置模板对应源码模板lib/generators/serviceworker/templates/serviceworker.rb。所有路由都通过routes.draw块声明官方在 README 和模板注释中给出了 5 种典型写法Rails.application.configure do config.serviceworker.routes.draw do # ① 隐式映射 match /serviceworker.js # ② 显式映射到指定资产 match /proxied-serviceworker.js nested/asset/serviceworker.js # ③ 命名通配符捕获任意层级路径段 match /captures/*segments/serviceworker.js %{segments}/serviceworker.js # ④ 命名参数捕获单个路径段 match /parameter/:id/serviceworker.js project/%{id}/serviceworker.js # ⑤ 匿名 glob暴露 paths 变量 match /*/serviceworker.js %{paths}/serviceworker.js end end语法 1隐式映射最常用match /serviceworker.js不写右值时中间件会自动把路径去掉开头的/当作资产名去app/assets/javascripts/serviceworker.js或.js.erb中查找并编译。90% 的项目只需要这一行。语法 2显式映射到指定资产match /proxied-serviceworker.js nested/asset/serviceworker.js左值是浏览器请求的 URL右值是 Sprockets 中的真实资产路径。适合把脚本藏在深层目录、对外暴露简短 URL 的场景。语法 3命名通配符*segmentsmatch /captures/*segments/serviceworker.js %{segments}/serviceworker.js*segments会捕获任意深度的路径段多段时用/连接再通过%{segments}插值拼出资产名。例如请求/captures/foo/bar/serviceworker.js将命中资产captures/foo/bar-serviceworker.js示例工程见test/sample/config/initializers/serviceworker.rb。语法 4命名参数:idmatch /parameter/:id/serviceworker.js project/%{id}/serviceworker.js:id只匹配单个路径段适合按项目/按团队分发 Service Worker这类一对一参数化路由比通配符更精确、不易误匹配。语法 5匿名 glob*match /*/serviciceworker.js %{paths}/serviceworker.js不带名称的*会自动暴露一个名为paths的变量。注意它只匹配一段路径与语法 3 的多段捕获不同常用作兜底路由放在draw块的最后一行。 两个小彩蛋get是match的别名可写成get /serviceworker.js右值哈希还支持asset:选项直接指定资产如match /nested/serviceworker.js, asset: another/serviceworker.js。路由的匹配与插值逻辑都实现于lib/serviceworker/route.rb与lib/serviceworker/router.rb路由按声明顺序逐条尝试首个命中即返回。自定义响应头的 3 层技巧这是很多教程没提到的部分。中间件lib/serviceworker/middleware.rb的响应头合并遵循默认值 → 全局 → 路由级的优先级路由级配置永远覆盖全局配置。技巧 1理解内置的 Cache-Control框架默认对每个 Service Worker 路由注入Cache-Control: private, max-age0, no-cache这就是浏览器能及时发现更新的关键。除非有特殊需求建议保持默认不要改成缓存 7 天之类。技巧 2全局 headers 一键加头想让所有 Service Worker 共享的响应头直接改全局哈希# config/initializers/serviceworker.rb config.serviceworker.headers[Service-Worker-Allowed] / config.serviceworker.headers[X-Custom-Header] foobar其中Service-Worker-Allowed是 W3C 实验性头可以把 Service Worker 的作用域提升到站点根目录——这是让 SW 守护全站请求最重要的隐藏开关。技巧 3路由级 headers 精确加头只想给某一条路由附加响应头在match上直接声明match /header-serviceworker.js another/serviceworker.js, headers: { X-Resource-Header A resource }它只作用于这一条路由且优先级最高。验证方式用浏览器 DevTools 的 Network 面板查看/serviceworker.js请求确认Cache-Control和自定义头都正确出现。✅新手常见坑位清单现象原因与对策页面 404DevTools 里看不到 SW 注册忘记把serviceworker.js加入config.assets.precompile列表serviceworker.js被打包进application.jsService Worker 运行在独立线程切勿require_tree进主入口改了脚本却不生效确认响应头仍是no-cache且浏览器检查更新最长需等 24 小时开发时刷新页面即可通配符匹配不到多段路径*只匹配单段多段请用*name命名通配符语法 3写在最后掌握routes.draw的 5 种语法隐式、显式、命名通配符、命名参数、匿名 glob加上 3 层响应头配置内置 no-cache、全局 headers、路由级 headers你就拥有了 serviceworker-rails 的全部核心能力。接下来不妨在app/assets/javascripts/serviceworker.js.erb里写一个离线缓存策略配合生成器产出的public/offline.html让你的 Rails 应用真正断网也能用。【免费下载链接】serviceworker-railsUse Service Worker with the Rails asset pipeline项目地址: https://gitcode.com/gh_mirrors/se/serviceworker-rails创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
