Angular 7 PWA web storage choices

Question

I am creating a PWA application using Angular 7. I am deciding on how to store some data locally and have two choices:

1. LocalStorage
2. IndexedDB

The advantages of the localstorage are

1. Syncronous
2. Returns string

The disadvantges of the locstorages

1. ServiceWorker cannot access localstorage
2. Not secure

Advantages of IndexedDB is

1. More storage space than localstorage
2. Can store and retrieve objects
3. Promise based

Disadvantes of IndexedDB

1. Not available in Firefox Private Sessions

Now for storing data if I use IndexedDB, users from Firefox Private sessions will not be able to use my web site and If I use localstorage I cannot leverage ServiceWorker.

How do you overcome the above issues with IndexedDB and LocalStorage?

Answer 1

Firstly, understand that PWA or Progressive Web App by definition must support all Browsers and should be Progressive in nature, i.e., depending upon the capabilities of a browser the app must adapt and choose what features to leverage in order to elate the user.

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).

Applying the analogy, Your app design must not SOLELY depend upon Database/Storage (or any other Browser feature) to render itself, but at the same time, it should be able to use them if supported by the Browser in order to provide better User experiences. (Meaning, PWAs should work even if say localStorage is not supported by some weird Browser - too much to ask !)

Elaborating further, Your app could try to use IndexedDB on a Browser, if not, provide an appropriate fall back mechanism (fall back need NOT essentially be Local storage at all!, but perhaps a simple render). IndexedDB is used to store large amounts of data which require rich query abilities, whereas, localStorage is similar to sessionStorage that persists even after you close the window, usually meant for storing some bunch of key/value pairs. Trying to use one over other would be incorrect - they are meant for different types of datasets/usecases.

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.

Good luck with your PWA !!!

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

Answer 2

Just a suggestion in that case why you can check whether the user in private browsing or not and if he then use local storage.
check PB Like this ->

var db = indexedDB.open("test");
db.onerror = function(){/Firefox PB enabled/};
db.onsuccess =function(){/Not enabled/};

For More Ref -> Detecting if a browser is using Private Browsing mode