在页面的 domready 事件中，我正在为一个按钮设置一个事件侦听器，该按钮在我的网站上的页面中设置后台同步事件（离线时），但即使服务工作者已经在之前的页面访问中加载，这行代码永远不会解决承诺，它的状态会无限期地保持“待处理”。

由于我知道在表单完成之前不需要设置同步事件，所以我尝试将此代码包装在 3 秒的 setTimeout() 中，这很有效！我的问题是为什么会这样，我找不到其他人表明 .ready 事件在页面首次加载时不可用。洞察力赞赏。

我已经使用 Workbox 几天了，我正确地将它设置为从源生成服务工作者，并且不要让 Workbox 为我生成它。

它工作正常，但现在我试图包含workbox-background-sync模块来存储一些失败的 POST 请求，但我无法让它工作。运行 SW 后，我在第一个 backgroundSync 行（第 9 行）上得到“ Uncaught TypeError: Cannot read property 'QueuePlugin' of undefined ”。这是生成的 ServiceWorker 文件：

我尝试使用 workbox.loadModule('workbox-background-sync') 加载它，这是我在 github 上找到的一种解决方法，但它仍然无法正常工作。self.workbox = new WorkboxSW()此外，以同样的信念尝试 。

PS：有没有办法在networkFirst这样的策略失败并且它会用缓存响应之后挂钩一个函数？因为我想知道，如果我得到一个缓存的响应，我想告诉用户，通过修改传入的响应并稍后在 Vue 中处理它。谢谢阅读！

我需要不断更新/刷新我的页面以确保它与我的服务器同步。目前，我正在使用 setInterval，但我读到 serviceWorkers 可能会以更好的方式解决我的问题。是否推荐使用 serviceWorkers？（后台同步似乎是一个很好的起点。）

或者还有其他选择吗？

我是 PWA 新手，一直在使用 firebase 控制台数据库测试我的 PWA 项目。离线时，indexedDB当我提交我的帖子数据时，我有代码保存我的帖子数据，以便稍后在有 WiFi（在线）时保存。它确实在找不到 WiFi 时保存了数据indexedDB，但是当我打开 WiFi 时，它不会实时发布我的数据。当我在wifi开启（在线）时提交新的帖子数据时，后台同步代码会indexedDB实时发布保存的数据和新的帖子数据。但我希望我的后台同步代码在打开 WiFi 时自动发布（离线后）。

这是我用于后台同步的服务人员代码：

我不知道出了什么问题。如果有人需要我的发布代码或服务人员代码的更多代码以更清楚，请询问。请帮我解决这个问题，因为我陷入了困境。

我从上周开始对 PWA 进行研究我发现 Workbox 是一个很好的实现选择，我尝试使用 React+worbox+webpack 实现 PWA 我能够创建 App 图标，缓存 GET apis 数据但无法缓存服务器端用户图像和 POST api。如果有人发现这种方法不正确，请建议我实现 PWA 的最佳方法。我正在寻求帮助或指导，以帮助我完成最后期限。感谢您的帮助。提前致谢

包.json

webpack.config.js

索引.html

清单.json

我正在使用 Chrome 66.0.3359.181（64 位）。我正在运行以下代码：

然而，即使我断开了我的 wifi，它仍然会立即触发同步事件。

回答：我实际上是在写它的时候想出来的，但是由于我没有找到其他人回答这类问题，而且我花了一个小时左右的时间，我想我还是会发布它。我启用了一个 VM 网络适配器（用于 Docker），这导致它尝试同步，即使该连接没有任何用处。

然后我还发现，如果我在同步事件失败时抛出错误，它会重试同步。最初我发现错误并只是登录到控制台，但这意味着同步认为它已完成。

我目前正在学习如何使用后台同步来允许用户在离线使用 Web 应用程序时进行 PUT/POST 更改。

我按照 Jake Archibald 在 Introducing Background Sync中给出的说明进行操作，一切都很好......只要我在在线加载网络应用程序时注册了 Background Sync 。我的意思是：

有效的步骤：

1. 在线时我打开网络应用程序
2. 我在网络选项卡中打开离线模式
3. 我单击了一些注册后台同步的按钮。
4. 我关闭了离线模式，所以应用程序重新上线。
5. 触发后台同步。

导致它停止工作的步骤：

即使在上述情况下，如果我执行以下操作，它也会完全停止工作：

1. 在另一个站点上时，我在网络选项卡中打开了离线模式。
2. 我导航到我的网络应用程序，感谢服务人员，该应用程序可以离线使用。
3. 我单击了一些应该注册后台同步的按钮。
4. 我在网络选项卡中关闭了离线模式。
5. 什么都没发生。
6. 在我转到“应用程序”选项卡并取消注册服务工作者并从全新安装重试后，第一步有效，但第二组步骤不断破坏后台同步

代码：

在页面中：

在服务工作者

更新

当代码工作时，我使用以下代码来跟踪发送到注册的标签：

当使用有效的步骤时，我得到

使用导致其停止工作的步骤时：

这让我相信同步注册发生了，但服务工作者listening不再存在。而且无论我做什么，比如关闭浏览器选项卡，在线刷新页面，等待一段时间，服务工作者都不会listen再同步事件了。

我知道这取决于浏览器来决定何时进行后台同步，但我只是不明白为什么这不起作用。除非预期的行为是期望用户在线时访问网络应用程序，否则我认为我做错了。

感谢您的耐心等待，我们将不胜感激任何理解如何使后台同步工作的帮助。

我正在使用 Workbox 使用后台同步插件。不幸的是，我的应用程序的插件没有按预期运行，它依赖于 CORS 请求。

我的应用程序首先发送一个选项预检请求以确保该请求被允许，然后发送真正的请求。

问题是当我离线时，在我的实际请求有机会保存在 IndexDb 中并稍后重播之前，预检请求失败并导致我的应用程序崩溃。

我该如何解决这个问题？

我目前正在按照文档中的建议配置我的后台同步，但是使用跨域端点，如下所示：

取自这里：https ://developers.google.com/web/tools/workbox/modules/workbox-background-sync

我想知道我是否也应该将OPTIONS请求添加到 IndexDB？

任何帮助，将不胜感激 ：）

我正在使用带有 React 的 TypeScript，我想要实现的一件事是后台同步以提供离线支持。

要为 service worker 启用类型，我必须包含 WebWorker 库，但它与 DOM 库冲突并产生错误：

所以我想知道除了输入我的大部分参数之外是否有任何解决方法any。

我刚刚发现了这个问题，因为我在使用 workbox-background-sync 时试图解决重复的发布请求问题。我的网络应用程序有一个上传照片的功能。但每次我确实两次上传到数据库。这是我的代码：

这可能是因为fetch(args.event.request.clone()). 如果我删除它，则不再有重复。我正在使用工作箱 3.6.1 。