vue.js - PWA : Polling for data in the background

Question

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

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

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

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

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

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

如果我也没有办法，我只需要重写获取和解析代码，但这非常低效。

我将不胜感激任何建议!

Answer 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