【问题标题】:Angular PWA not working offline on safari and old browserAngular PWA 无法在 Safari 和旧浏览器上脱机工作
【发布时间】:2019-01-30 13:54:50
【问题描述】:

我在此之后创建了我的 PWA: https://angular.io/guide/service-worker-getting-started

它可以在我的 Chrome 桌面上完美脱机运行,但不能在 iOS 12 Safari 或 Android 5 Chrome 上脱机运行。 我正在使用 http-server 命令从 localhost ssl 服务器访问 ip XXX.XXX.XXX:8080 的网络。

我不明白。我需要为服务人员不工作的旧浏览器和 safari 手动配置清单?或者我在 CLI 中生成的 Angular PWA 项目应该为我做所有事情?

示例我的代码 https://github.com/GuilhermeLessa/teste-pwa

【问题讨论】:

    标签: angular manifest service-worker progressive-web-apps


    【解决方案1】:

    我是新手还是忍不住在这里打字,请大家指正!最大 safari 支持(如记录)在移动设备上是 50Mib(并且 50Mb 用于 indexedDB 和 Cache Api),但在桌面上它说无限,我从来没有机会验证它。我使用 Express、Nodejs 和一些明显的 JS 开发了一个应用程序。它适用于 Chrome、Firefox 和 Opera(在 Android 设备上),MS Edge 38 版本似乎不支持它。 Safari 支持在离线时加载页面、文本和图像但不加载视频的方式,我认为这是 50Mib 限制的原因,因为我只在移动设备上尝试过。 MS Edge 版本 42 几乎完全支持(至少在我的 ASUS p027 上)没有得到安装了最新 MS Edge 的机器。另请注意,并非所有旧浏览器都支持您是否在清单中提及它,因为它们与服务工作者或缓存 API 不兼容。我知道制作应用程序 PWA 的步骤之一是拥有清单文件,但另一方面,PWA 确实可以在没有清单文件的情况下工作,只有灯塔的分数会低于 100%。所以,确切地说,我会说旧浏览器不支持 PWA,你会遇到麻烦。此外,Chrome 和 Opera 浏览器可以拥有多达 33% 的可用可用磁盘空间的存储池,并且每个源可能拥有多达 20% 的可用磁盘空间。 Firefox 池是可用磁盘空间的 50%,但源最多可能有 2048,这称为硬限制(上限可以小于此取决于池)。此外,浏览器执行 LRU(最近最少使用)策略,也称为临时存储的最大努力,但不适用于持久存储。对于 chrome 高站点参与度,或标记站点书籍(当书签标记小于 5),将站点添加到主屏幕或允许推送通知,如果采用这 4 个选项中的任何一个,chrome 会将其转换为持久存储,因此LRU 不会发生在它上面。在 Firefox 中,您必须对其进行显式编码,并且浏览器会使用弹出窗口询问用户是否对持久存储感到满意。我知道我已经转移了,但这一切都在 PWA 之下。希望你能得到更好的答案。干杯:)

    【讨论】:

    • 但甚至不能在 Android 5 上的 Chrome 上工作。我的问题是:即使生成正式的 Angular PWA 项目 CLI "ng add @angular/pwa --project project-name”。我需要手动创建清单吗?
    • 我之前尝试过创建清单,但它在 Safari iOS 12 和 Android 5 上的 Chrome 上都不起作用。但我会再试一次。
    • 老实说,我没有使用 Android 5 的经验。我有一个带有 android 7、Moto Android 8 的 ASUS 标签。对于它们,我可以向你保证,它们支持 chrome、opera 和 Firefox 以及 MS Edge(42 版本)。我刚刚搜索了 Android 5 的发布数据,我确信 Android 5 不会支持 PWA。就像您说的那样,它在您的桌面上运行良好,在您使用的操作系统和 Chrome 版本上运行良好。请记住,chrome、opera、FF 和 MS Edge 都支持它,但从某些版本开始支持。我会说,当旧版本不支持 PWA 时,是否可以将它们添加到清单中?不要这么认为!
    • 旧浏览器不支持 Service Worker,但支持 Manifest API Cache。这不是正确的做法吗?
    • 您在 Android 5 上使用的是哪个版本的 Chrome,您在使用 Android 5 的设备是什么?要运行 PWA,您必须注册 Service Worker!如果 Service Worker 已注册,它会在控制台中显示吗?如果是,那么您需要查看您的代码,它可能与未关闭标签一样小错误,也可能很复杂。您可以在浏览器中调试它。缓存 API 和 IndexedDB 是服务工作者的接口,如果您的浏览器/操作系统不支持 SW,那么它们在清单中的意义何在。 Chrome 支持最大 PWA,如果你的应用在 chrome 上运行,你需要它是认真的。
    猜你喜欢
    • 2020-01-19
    • 2021-08-11
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2015-11-14
    • 2020-12-29
    • 1970-01-01
    • 2014-09-26
    相关资源
    最近更新 更多