workboxworkbox-webpack-pluginnext-pwa

Can't get workbox BackgroundSyncPlugin to work with next-pwa, no requests show in network tab when offline


I'm planning to use next-pwa in conjunction with workbox's background sync plugin to retry offline POST/PUT/DELETE requests when the client is online.

I've set up a runtimeCaching entry:

   {
        urlPattern: /\/api\/.*$/i,
        handler: 'NetworkFirst',
        method: 'GET',
        options: {
            cacheName: 'apis-READ',
            expiration: {
                maxEntries: 16,
                maxAgeSeconds: 30 * 24 * 60 * 60 // 30 days
            },
            networkTimeoutSeconds: 10 // fall back to cache if api does not response within 10 seconds
        }
   },
   {
        urlPattern: /\/api\/.*$/i,
        handler: 'NetworkOnly',
        method: 'POST',
        options: {
            backgroundSync: {
                name: 'harvest-background-sync'
            }
        }
    },

It seems to be caching the GET requests but does nothing with the POST requests.


Solution

  • User error. I had some code in the app that checked navigator.online and skipped requests if the client is offline. Works perfectly with the above config after removing that.