'How to implement background sync with nuxtjs/pwa?

I am trying to use workbox background-sync in Nuxtjs via @nuxt/pwa-module.

this is my workbox property in nuxt.config.js file:

workbox: {

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

}

contents of plugins/sw-background-sync.js file :

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

Offline caching is supposed to work by default and it is working fine. but when I uncomment importScripts and refresh the page I get this error in console :

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

Any example of how to implement pwa background sync with nuxtjs would be appreciated.

Thank you very much.

Solution 1:^[1]

Actually I should put the script inside workboxExtensions property in nuxt.config.js file:

workbox: {

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

Solution 2:^[2]

When using workbox you can also put:

 strategyPlugins:[{
        use:'BackgroundSync',
        config: {}
      }],

I am still trying to find out what config to put in there.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1
Solution 2	Quinten Cabo

'How to implement background sync with nuxtjs/pwa?

Solution 1:[1]

Solution 2:[2]

Sources

Related Questions

Solution 1:^[1]

Solution 2:^[2]