Using Background Sync API with next-offline

[Abby3017]

In the case of a feature/component request ✍️

I am using next-offline in my next project and I really appreciate this project for making offline experience implementation seamless for developers.

• Usage I want to use background-sync of workbox. But unfortunately, I am not getting idea how to use that using config passed in next-offline or use workbox package to implement that API in next.config.js file in nextjs or something else.
• Problem that feature addresses. If working example or docs can be provided for this. It would be great for developers to use this package more and get idea how to use background-sync API through next-offline. Here is next.config.js code -

const withCSS = require('@zeit/next-css');
const withOffline = moduleExists('next-offline')
  ? require('next-offline')
  : {};

  const nextConfig = {
    generateInDevMode: true,
    workboxOpts: {
      swDest: 'static/service-worker.js',
      runtimeCaching: [
        {
          urlPattern: /^http?.*/,
          handler: 'NetworkFirst',
          options: {
            cacheName: 'https-calls',
            networkTimeoutSeconds: 15,
            expiration: {
              maxEntries: 150,
              maxAgeSeconds: 30 * 24 * 60 * 60, // 1 month
            },
            cacheableResponse: {
              statuses: [0, 200],
            },
          },
        },
      ],
    },
  }

module.exports = withCSS(withOffline({
  cssModules: false,
  webpack: (config, { dev }) => {
    const originalEntry = config.entry;
    config.node = { fs: "empty" };
    config.entry = async () => {
      const entries = await originalEntry();

      if (
        entries['main.js'] &&
        !entries['main.js'].includes('./polyfills.js')
      ) {
        entries['main.js'].unshift('./polyfills.js');
      }

      return entries;
    };

    return config;
  },
  nextConfig
}));

module.exports = moduleExists('next-offline')
  ? withOffline(module.exports)
  : nextConfig

function moduleExists(name) {
  try {
    return require.resolve(name);
  } catch (error) {
    return false;
  }
}

Thanks for this great package.

[hanford]

@Abby3017 I've not used the Background Sync API w/ workbox.

What are some of the advantages to it?

[Abby3017]

According to this article, Background sync is a new web API that lets you defer actions until the user has stable connectivity. This is useful for ensuring that whatever the user wants to send, is actually sent.

This is provided in workbox. As next-offline uses workbox as dependency, I want to learn how it can be configured or used with next-offline.

[rrjanbiah]

@hanford Is this possible yet with next-offline?

[al06]

Is background-sync available in current version of next-offline?

[hanford]

@al06 I haven't tried, If it doesn't, can someone tell me what's not working / provide a repro?