Quiz questions are not loading when using multiple tabs

[schloerke]

reprex:

• Open many tutorials on shinyapps.io on different tabs.
• The first tutorial will work fine. Other tutorials will have problems advancing or saving progress (or any tutorial state) to the browser.

The tutorial tabs are all using localforage to access the indexeddb in the web browser. This DB only allows for a single connection per browser. Once the tab closes, that connection is released and the remaining tabs attempt to connect.

There is no warning or error.

This problem exists in v0.9.2, but the quiz questions would display before any answers were being restored. We could do this, but opted not to, as changing the UI after some non trivial time has passed is confusing. (The downside is that some tabs can not display their quiz questions.)

Original note:

learnr/inst/lib/tutorial/tutorial.js

Lines 1454 to 1457 in fe4fe44

	// initialize data store. note that we simply ignore errors for interactions
	// with storage since the entire behavior is a nice-to-have (i.e. we automatically
	// degrade gracefully by either not restoring any state or restoring whatever
	// state we had stored)

With indexeddb being widely supported (95%+), it could be used natively and localforage could be dropped as our requirements are slim (essentially key/value lookup). localstorage could also be used instead, but there is a limitation of 5mb per domain. indexeddb would be best going forward.

Known issues:

• https://stackoverflow.com/questions/51615658/using-indexeddb-operation-in-multiple-tabs
• IndexedDb is blocked if app is opened on multiple browser tabs. localForage/localForage#912
• Localforage / Cordova Issue: removeItem and clear not working in cordova-based hybrid mobile apps. localForage/localForage#179
  • using this.localforage._dbInfo.db.close() does close the connection. However, the connection was not allowed to reconnect. 😞