Safari iOS 11.3 not adding to workbox-background-sync

Question

I followed a tutorial on service workers and background sync: https://codelabs.developers.google.com/codelabs/workbox-indexeddb/index.html?index=..%2F..%2Findex#0

When running on Safari iOS 11.3.1, the service worker is registered, since it is reported in the log (service worker installed'). But I don't get the Yay! Workbox is loaded ???? message.

IndexedDB works fine, with objects being updated on every fetch from the server.

However, when I deliberately go offline and perform a POST, nothing is written into the IndexedDB queue. My questions are: 1. Where can I inspect service workers in Web Inspector? 2. Does workbox-background-sync support Safari iOS 11.3.1? And if yes, what's wrong with my set up?

Jorge Valvert Jorge Valvert · Accepted Answer · 2018-08-20T16:47:45

You have an error on your service worker, so Workbox is not loading. In the example, you have to add a regex expresion:

Replace the following on your service worker:

workbox.routing.registerRoute(
  \/api\/add,
  networkWithBackgroundSync,
  'POST'
);

Using this:

const bgSyncPlugin = new workbox.backgroundSync.Plugin('offlineQueue', {
  maxRetentionTime: 48 * 60 // 48 hours retention on Indexed DB (up to your needs)
});

workbox.routing.registerRoute(
      new RegExp('./api\/add'),
      workbox.strategies.networkOnly({
        plugins: [bgSyncPlugin]
      }),
      'POST'
    );

On Safari 11.3.1, You only will able to equeue the request, but full background support is not yet supported. check: https://github.com/GoogleChrome/workbox/issues/1466

Safari iOS 11.3 not adding to workbox-background-sync

1 Answers