小编Mat*_*ton的帖子

Angular PWA 离线存储

我正在构建一个新的 Web 应用程序,即使没有互联网连接,它也需要无缝工作。我选择了 Angular 并且正在构建一个 PWA,因为它带有内置功能,可以使应用程序脱机工作。到目前为止,我让服务工作者完美地工作并由清单文件驱动,这很好地缓存了静态内容,并且我已将其设置为缓存一堆我想在应用程序离线时使用的 API 请求。

除此之外,我还使用 localStorage 来存储在用户离线时调用放置、发布和删除 API 请求的尝试。重新建立 Internet 连接后,存储在 localStorage 中的请求将发送到服务器。

在我的概念证明中,用户可以在离线时访问内容,编辑数据,一旦用户的互联网连接重新建立,数据就会与服务器同步。不过,这就是我的困境开始的地方。Service Worker 自动缓存了清单文件中定义的 API 请求数据,还有一个单独的数据存储用于离线时的数据编辑。这会导致用户编辑一些数据、保存数据、刷新页面并且数据由 Service Worker 缓存 API 提供服务。

是否有内置机制来更新 Service Worker 自动缓存的 API 数据?我不喜欢尝试手动解开它,因为它看起来很笨拙,而且我无法想象随着 Service Worker 的发展,它会成为未来的证明。

如果没有标准的方法来实现我需要做的事情,开发人员通过手动将离线数据全部存储在 IndexedDB/localStorage 来完全控制离线数据是否常见?即我可以调用 API 请求并编写一些代码,将结果以结构化格式缓存在 IndexedDB 中以形成离线数据库,然后在用户编辑某些数据时写回离线数据库,并在用户回来时上传任何数据编辑在线的。我不认为这样做会出现任何技术问题,似乎需要付出很多努力才能实现我希望成为标准功能的东西。

我对使用 Angular 进行开发还很陌生,但有多年的其他开发经验。因此,如果我问一些明显的问题,请原谅我,我似乎找不到一篇关于与服务工作者一起使用数据存储的最佳实践的好文章。

谢谢

progressive-web-apps angular-service-worker angular8

9
推荐指数
1
解决办法
3692
查看次数