Cordova PWA应用程序离线模式

Question

我制作了一个angular + workbox应用程序，现在使用PWABuilder将其转换为以ios平台为目标的Cordova项目。

现在我的问题始于离线页面，我希望我的应用程序以与具有离线模式的chrome浏览器相同的方式工作。 也就是说，即使我处于离线模式，我也可以使用网站并存储请求以备后用。

但是在IOS设备上，当我打开应用程序时，然后转为飞行模式或断开wifi并重新运行应用程序，将出现白屏。 （在manifest.js中禁用了离线页面支持-我不需要Offline.html）

我已经通过...注册了路由

workbox.routing.registerNavigationRoute('/');

然后

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

奇怪的事实是，在ios上无法以某种方式缓存它，或者发生了一些不同的事情。

我正在等待任何建议或线索，可以帮助我解决此问题。

Answer 1

答案

Cordova在最新的iOS（12.0.1）中使用的WebView将无法运行Workbox，因为它不支持Service Workers。

详细信息

Cordova应用程序在WebView中运行。

  

该应用程序在本机应用程序包装器内的WebView中执行... source

最新生产的iOS（12.0.1）中的WebView仅在三个特定上下文中支持Service Worker，其中不包括Cordova应用程序。

  

当前，[Service Worker API]仅在Safari，使用SFSafariViewController的应用程序以及保存到主屏幕的Web应用程序中可用。 source

后续步骤

可能可以通过Cordova插件添加Service Worker支持。例如：cordova-plugin-service-worker。

此外，您可能还需要将Background Sync支持添加为最新的Safari does not support Background Sync。例如：cordova-plugin-service-worker-background-sync。

Workbox文档指出，当不支持Background Sync时，它们提供了一种后备策略：

  

Workbox Background Sync ...还为浏览器实现了后备策略   尚未实现BackgroundSync。 source

但是，open issue on Github显示后备策略可能不适用于iOS。