Angular PWA 离线存储

Angular PWA Offline Storage

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

除此之外,我还使用 localStorage 来存储在用户离线时调用 put、post 和 delete API 请求的尝试。重新建立互联网连接后,存储在 localStorage 中的请求将发送到服务器。

到目前为止,在我的概念验证中,用户可以在离线时访问内容、编辑数据,一旦用户重新建立互联网连接,数据就会与服务器同步。这就是我的窘境开始的地方。有 API 请求数据由清单文件中定义的服务工作线程自动缓存,并且有一个单独的数据存储区用于离线时的数据编辑。这导致用户编辑一些数据,保存数据,刷新页面并且数据由缓存的 service worker 提供服务 API 的情况。

是否有内置机制来更新由 Service Worker 自动缓存的 API 数据?我不喜欢尝试手动取消选择它,因为它看起来很老套,而且我无法想象随着服务工作者的发展,它会成为未来的证明。

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

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

谢谢

我有一个项目,我的用户可以在离线时编辑本地数据,我使用 Cloud Firestore 使本地数据库缓存可用。如果我理解正确的话,这正是您的要求。

这个解决方案的好处是,只需一行代码,您不仅可以获得本地数据库,而且一旦客户端再次上线,所有离线所做的更改都会自动同步到服务器。

firebase.firestore().enablePersistence() 
  .catch(function(err) {
      // log the error
  });

// Subsequent queries will use persistence, if it was enabled successfully

如果您可以选择使用此 NoSQL 数据库,我会选择它,否则您需要自己实施本地更新,因为没有内置的解决方案。