问题标签 [sw-precache]

我正在使用sw-precachewithsw-toolbox以允许离线浏览 Angular 应用程序的缓存页面。

该应用程序通过 node express 服务器提供服务。

我们遇到的一个问题是index.html有时似乎没有在缓存中更新，尽管其他资产在激活新的 service worker 时已经更新。

在这种情况下，这会给用户留下一个index.html试图加载不再存在的版本化资产的过时资产/scripts/a387fbeb.modules.js。

我不完全确定发生了什么，因为似乎在index.html已正确更新的不同浏览器上具有相同的哈希值。

在一个浏览器上过时（有问题）Index.html

2cdd5371d1201f857054a716570c1564（用哈希缓存）包括：

在其内容中。（此文件不再存在于缓存或远程）。

在另一个浏览器上更新（好）index.html

（同缓存2cdd5371d1201f857054a716570c1564）包括：

虽然返回给浏览器的内容不同，但这两个缓存是一样的！

我该怎么办？这是否意味着sw-precache当新软件激活时不能保证原子缓存失效？一个人怎么能免受这种伤害？

如果这些有帮助，这是生成的 service-worker.js文件sw-precache。

注意：我意识到我可以使用remoteFirst策略（至少 for index.html）来避免这种情况。但我仍然想了解并找出一种使用cacheFirst策略来充分利用性能的方法。

注意2：我在其他相关问题中看到可以更改缓存的名称以强制破坏所有旧缓存。但这似乎打败了sw-precache只破坏更新内容的想法？这是要走的路吗？

注意3：请注意，即使我硬重新加载网站损坏的浏览器。该站点将工作，因为它会跳过服务工作人员缓存，但缓存仍然是错误的 - 服务工作人员似乎没有激活 - 我的猜测是因为这个特定的 SW 已经被激活但未能正确破坏缓存。随后的非硬刷新访问仍然会看到损坏的index.html.

如何配置 sw-precache 以服务index.html于多个动态路由？

这适用于具有index.html作为入口点的 Angular 应用程序。当前设置仅允许通过/. 因此，如果用户/articles/list/popular在离线时将其作为入口点，他们将无法浏览它，并且会收到您处于离线状态的消息。（尽管在线时，它们会index.html在所有请求中作为入口点提供相同的文件）

可以使用dynamicUrlToDependencies来做到这一点吗？或者这需要通过编写单独的 SW 脚本来处理吗？像下面这样的东西会做吗？

我sw-precache用来允许预先缓存 Angular 应用程序的所有静态资源。我明白了sw-precache concept of versioning by calculating the MD5 hash which is used to determine whether the file has changed or not.

但我想知道我们将如何处理sw-precache通过连接多个文件并缩小它们和版本控制文件生成的捆绑文件（比如 bundle.877095ebde8.js）上的版本控制/缓存破坏。

因为在这种情况下，每次您进行任何更改并创建一个新的版本控制文件时，整个文件都将更改而不是文件内容，因此navigator.serviceWorker.controller始终返回 null。

我们正在尝试sw-precache允许对所有静态资源进行预缓存。我们只是在考虑采用哪种方法来预缓存文件名中包含 MD5 指纹的版本化资源。

第一个解决方案可能是使用sw-toolbox和匹配 URL 模式并缓存它们。每当您生成具有新指纹的文件时，它都会自动获取缓存，是的，它有一个可以自行管理旧缓存的问题。

第二种解决方案可能是sw-precache处理相同的问题，并且它具有自动处理旧缓存的优势。我已经尝试过了，但我发现有时即使在多个页面刷新甚至重新打开浏览器选项卡时资源也不会更新。

请建议！

不久前，我使用 appcache 构建了一个离线的第一个应用程序，并希望将其转换为使用 service-worker（我的客户都使用最新的 chrome，所以我没有任何浏览器兼容性问题）。

我正在使用 sw-precache 生成一个缓存我的本地资产（特别是我的 html/css/fonts 和一些 js）的服务工作者，看起来当服务工作者安装时，它确实成功添加了所有资产缓存存储并且它确实成功启动（安装并激活火并成功完成。我在安装事件结束时有 self.skipWaiting() 来启动服务工作者（它也成功地完成了））。

问题是“获取”事件似乎永远不会触发。因此，如果我离线或打开浏览器（虽然已经离线）并导航到该站点，我会得到 Chrome 离线恐龙。当我查看网络选项卡时，看起来浏览器正在尝试访问服务器以检索页面。我不确定自己做错了什么，也没有触及 sw-precache 实用程序生成的 fetch 方法......所以我不确定我错过了什么。任何帮助将不胜感激。我的 fetch 事件如下：

} });

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

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

1. 如果我更新未预缓存的模板怎么办？如何确保更新 bundle.js/css 连同我的模板。

2. 如果我更新已经预缓存的模板怎么办。它是否总是与预缓存的 bundle.js/css 文件一起更新。

3. 最后一个用例，当我的模板已经预缓存但它有一些带有 src 属性的内联脚本并且这个脚本文件没有缓存在任何地方时。假设我对模板和脚本文件进行了一些更改。我应该遵循什么缓存方法来确保模板文件与脚本文件一起更新。

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

当我致力于构建渐进式网络应用程序时。我们正面临服务工作者的奇怪行为。

预期结果：只有一个网络请求应该针对一个资源。

实际结果：为每个资源发出两个网络请求 [

I'm trying to set up a service worker using sw-precache to cache assets from CDNJS to be used offline. Unfortunately, this doesn't seem to be working. Here's what I have so far:

Before any of the scripts are loaded in index.html:

And here's the Gulp task I'm using to generate the service worker:

When I run the app, I see Service Worker Registered logged to the console. However, if I disconnect my wifi the app fails to loads the scripts. What am I doing wrong?

我在运行时缓存选项中使用带有 sw-precache 的 sw-toolbox。但是当我访问 url 并在 devtools 中检查网络时，它显示从服务人员缓存而不是首先从网络缓存（如我所愿）。也许我只是不明白这两个库是如何一起工作的。我当前的实现使用 sw-precache 来缓存我的整个 webapp（非常小的 webapp）并使用运行时缓存选项，我首先使用了带有网络处理程序的 url 模式。我的想法是，即使整个应用程序都被缓存了，当我使用特定的 url 模式时，页面上使用的数据将从网络而不是缓存中获取。这是不正确的吗？

我正在使用 Webpack 和 swPrecache。swPrecache 为我生成了一个 service-worker.js 文件，我现在想将自定义代码附加到生成的文件中。

我创建了一个 Webpack 插件，将 babel 转换后的代码附加到 service-worker.js 文件中，如下所示：

但是，这不包括在require() 我要附加的文件中工作的代码。我相信我需要使用 Webpack 来生成 service-worker.js 文件，但我不确定如何做到这一点，可能是通过自定义入口点？