angular - Angular PWA 无法在 Safari 和旧浏览器上脱机工作

Question

我按照以下方式创建了我的 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

标签： angularmanifestservice-workerprogressive-web-apps

Answer 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 之下。希望你能得到更好的答案。干杯：）将站点添加到主屏幕或允许推送通知，如果采用这 4 个选项中的任何一个，chrome 会将其转换为持久存储，因此不会在其上发生 LRU。在 Firefox 中，您必须对其进行显式编码，并且浏览器会使用弹出窗口询问用户是否对持久存储感到满意。我知道我已经转移了，但这一切都在 PWA 之下。希望你能得到更好的答案。干杯：）将站点添加到主屏幕或允许推送通知，如果采用这 4 个选项中的任何一个，chrome 会将其转换为持久存储，因此不会在其上发生 LRU。在 Firefox 中，您必须对其进行显式编码，并且浏览器会使用弹出窗口询问用户是否对持久存储感到满意。我知道我已经转移了，但这一切都在 PWA 之下。希望你能得到更好的答案。干杯：）