I am using workbox v4.3.1 to provide offline capability to the users of the web application.
While everything works perfectly in Chrome as you would expect a PWA to work (i.e everything is cached locally, all the updates from the APP are captured in IndexedDB and synced back to the server when the application is back online.
However the major use case for me is to provide support for iOS Safari and as a PWA.
While all the pages are cached locally using the Service Worker in Safari and all the offline updates are also captured in the indexed DB as shown below,
However, when the connection returns online, the sync event is not triggered by the browser (Safari in this case). While background sync is not supported natively by Safari, I would expect that when I refresh the page, SW initialisation should trigger the sync event manually if it finds some data to be refreshed to the server in the indexed DB.
But this is not happening and I tried to manually listen for the "message" - "replayRequests" and then replay the requests - that did not work as well.
Any help here would be appreciated. Here is the service worker code for reference.
// If we're not in the context of a Web Worker, then don't do anything if ("function" === typeof importScripts) { importScripts( "https://storage.googleapis.com/workbox-cdn/releases/4.3.1/workbox-sw.js" ); //Plugins // Background Sync Plugin. const bgSyncPlugin = new workbox.backgroundSync.Plugin("offlineSyncQueue", { maxRetentionTime: 24 * 60 }); // Alternate method for creating a queue and managing the events ourselves. const queue = new workbox.backgroundSync.Queue("offlineSyncQueue"); workbox.routing.registerRoute( matchCb, workbox.strategies.networkOnly({ plugins: [ { fetchDidFail: async ({ request }) => { await queue.addRequest(request); } } ] }), "POST" ); // CacheKeyControlPlugin const myCacheKeyPlugin = { cacheKeyWillBeUsed: async ({ request, mode }) => { normalizedUrl = removeTimeParam(request.url); return new Request(normalizedUrl); } }; if (workbox) { console.info("SW - Workbox is available and successfully installed"); } else { console.info("SW - Workbox unavailable"); } //Intercept all api requests var matchCb = ({ url, event }) => { // Filter out the presence api calls return url.pathname.indexOf("somethingidontwanttocache") == -1; }; function removeTimeParam(urlString) { let url = new URL(urlString); url.searchParams.delete("time"); return url.toString(); } /* //Pre cache a page and see if it works offline - Temp code workbox.precaching.precache(getPageAPIRequestURLs(), { cleanUrls: false }); */ workbox.routing.registerRoute( matchCb, new workbox.strategies.CacheFirst({ cacheName: "application-cache", plugins: [myCacheKeyPlugin] }) ); self.addEventListener("message", event => { if (event.data === "replayRequests") { queue.replayRequests(); } }); } 
