progressive-web-apps - Angular PWA离线存储

Question

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

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

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

是否有内置机制来更新服务 worker 自动缓存的API数据？我不愿意尝试手动取消选择它，因为它看起来很笨拙，而且随着服务人员的发展，我无法想象它会成为 future 的证明。

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

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

谢谢

Answer 1

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

该解决方案的优势在于，仅需一行代码，您不仅可以获得本地数据库，而且一旦客户端再次联机，脱机进行的所有更改都将自动与服务器同步。

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

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

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