角7 PWA网络存储选择

Question

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

1. LocalStorage
2. IndexedDB

本地存储的优点是

1. 同时
2. 返回字符串

选址的不利之处

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

IndexedDB的优势是

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

IndexedDB的缺陷

1. 在Firefox专用会话中不可用

现在，如果我使用IndexedDB来存储数据，来自的用户将无法使用我的网站，如果我使用本地存储，则无法利用ServiceWorker。

如何利用IndexedDB和LocalStorage解决上述问题？

Answer 1

首先，要理解PWA或P Web App在定义上必须支持所有浏览器，并且在本质上应该是渐进的，即根据浏览器的能力，应用程序必须调整并选择哪些功能来激发用户的兴趣。

一个快速的类比： 鱼缸里的鲨鱼会长出7英寸的，但在海洋里它会长出7+ Feet。

• 你的应用程序就像鲨鱼一样！
• 鱼缸/海洋就像你的浏览器!！
• 鱼缸/海洋资源是您的浏览器特色

不管是鱼缸还是海洋，鲨鱼仍然是鲨鱼(它看起来像鲨鱼，它捕食)。不同之处在于规模/大小/能力/性能(例如，海洋中的鲨鱼牙齿更大，猎物更大)。

应用类推，应用程序的设计不能仅仅依赖于数据库/存储(或任何其他浏览器功能)来呈现自己，同时，如果浏览器支持它，它应该能够使用它们，以便提供更好的用户体验。(这意味着，PWAs应该可以工作，即使某些奇怪的浏览器不支持localStorage --要求太多了!)

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

简单地说，在PWA上下文中，认为"IndexedDB还是Local？“是错误的，但是考虑您想要在限制可用的浏览器功能的基础上为用户提供什么样的体验是错误的。

祝你PWA好运！

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

Answer 2

在这种情况下，只是一个建议，为什么您可以检查用户是否在私人浏览中，以及他是否使用本地存储。

检查PB，像这样的->

var db = indexedDB.open("test")； db.onerror =/Firefox(){/Firefox PB已启用/}； db.onsuccess =function(){/Not已启用/}；

有关-> Detecting if a browser is using Private Browsing mode的更多信息