Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

v3 - trouble getting Background Sync to work (on mobile safari 11.3.1) #1466

Closed
junelau opened this issue May 2, 2018 · 7 comments
Closed

v3 - trouble getting Background Sync to work (on mobile safari 11.3.1) #1466

junelau opened this issue May 2, 2018 · 7 comments

Comments

@junelau
Copy link

@junelau junelau commented May 2, 2018

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

This comment has been minimized.

Copy link
Collaborator

@jeffposnick jeffposnick commented May 2, 2018

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:

if ('sync' in registration) {

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

@jeffposnick jeffposnick closed this May 2, 2018
@calitidexvii

This comment has been minimized.

Copy link

@calitidexvii calitidexvii commented Sep 28, 2018

@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 jeffposnick reopened this Sep 28, 2018
@jeffposnick

This comment has been minimized.

Copy link
Collaborator

@jeffposnick jeffposnick commented Sep 28, 2018

@kdesimini

This comment has been minimized.

Copy link

@kdesimini kdesimini commented Dec 11, 2018

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

@calitidexvii

This comment has been minimized.

Copy link

@calitidexvii calitidexvii commented Dec 11, 2018

@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

This comment has been minimized.

Copy link
Member

@philipwalton philipwalton commented Feb 20, 2019

As I reported in #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

This comment has been minimized.

Copy link
Member

@philipwalton philipwalton commented Apr 5, 2019

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
5 participants
You can’t perform that action at this time.