CODEWITHSUNDEEP
ioscordovaservice-workerprogressive-web-appsworkbox
Lubudubu1010
Lubudubu1010

Reputation: 199

Cordova PWA application offline mode

I have made an angular + workbox application that now is converted using PWABuilder to Cordova project targeting ios platform.

Now my problem started with offline page, I want my application to work the same way it works on chrome browser with offline mode. That is, even if I'm in offline mode, I'm able to use website and store the requests for later on.

But on IOS device, when I open application, then turn airplane mode or disconnect wifi and re-run an app a white screen appears. (Offline page support is disabled in manifest.js - I don't need Offline.html)

I have registered routing by

workbox.routing.registerNavigationRoute('/');

And then 

// couple of following lines:
workbox.routing.registerRoute('regex with js,manifest...etc', networkFirstStrategy({cacheName} ...)

And the weird fact is that on ios this somehow can't be cached, or somethings different happens.

I'm waiting for any suggestions, or leads that can help me fix this behaviour.

Upvotes: 2

Views: 3561

Answers (1)

calitidex
calitidex

Reputation: 13

Answer

The WebView as used by Cordova in the latest iOS (12.0.1) will not run Workbox because it doesn't support Service Workers.

Details

Cordova apps run in a WebView.

The app executes in a WebView within the native application wrapper... source

The WebView in the latest production iOS (12.0.1) only supports Service Workers within three specific contexts, which doesn't include Cordova apps.

At this time [the Service Worker API] is only available in Safari, applications that use SFSafariViewController, and web applications saved to your home screen. source

Next Steps

It may be possible to add Service Worker support via a Cordova Plugin. For example: cordova-plugin-service-worker.

In addition, you may also need to add Background Sync support as the latest Safari does not support Background Sync. For example: cordova-plugin-service-worker-background-sync.

The Workbox docs state that they provide a fallback strategy when Background Sync is not supported:

Workbox Background Sync...also implements a fallback strategy for browsers that don't yet implement BackgroundSync. source

However, an open issue on Github shows that the fallback strategy may not work on iOS.

Upvotes: 1

Related Questions