Angular PWA离线存储 [英] Angular PWA Offline Storage

问题描述

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

I’m building a new web application which needs to work seamlessly even when there is no internet connection. I’ve selected Angular and am building a PWA as it comes with built-in functionality to make the application work offline. So far, I have the service worker working perfectly and driven by the manifest file, this very nicely caches the static content and I’ve set it to cache a bunch of API requests which I want to use whilst the application is offline.

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

In addition to this, I’ve used localStorage to store attempts to invoke put, post and delete API requests when the user is offline. Once the internet connection is re-established, the requests stored in localStorage are sent to the server.

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

This far in my proof of concept, the user can access content whilst offline, edit data and the data gets synced with the server once the user’s internet connection is re-established. This is where my quandary begins though. There is API request data cached automatically by the service worker as defined in the manifest file, and there is a separate store of data for data edits whilst offline. This leads to a situation where the user edits some data, saves the data, refreshes the page and the data is served by the service worker cached API.

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

Is there a built in mechanism to update API data cached automatically by the service worker? I don’t fancy trying to unpick this manually as it seems hacky and I can’t imagine it’ll be future proof as service workers evolve.

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

If there isn’t a standard way to achieve what I need to do, is it common for developers to take full control of offline data by storing it all in IndexedDB/localStorage manually? i.e. I could invoke API requests and write some code which caches the results in a structured format in IndexedDB to form an offline database, then writes back to the offline database whenever the user edits some data, and uploads any data edits when the user is back online. I don’t envisage any technical problems with doing this, it just seems like a lot of effort to achieve something which I was hoping to be standard functionality.

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

I’m fairly new to developing with Angular, but have many years of other development experience. So please forgive me if I’m asking obvious questions, I just can’t seem to find a good article on best practices for working with data storage with service workers.

谢谢

推荐答案

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

I have a project where my users can edit local data when they are offline and I use Cloud Firestore to have a local database cached available. If I understood you correctly, this would be exactly your requirement.

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

The benefit of this solution is that with just one line of code, you get not only a local db, but also all the changes made offline are automatically synchronised with the server once the client gets online again.

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

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

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

If using this NoSQL database is an option for you I would go with it, otherwise you need to implement the local updates by yourself as there is not a built in solution for that.

这篇关于Angular PWA离线存储的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！