Question

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

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

workbox: {

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

    runtimeCaching: [
        {
            urlPattern: 'https:\/\/example.com\/api\/Survey\/getSurvey.*',
            handler: 'networkFirst',
            method: 'GET'
        }
    ]

}

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'
);

runtimeCaching工作正常。但是当我取消注释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

实际上，我应该将脚本放在workboxExtensions属性中：

workbox: {

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

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

1 个答案: