首页 > 解决方案 > Cordova PWA 应用程序离线模式

问题描述

我制作了一个 Angular + 工作箱应用程序,现在使用 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 上,这以某种方式无法被缓存,或者发生了一些不同的事情。

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

标签: ioscordovaservice-workerprogressive-web-appsworkbox

解决方案


回答

Cordova 在最新 iOS (12.0.1) 中使用的 WebView 将不会运行 Workbox,因为它不支持 Service Worker。

细节

Cordova 应用程序在 WebView 中运行。

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

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

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

下一步

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

此外,您可能还需要添加 Background Sync 支持,因为最新的 Safari不支持 Background Sync。例如:cordova-plugin-service-worker-background-sync

Workbox 文档声明它们在不支持后台同步时提供回退策略:

Workbox Background Sync...还为尚未实现 BackgroundSync 的浏览器实现了一个后备策略。资源

然而,Github 上的一个未解决问题表明,后备策略可能不适用于 iOS。


推荐阅读