如何使用 nuxtjs/pwa 实现后台同步？

Question

我正在尝试通过@nuxt/pwa-module 在 Nuxtjs 中使用工作箱背景同步。

这是我在nuxt.config.js 文件中的工作箱属性：

workbox: {

    importScripts : [
        'sw-background-sync.js'
    ]

}

plugins/sw-background-sync.js 文件的内容：

console.log("backsync called")
workbox.routing.registerRoute(
    'https:\/\/example.com\/api\/Survey\/post.*',
    new workbox.strategies.NetworkOnly({
        plugins: [
            new workbox.backgroundSync.Plugin('myQueueName', {
                maxRetentionTime: 24 * 60
            })
        ]
    }),
    'POST'
);

默认情况下，离线缓存应该可以工作，并且工作正常。但是当我取消注释 importScripts 并刷新页面时，我在控制台中收到此错误：

backsync called
workbox-sw.js:1 Uncaught Error: Config must be set before accessing workbox.* modules
    at Proxy.setConfig (workbox-sw.js:1)
    at sw.js:8

任何关于如何使用 nuxtjs 实现 pwa 后台同步的示例都将不胜感激。

非常感谢。

Answer 1

其实我应该把脚本放在nuxt.config.js文件的workboxExtensions属性里面：

workbox: {

    workboxExtensions : '@/plugins/sw-background-sync.js'
}