Angular 7 PWA 网络存储选择

Question

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

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

本地存储的优点是

1. 同步
2. 返回字符串

locstorages的缺点

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

IndexedDB的优点是

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

IndexedDB 的缺点

1. 在 Firefox 私有(private) session 中不可用

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

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

Answer 1

首先，了解 PWA 或 Pprogressive Web App 根据定义必须支持所有浏览器和本质上应该是渐进式的，即，根据浏览器的功能，应用程序必须适应并选择要利用的功能以取悦用户。

A quick analogy:

A Shark in a fish tank will grow 7 Inch but in the Ocean it will grow 7+ Feet.

• Your App is like a SHARK!

• Fish tank/Ocean is like your Browser !!

• Resources of Fish tank/Ocean are your Browser Features

Be it Fish tank or Ocean, a shark is still a shark (It looks like one, it preys). What differs is the scale/size/capacity/performance (e.g., Sharks in the Ocean have larger teeth and prey larger fish).

应用类比，您的应用程序设计不能完全依赖于数据库/存储(或任何其他浏览器功能)来呈现自身，但同时，如果浏览器支持，它应该能够使用它们，以便提供更好的用户体验。 (意思是，即使说某些奇怪的浏览器不支持 localStorage，PWA 也应该工作——要求太多了!)

进一步阐述，您的应用程序可以尝试在浏览器上使用 IndexedDB，如果没有，请提供适当的回退机制(回退根本不需要本地存储!，但也许是一个简单的使成为)。 IndexedDB 用于存储大量需要丰富查询能力的数据，而 localStorage 类似于 sessionStorage，即使在您关闭窗口后仍然存在，通常用于存储一些键/值对。尝试使用一个而不是另一个是不正确的 - 它们适用于不同类型的数据集/用例。

In short, in PWA context, it is WRONG to think "IndexedDB or Local Storage?", but to consider what experiences you want to provide your users based on limiting Browser features at your disposal.

祝你的 PWA 好运!!!

Interesting read on available storage options on different browsers https://developers.google.com/web/fundamentals/instant-and-offline/web-storage/#comparison