我正在使用Angular 7创建一个PWA应用程序。我正在决定如何在本地存储一些数据并有两个选择:
本地存储的优点是
本地存储的缺点
IndexedDB的优点是
IndexedDB的缺点
现在,如果我使用IndexedDB存储数据,Firefox私密会话中的用户将无法使用我的网站,如果我使用localstorage,则无法利用ServiceWorker。
你如何克服IndexedDB和LocalStorage的上述问题?
首先,要了解PWA或Progressive Web App的定义必须支持所有浏览器,并且应该是渐进式的,即,根据浏览器的功能,应用程序必须适应并选择要利用哪些功能以激发用户兴趣。
一个简单的比喻:
鱼缸里的鲨鱼会生长7英寸,但在海洋中它会生长7英尺以上。
- 你的应用程序就像一个鲨鱼!
- 鱼缸/海洋就像你的浏览器!
- 鱼缸/海洋的资源是您的浏览器功能
无论是鱼缸还是海洋,鲨鱼仍然是鲨鱼(它看起来像一个,它捕食)。不同的是尺度/大小/容量/性能(例如,海洋中的鲨鱼有更大的牙齿和捕食更大的鱼)。
应用类比,您的应用程序设计不能完全依赖于数据库/存储(或任何其他浏览器功能)来呈现自身,但同时,如果浏览器支持它应该能够使用它们以便提供更好的用户经验。 (意思是,即使说某些奇怪的浏览器不支持localStorage,PWA也应该工作 - 太多了!)
进一步说明,您的应用程序可以尝试在浏览器上使用IndexedDB,如果没有,提供适当的回退机制(退回根本不需要本地存储!,但也许是一个简单的渲染)。 IndexedDB用于存储需要丰富查询能力的大量数据,而localStorage类似于sessionStorage,即使在关闭窗口后仍然存在,通常用于存储一些键/值对。尝试使用其中一个是不正确的 - 它们适用于不同类型的数据集/用例。
简而言之,在PWA环境中,想到“IndexedDB或本地存储?”是错误的,但要考虑您希望根据您可以使用的限制浏览器功能为用户提供哪些体验。
祝你的PWA好运!
有趣的读取不同浏览器https://developers.google.com/web/fundamentals/instant-and-offline/web-storage/#comparison上的可用存储选项
在这种情况下,只是建议您可以检查用户是否在私密浏览中,以及他是否使用本地存储。 检查PB像这样 - >
var db = indexedDB.open(“test”); db.onerror = function(){/ Firefox PB enabled /}; db.onsuccess = function(){/ Not enabled /};
更多参考 - > Detecting if a browser is using Private Browsing mode