如何通过 Service Worker 解决动态 URL 依赖关系？答案

【问题标题】：How to resolve Dynamic URLs dependencies through Service worker?如何通过 Service Worker 解决动态 URL 依赖关系？
【发布时间】：2016-06-06 19:28:02
【问题描述】：

虽然我熟悉 Sw-precache 和 Sw-toolbox 库，但仍然对如何在使用 Angular 构建渐进式 Web 应用程序时满足动态依赖关系感到困惑。

我使用 Sw-precache 构建过程为我的应用程序预缓存了 bundle.js、bundle.css 和一些静态模板。（假设我所有的模板（.html 文件）都依赖于 bundle.js 和 bundle.css）

如果我更新了未预缓存的模板怎么办？如何确保更新 bundle.js/css 连同我的模板。
如果我更新已经预缓存的模板怎么办。它是否总是与预缓存的 bundle.js/css 文件一起更新。
最后一个用例，当我的模板已经预缓存但它有一些带有 src 属性的内联脚本并且此脚本文件没有缓存在任何地方时。假设我对模板和脚本文件进行了一些更改。我应该遵循什么缓存方法来确保模板文件与脚本文件一起更新。

我们不遵循纯粹的 App-shell 架构，它就像使用 Angular.js 设计的单页应用程序

【问题讨论】：

标签： service-worker progressive-web-apps sw-precache sw-toolbox

【解决方案1】：

Sw-Precache 将针对文件更改进行更新，生成新的 Service Worker，当您将更新部署到捆绑 js 或 css 时，您也应该部署新的 Sw-Precache 生成的 Service Worker。

【讨论】：

Service Worker 有自己的生命周期来更新东西。如果没有预缓存的模板从网络获取并且它依赖的 CSS/js(preached) 由于 sone 而当时没有更新怎么办未触发激活事件。？你找到我了吗？
好吧，如果你为 html 页面提供服务，它不会请求这些新资产，直到更新服务工作者更新 html 页面，然后拉入最新资产。如果您想管理动态内容，那么您应该在 sw-precache 中查看以下内容：github.com/GoogleChrome/sw-precache#runtimecaching-arrayobject

【解决方案2】：

作为一个总体思路，散列您正在预缓存的所有资源并执行散列散列并将此摘要包含在服务工作者中，因此当其中一个依赖项发生更改时，摘要将更改并且您的服务工作者将更新触发新的安装事件。有意义吗？

【讨论】：

是的，这是有道理的。但我担心如果我的模板没有被缓存并且其关联的 js/css 被预缓存怎么办。然后会有一种情况，当对模板进行任何更改时，其关联的 js/css 将不会立即生效。 ?
模板更改是否会以任何方式更改您的捆绑包？如果是这样，你的 bundle 的哈希值将会改变，你的 service worker 也会更新。如果没有，您应该将模板的哈希添加到哈希的哈希中。