问题标签 [sw-precache]

我正在使用 vanilla JavaScript 创建一个 SPA，目前正在设置sw-precache来处理资源的缓存。服务工作者作为gulp构建的一部分生成并成功安装。当我在离线时导航到根 url ( http://127.0.0.1:8080/ ) 时，应用程序外壳会显示，说明资源确实被缓存了。

我现在正试图让 SW 处理内部路由而不会失败。当导航到http://127.0.0.1:8080/dashboard_index离线时，我收到消息“无法访问站点”。

该应用程序通过用户操作上的一系列事件侦听器在客户端处理此路由，或者在使用后退按钮的情况下，通过 url。访问这些 url 之一时，不应调用服务器。因此，服务工作者应该允许这些链接“通过”到客户端代码。

我已经尝试了一些事情，并希望这个 Q/A能够解决问题。我已经包含了generate-service-workergulp 任务的当前状态，并且通过此设置，我希望能够正常访问/dashboard_index。一旦这个工作正常，我可以调整解决方案以涵盖其他路线。

非常感谢任何帮助。

更新

应用程序的代码可以在这里找到。

删除该选项navigateFallbackWhitelist不会改变结果。

脱机时导航到/dashboard_index将以下内容打印到控制台。

• 获取http://127.0.0.1:8080/dashboard_index网络::ERR_CONNECTION_REFUSED
• sw.js:1 获取脚本时发生未知错误。
• http://127.0.0.1:8080/sw.js加载资源失败：net::ERR_CONNECTION_REFUSED

An unknown error occurred when fetching the script.在 chrome 调试工具的“应用程序 > 服务人员”选项卡中也有相同的内容。

还注意到该runtimeCaching选项不缓存从该路由返回的 json 响应。

根据 sw-precache 文档https://github.com/GoogleChrome/sw-precache#runtime-caching包括 sw-precache 的运行时缓存配置本身应该负责包括 sw-toolbox 用于动态内容的运行时缓存。我已经尝试将它与 sw-precache 的 CLI 以及 grunt-sw-precache 一起使用。我对 Grunt 的配置如下：

});

在尝试使用 CLI 时，我使用了以下 sw-precache-config.js：

除了 runtimeCaching 选项之外的所有配置选项都应用于生成的 service-worker.js 文件。

我的 package.json 配置为使用 sw-precache 的“^4.2.3”和 sw-toolbox 的“^3.4.0”。

我没有看到其他人评论有这个问题。谁能评论阻止 sw-precache 尊重我的 runtimeCaching 选项的问题可能是什么？

我目前正在使用 Polymer + service workers 实现 PWA。

一般来说，服务人员工作正常。如果我运行我的应用程序，一切都很好。我可以看到 Service Worker 缓存中填充了图像、html 文件、字体等等。这一切都很好。即使离线，带有图像等的页面也会正确加载。

问题是动态数据何时发挥作用。

我得到以下信息：

只有在离线模式下，Service Worker 才会生成真正不多说且不可调试的错误：“获取脚本时发生未知错误”

并且只有在离线模式下才会显示控制台中的错误。我想要实现的当然是没有错误；在灯塔中，我希望“离线时 URL 以 200 响应”为绿色/选中。

我的文件夹结构如下：

以下代码是我的 polymer.json + sw-precache-config.json Polymer.json：

sw-precache-config.json：

我正在尝试使用sw-precache，但我一定做错了什么！

我主要使用github repo提供的演示代码，似乎无法获得应用程序的更新。一旦它第一次被缓存，它就永远不会检查新版本。

我期待当我发布一个新的服务工作者时，浏览器会请求新的服务工作者并在后台相应地更新缓存。然后使用示例中的注册码，我将能够提示用户刷新并从他们新刷新的缓存中获取最新版本。

如果有人能指出我正确的方向，我将不胜感激。

例子

为了演示这个问题，我在这里创建了一个独立的示例： https ://github.com/stevenocchipinti/sw-precache-demo

该示例使用一个基本骨架，create-react-app其中有一个内置的构建任务，负责对文件名等进行指纹识别。

我怀疑问题出在我使用以下sw-precache配置缓存所有内容：

回购的自述文件中有更准确的步骤，但我为重现问题而采取的基本步骤如下（我的预期可能不正确）。

步骤和假设

1. 浏览到
   我应该Content is now available offline!在控制台中看到的第一个应用程序

2. 重新加载页面
   控制台中的消息不应再次出现，因为已安装服务工作者，但页面应该仍然有效。

3. 离线并重新加载页面
   该页面应该仍然可以工作

4. 对源代码进行可见的更改

5. 重建（运行构建任务和sw-precache）

这就是我的理解一定是错误的

6. 重新加载页面

   • Service Worker 应该在后台更新缓存
   • 完成后，您应该New or updated content is available.在控制台中看到
   • 在下一次重新加载之前，实际可见的更改不应该是可见的

7. 重新加载页面

   • 这次浏览器将使用新的缓存
   • 现在应该可以看到更改！
   • 控制台中不应有任何消息

问题

一旦应用程序最初被缓存，它将永远不会更新，除非您取消注册服务工作者或强制重新加载。

我不确定如何完成这项工作 - 任何帮助将不胜感激！

我正在使用 sw-precache-webpack-plugin 为我的项目生成服务工作者，我可以在缓存存储中看到我所有的字体、js 和 css 文件，但看不到 index/html 文件，并且当我去时它不工作离线。我还收到“无法安装站点：未检测到匹配的服务人员”。当我尝试添加到应用程序清单上的主页时。

我的堆栈是一个通用的 React + redux 应用程序，带有 Express + ejs 用于索引文件。我不确定是不是因为我使用的是 ejs 而不是默认的 html 文件，但它似乎找不到该文件。有没有办法可以指定模板？我的 sw-precache-webpack-plugin webpack 设置是：

任何意见，将不胜感激

我有一个通过 webpack 生成的构建文件夹，知道如何缓存整个文件夹，我尝试了以下但无济于事

关于如何缓存整个构建文件夹文件的任何帮助。我没有使用 webpack 插件，只是在 SW 上写了我的。

考虑以下场景：

我的快速服务器为我的单页应用程序的“/”路由动态生成 HTML。

当用户离线时，我想重新提供与服务工作者 navigateFallback 相同的生成 HTML。

我在我的 webpack 配置中使用https://www.npmjs.com/package/sw-precache-webpack-plugin 。

例如，如果我通过 html-webpack-plugin 生成一个 index.html，并将 index.html 设置为我的 navigateFallback 文件，那么服务工作者会正确地提供该生成的文件。

但是，我看不出有任何方法可以使动态渲染的索引 html（实时服务器为“/”路径返回的内容）被缓存并用作离线 html。

我正在使用 sw-precache 通过 Polymer CLI 构建过程生成我的服务工作，因此它旨在更新已更新文件的哈希以表示需要更新缓存。但是我更新的内容没有在缓存中被替换，所以如果我用 ctrl+r 刷新它会得到一个旧版本，但如果我用 ctrl+shift+r 刷新它就会得到新版本。一个原因可能是我的服务人员没有更新。

该文档指出

如果 service worker 文件与它当前拥有的文件相比甚至有一个字节的差异，它就会认为它是新的。

，但是如果我的新服务人员没有更改一个字节怎么办？（如果只有一个哈希发生了变化，就会发生这种情况）。如何配置 sw-precache 以在每次新请求时更新服务工作？

我正在使用服务人员设置我的 preactjs 网站。

使用Sw-precache-plugin

我只是在查看它存储在缓存存储中的缓存项，我期望的条目都在那里，但它们的响应为空。

我用服务人员检查了其他一些网站，发现他们的条目有“OK”的响应。

只是想知道使缓存响应说“OK”而不是空白的触发器是什么。

我发现的另一个例子，有些返回 OK，有些返回空白

我将 sw-precache-webpack-plugin 用于我的 React 渐进式应用程序，在离线模式下我从 cacheStorage 获取模板，但它没有获取 css 或 js。不知道我哪里出错了。