Angular 7 PWA 网络存储选择

Question

我正在使用 Angular 7 创建 PWA 应用程序。我正在决定如何在本地存储一些数据并有两个选择：

1. 本地存储
2. 索引数据库

本地存储的优点是

1. 同步
2. 返回字符串

locstorages的缺点

1. ServiceWorker 无法访问本地存储
2. 不安全

IndexedDB 的优点是

1. 比本地存储更多的存储空间
2. 可以存储和检索对象
3. 基于承诺

IndexedDB 的缺点

1. 在 Firefox 私人会话中不可用

现在，如果我使用 IndexedDB 来存储数据，来自 Firefox Private 会话的用户将无法使用我的网站，如果我使用 localstorage，我将无法利用 ServiceWorker。

您如何克服 IndexedDB 和 LocalStorage 的上述问题？

Answer 1

首先，了解PWA或渐进式Web 应用程序的定义必须支持所有浏览器，并且本质上应该是渐进式的，即，根据浏览器的功能，应用程序必须适应并选择要利用哪些功能才能让用户满意。

一个简单的类比：

鱼缸中的鲨鱼会长到7 英寸，但在海洋中它会长到 7 英尺以上。

• 您的应用程序就像鲨鱼！

• 鱼缸/海洋就像您的浏览器！

• 鱼缸/海洋资源是您的浏览器功能

无论是鱼缸还是海洋，鲨鱼仍然是鲨鱼（它看起来像一条，它捕食）。不同之处在于规模/大小/容量/性能（例如，海洋中的鲨鱼有更大的牙齿并捕食更大的鱼）。

应用类比，您的应用程序设计不能完全依赖于数据库/存储（或任何其他浏览器功能）来呈现自身，但同时，如果浏览器支持，它应该能够使用它们，以便为用户提供更好的服务经验。（这意味着，即使某些奇怪的浏览器不支持 localStorage，PWA 也应该可以工作——要求太高了！）

进一步详细说明，您的应用程序可以尝试在浏览器上使用 IndexedDB，如果没有，请提供适当的回退机制（回退本质上根本不需要本地存储！，但可能是一个简单的渲染）。IndexedDB 用于存储大量数据，需要丰富的查询能力，而 localStorage 类似于 sessionStorage，关闭窗口后仍然存在，通常用于存储一些键/值对。尝试使用其中一种而不是另一种是不正确的——它们适用于不同类型的数据集/用例。

简而言之，在 PWA 上下文中，思考“IndexedDB 还是本地存储？”是错误的。，但要根据您可以使用的限制浏览器功能来考虑您希望为用户提供哪些体验。

祝你的 PWA 好运！

有关不同浏览器上可用存储选项的有趣阅读 https://developers.google.com/web/fundamentals/instant-and-offline/web-storage/#comparison