Workbox: v3 - trouble getting Background Sync to work (on mobile safari 11.3.1)

[junelau]

Have read #1222 but unable to get background sync working on mobile safari.

In service-worker.js I have:

const bgSyncPlugin = new workbox.backgroundSync.Plugin("req-queue", {
    maxRetentionTime: 24 * 60 * 1,
    callbacks: {
      queueDidReplay: showNotification
      // other types of callbacks could go here
    }
  });

  const networkWithBackgroundSync = new workbox.strategies.NetworkOnly({
    plugins: [bgSyncPlugin]
  });
  console.log("in service-worker. registering routes to bgsync queue");
  workbox.routing.registerRoute(/\/*/, networkWithBackgroundSync, "POST");
  workbox.routing.registerRoute(/\/*/, networkWithBackgroundSync, "PUT");
} else {
  console.log(`Boo! Workbox didn't load 😬`);
}

In index.html:

<script>
    if ('serviceWorker' in navigator) {
      navigator.serviceWorker.register('service-worker.js')
        .then(() => console.log('service worker installed'))
        .catch(err => console.error('Error', err));
    }
  </script>

When starting the app, console reports that service worker is installed, but I'm not getting the workbox message. True enough, fetch requests are not being queued in IndexedDB. I can cinform that an object store req-queue is created.

Also opened an SO question

Help please? 😄

[jeffposnick]

As of today, the only browser that supports the Background Sync API is Chrome.

The workbox-background-sync library includes a runtime check to determine whether the current browser supports the Background Sync API, and it will effectively no-op if there isn't support: https://github.com/GoogleChrome/workbox/blob/58258558cc4d23a4a82316522b7a931932d2c049/packages/workbox-background-sync/Queue.mjs#L222

As additional browsers add support for the Background Sync API over time, the library should "automatically" start working for those users.

[calitidexvii]

@jeffposnick, is it true that there's a fallback strategy in place as mentioned in the docs? And if so, is it expected to work on iOS Safari 11.4+?

It also implements a fallback strategy for browsers that don't yet implement BackgroundSync.
https://developers.google.com/web/tools/workbox/modules/workbox-background-sync

And reading further:

Browsers that don't support the BackgroundSync API will retry the queue every time the service worker is started up.

I believe I see this strategy used in Firefox 62 when reloading the page after a failed fetch event and subsequent storage in the queue. From the console:

workbox Background sync replaying without background sync event

However, this same behavior is not observed in iOS Safari 11.4 (whereas other Workbox plugins are working normally).

For Reference, here's the code (working in Chrome and Firefox):

  const bgSyncExample = new workbox.backgroundSync.Plugin('exampleQueue', {
    maxRetentionTime: 2 * 24 * 60 // Retry for max of 48 Hours
  });

  workbox.routing.registerRoute(
    /\/api\/.*\/*.json/,
    workbox.strategies.networkOnly({
      plugins: [bgSyncExample]
    }),
    'POST'
  );

[jeffposnick]

CC: @philipwalton

[kdesimini]

Any updates on this? I'm running into the same issue with Android chrome not creating an indexdb database.

[calitidexvii]

@kdesimini, Are you specifically referring to the BackgroundSync module not creating an IndexedDB on a failed fetch event?

If not, please open a new issue with more details on your problem.

If yes, which browser/version is failing? (Chrome for Android or Android Browser?)

If you haven't already, you can check browser support for IndexedDB and Background Sync.

[philipwalton]

As I reported in https://github.com/GoogleChrome/workbox/issues/1908, the Safari-specific issue reported here may be due to IndexedDB bugs in Safari. If that's the case this problem will hopefully be solved when we make that change.

[philipwalton]

I'm going to close this as I believe the issue has been resolved. Please feel free to ping this thread if you're still having issues and I can re-open.