PWA：在后台轮询数据答案

【问题标题】：PWA: Polling for data in the backgroundPWA：在后台轮询数据
【发布时间】：2020-04-21 11:03:55
【问题描述】：

我的 PWA 应用需要在应用正在使用或在后台运行时从 API 轮询新的“通知”。

我正在将 NuxtJS 与 Vuex 一起使用，并且已经有一个执行请求并添加到状态以及索引数据库的操作 (Promise)。

我需要每 5 分钟调用一次此操作，并为我尚未看到的响应中的 id 创建通知。

我可以做通知部分，但我不知道如何调用我的 Vuex 操作。我可以调度操作还是需要以某种方式将我的承诺导入服务人员？

在 Nuxt PWA [nuxt.config.js] 中，您可以将文件添加到 pwa.workbox.importScripts 数组，但包括我的 store 文件之一不起作用，因为服务人员正在它自己的目录和我的商店中查找文件文件已被压缩，例如

pwa: {
  workbox: {
    importScripts: [
      'custom_sw.js',
      '~/store/test.js'
    ]
  ...
  }
}

如果我也没有办法，我只好重写获取和解析代码，但这效率很低。

如果有任何建议，我将不胜感激！

【问题讨论】：

标签： vue.js nuxt.js service-worker progressive-web-apps

【解决方案1】：

在 Service Worker 中运行的代码与在页面上运行的代码位于不同的范围中。换句话说：如果您的“常规 JS 代码”（在窗口范围内运行的 JS）上有一些变量/函数/任何内容，则无法从 Service Worker 范围内访问它们，反之亦然。它们是两个完全不同的执行范围。

为了在这两个执行范围之间“共享”某些东西是使用 postMessage API。使用 postMessage，您可以将消息从窗口范围发送到 Service Worker 并返回。基本上，您为消息注册事件侦听器并使用 postMessage API 将某些内容发送到另一端。然后，在接收端，你可以为所欲为。

在谈论 Vuex 操作和 Service Worker 时，您最喜欢这样的内容：

在页面上添加消息事件监听器（窗口范围）
Service Worker 使用 postMessage API 向页面发送带有一些信息的消息（通知消息：blaa blaa）
事件侦听器使用来自 SW 的消息运行函数
该函数通过消息调度 Vuex 操作

这里的关键是您不能从 Service Worker 内部调度 Vuex 操作，因为在那里运行的代码无法访问 Vuex 存储。您可以通过 postMessage 发送消息来解决此问题。更多：https://developer.mozilla.org/en-US/docs/Web/API/Client/postMessage

【讨论】：