如何调整我的 gulp 静态资产修订以与 ServiceWorkers 一起使用？
How can I adapt my gulp static asset revisioning to work with ServiceWorkers?
上下文：我有一个生产应用程序（here if you want to look) that is currently using static asset revisioning using the gulp-rev-all package，它类似于 gulp-rev，只是它在生成内容哈希时也处理依赖关系。它生成一组具有静态名称的新文件（例如goals.js 变为 goals.6a5aa614.js) 并且使用这些静态名称相互引用。然后我在生产中使用 Fastly CDN 提供这些文件，所以我的 NodeJS 服务器没有被积极用于静态资产。这一直工作得很好。
现在我正在使用 service-workers 使站点离线工作。由于去年我在同步逻辑上做了很多工作，因此网站的动态部分很容易进行大修。但是我对如何处理我的静态资产有点不知所措。
我想我会使用 workbox，这似乎没问题。但是 workbox precache 使用查询来破坏缓存而不是更改文件名，并且两者都做似乎很愚蠢。但是，如果我停止使用版本化名称，那么如何在不支持服务工作者的浏览器上破坏缓存？
（我有另一个相关的问题，继续使用 Fastly 是否有意义，因为 Fastly 的响应对 SW 是不透明的，因此不一定是预缓存的好选择？虽然没有 Fastly对于不使用 service workers 的人来说，应用程序会变得很慢，这听起来与 PWA 方法背道而驰。我应该添加一个 nginx 缓存还是什么？（我不知道这是什么，但我听说它提到了一个几次))
在我看来必须有一个优雅的解决方案，但我对 gulp 的理解非常有限，以至于我很难知道什么是可能的，以及我对 ServiceWorkers 和缓存的理解非常有限，我很难确切地知道我想要什么。
因此，我在解决这个问题时遇到了麻烦：
如何调整我的 gulp 静态资产修订以与 ServiceWorkers 一起工作？
有一个有用的例子就是 link 其他生产应用程序如何处理此问题的示例。
Service Worker 在良好的常规缓存策略之上工作得最好。您应该继续修改您的静态文件名，然后将它们缓存在 service worker 中。避免通过查询字符串更改 URL 的库，您不需要该功能，因为您已经在修改 URL.
如果您的资产是从另一个来源提供的（我猜这就是您在谈论 Fastly 时的意思），那么允许它们通过 CORS 请求（通过 Access-Control-Allow-Origin: *），这意味着它们不会不透明。
您应该保留文件修改后的资产。有关使用 gulp 和预缓存的完整示例，请查看 here。
您基本上想使用缓存优先，然后是网络模式。您可以将请求匹配到 /goals.*.js/ => 然后，根据您的应用程序，即使 [hash] 不匹配，您也可以决定使用缓存的 goals.js，然后下载新目标。[hash].js 在后台。
或者，如果哈希不匹配，您可能想先使用网络，回退到 goals.js.
的模糊匹配缓存
至于 Nginx。通常建议对静态资产服务使用反向代理。 Node.js 不适合这项任务。这是一个很好的工作 example。如果您使用此设置，您的静态资产流程将如下所示：
CDN => <= Nginx => Node.js 来源。
如果您使用 AWS。然后，使用 Cloudfront CDN 的典型设置将涉及将 Nginx 反向代理 node.js EC2 框设置为原点。然后，您将为“/”路由和“/assets”路由设置一个行为。
“/”行为可能具有较短的 TTL，而“/assets/”行为（Cloudfront 中的路由）将具有您的长期 (max-age=3153600) 缓存策略。
在这种情况下，几乎所有静态资产都将从 CDN (Cloudfront) 提供服务。当您使用一组新的文件修订资产部署新代码时，它只需要回到您的来源。
然后，您可以使用 service worker 使所有重复访问变得非常快，甚至可能在初始重复访问时使用过时的资产（匹配的名称、不同的哈希值），方法是首先进入缓存，然后是网络。因此，所有使用 service worker 的重复用户都将拥有尽可能快的初始页面加载。
那些没有它的人仍然会获得文件修订的所有好处，具有 CDN 边缘服务的长期浏览器缓存资产。
上下文：我有一个生产应用程序（here if you want to look) that is currently using static asset revisioning using the gulp-rev-all package，它类似于 gulp-rev，只是它在生成内容哈希时也处理依赖关系。它生成一组具有静态名称的新文件（例如goals.js 变为 goals.6a5aa614.js) 并且使用这些静态名称相互引用。然后我在生产中使用 Fastly CDN 提供这些文件，所以我的 NodeJS 服务器没有被积极用于静态资产。这一直工作得很好。
现在我正在使用 service-workers 使站点离线工作。由于去年我在同步逻辑上做了很多工作，因此网站的动态部分很容易进行大修。但是我对如何处理我的静态资产有点不知所措。
我想我会使用 workbox，这似乎没问题。但是 workbox precache 使用查询来破坏缓存而不是更改文件名，并且两者都做似乎很愚蠢。但是，如果我停止使用版本化名称，那么如何在不支持服务工作者的浏览器上破坏缓存？
（我有另一个相关的问题，继续使用 Fastly 是否有意义，因为 Fastly 的响应对 SW 是不透明的，因此不一定是预缓存的好选择？虽然没有 Fastly对于不使用 service workers 的人来说，应用程序会变得很慢，这听起来与 PWA 方法背道而驰。我应该添加一个 nginx 缓存还是什么？（我不知道这是什么，但我听说它提到了一个几次))
在我看来必须有一个优雅的解决方案，但我对 gulp 的理解非常有限，以至于我很难知道什么是可能的，以及我对 ServiceWorkers 和缓存的理解非常有限，我很难确切地知道我想要什么。
因此，我在解决这个问题时遇到了麻烦：
如何调整我的 gulp 静态资产修订以与 ServiceWorkers 一起工作？
有一个有用的例子就是 link 其他生产应用程序如何处理此问题的示例。
Service Worker 在良好的常规缓存策略之上工作得最好。您应该继续修改您的静态文件名，然后将它们缓存在 service worker 中。避免通过查询字符串更改 URL 的库，您不需要该功能，因为您已经在修改 URL.
如果您的资产是从另一个来源提供的（我猜这就是您在谈论 Fastly 时的意思），那么允许它们通过 CORS 请求（通过 Access-Control-Allow-Origin: *），这意味着它们不会不透明。
您应该保留文件修改后的资产。有关使用 gulp 和预缓存的完整示例，请查看 here。
您基本上想使用缓存优先，然后是网络模式。您可以将请求匹配到 /goals.*.js/ => 然后，根据您的应用程序，即使 [hash] 不匹配，您也可以决定使用缓存的 goals.js，然后下载新目标。[hash].js 在后台。
或者，如果哈希不匹配，您可能想先使用网络，回退到 goals.js.
的模糊匹配缓存至于 Nginx。通常建议对静态资产服务使用反向代理。 Node.js 不适合这项任务。这是一个很好的工作 example。如果您使用此设置，您的静态资产流程将如下所示：
CDN => <= Nginx => Node.js 来源。
如果您使用 AWS。然后，使用 Cloudfront CDN 的典型设置将涉及将 Nginx 反向代理 node.js EC2 框设置为原点。然后，您将为“/”路由和“/assets”路由设置一个行为。
“/”行为可能具有较短的 TTL，而“/assets/”行为（Cloudfront 中的路由）将具有您的长期 (max-age=3153600) 缓存策略。
在这种情况下，几乎所有静态资产都将从 CDN (Cloudfront) 提供服务。当您使用一组新的文件修订资产部署新代码时，它只需要回到您的来源。
然后，您可以使用 service worker 使所有重复访问变得非常快，甚至可能在初始重复访问时使用过时的资产（匹配的名称、不同的哈希值），方法是首先进入缓存，然后是网络。因此，所有使用 service worker 的重复用户都将拥有尽可能快的初始页面加载。
那些没有它的人仍然会获得文件修订的所有好处，具有 CDN 边缘服务的长期浏览器缓存资产。