1

I'm designing a website that needs a pre-loading of a few hundreds of MB client side before being able to use the service. Context: as the service is supposed to be used realtime with the lowest latency possible, then this pre-loading is mandatory; streaming the content "on-demand" is not an option (I have already studied alternate options and I confirm it's necessary).

Question: Since loading 400 MB is quite long for end-users, what options are available such that, if the user closes the browser, and then reopens the website, they don't have to re-download the 400 MB again?

One obvious solution would be localStorage, but this is limited to 10 MB (see What is the max size of localStorage values?).

What other options are there (the stored data should be available from JavaScript)?

I could ask the user to install a Chrome extension, but would it allow storage of more than 10 MB?

Basj
  • 41,386
  • 99
  • 383
  • 673

1 Answers1

1

Considering only the storage issues... You don't have many choices.

  1. IndexedDb. No further permission is required to build and operate on IndexedDB. IndexedDb is supported by major browser (you have to check for Safari) IndexedDb is a strange object, you will see while you'll study it. You can create, read, update and delete almost as if you were working on a real database. I wouldn't call it a relational database as Oracle, mySQL, Sql server... However, it is a transactional database.

  2. File System Access API. This solution requires the user agreement to consent the access to the user file system (through a "user gesture" and it is lost every time user quit from Browser session - it's boring). It might be fine if your 400 Mb data is not a structured data, e.g. a audio/video file that user plays.

    Note that it works even with no extension. More information can be found here. Here is an example: https://googlechromelabs.github.io/text-editor/

I suggest you the first way.

Basj
  • 41,386
  • 99
  • 383
  • 673
Robbi
  • 1,254
  • 2
  • 8
  • 11
  • Thank you @Robbi! Does the visitor of the website need to enable special features in the browser to allow the use of IndexedDB? For 2., I guess the answer is yes, because by default a website doesn't have access to the filesystem of the user (luckily!). What kind of alert does it to display to ask if the user allows the FS access? – Basj May 03 '21 at 13:50
  • 1. No, no further permission is required to build and operate on indexedDB. IndexedDb is supported by major browser (you have to check for Safari) IndexedDb is a strange object, you will see while you'll study it. You can create, read, update and delete almost as if you were working on a real database. I wouldn't call it a relational database as Oracle, mySQL, Sql server ... However, it is a transactional database (which is no small thing!). – Robbi May 03 '21 at 15:06
  • 2. With FSA now you can access to FS but only with user agree. Consent must be given through a "user gesture" and it is lost every time user quit from Browser session (it's boring). It might be fine if your 400 Mb data is not a structured data, e.g. A audio\video file that user plays. – Robbi May 03 '21 at 15:06
  • Thanks @Robbi! Feel free to edit to include all these very useful details into the question, it will be great for future reference! PS: Do you have an example of website showing 2.? I'd like to see how is the user experience / how is the consent to access FS given. – Basj May 03 '21 at 19:20
  • There are several use case for indexedDb in web site and extension. You should do some Google search. It is also important to know what kind of resources your service will use to adress you to the best choice. If you make a poor choice it is easy that you will regret it later. For 2, If you want to see how FSA consent popup is try this tiny extension: https://wetransfer.com/downloads/c344c230ad6785a09f5a74be48fe917220210503212917/4e1793 – Robbi May 03 '21 at 21:50
  • Thank you @Robbi. I edited the question and added your useful comments + a link to an example web page using FSA. – Basj May 04 '21 at 07:22