Angular PWA离线存储

时间:2019-06-21 11:23:50

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

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

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

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

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

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

我刚开始使用Angular进行开发,但是有很多其他开发经验。因此,如果我要提出明显的问题,请原谅我,似乎似乎找不到关于与服务人员一起使用数据存储的最佳做法的好文章。

谢谢

1 个答案:

答案 0 :(得分:0)

我有一个项目,我的用户可以在离线状态下编辑本地数据,并且我使用Cloud Firestore来缓存本地数据库。如果我正确理解您的要求,那么这正是您的要求。

此解决方案的好处在于,只需一行代码,您不仅可以获得本地数据库,而且脱机进行的所有更改都将自动与服务器同步。

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

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

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