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

vuejs2 Vue.js

凯西里

2020-04-07

我正在尝试通过在Nuxtjs中使用workbox background-sync @nuxt/pwa-module

这是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后台同步的任何示例将不胜感激。

非常感谢你。

第4140篇《如何使用nuxtjs / pwa实现后台同步?》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

0个回答

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android