I am trying to use Modernizr to detect if a browser can use indexedDB.
In both Firefox71 and Chromium79, I'm not getting the expected result true for Modernizr.indexeddb.
test index.html:
<!DOCTYPE html>
<html>
<head>
<title>Main</title>
<script src="modernizr-custom-indexeddb.js"></script>
</head>
<body>
<script>
switch (Modernizr.indexeddb) {
case false: alert('false'); break;
case undefined: alert('undefined'); break;
case true: alert('true'); break;
}
switch (Modernizr.indexeddbblob) {
case false: alert('false'); break;
case undefined: alert('undefined'); break;
case true: alert('true'); break;
}
</script>
</body>
</html>
Command line config file to generate modernizr-custom-indexeddb.js:
{
"minify": true,
"options": [
"setClasses"
],
"feature-detects": [
"test/indexeddb"
]
}
When index.html is loaded, Modernizr is adding the css class indexeddb to the <html> tag. If I remove the switch/alert inline script, this happens almost immediately. The clue to the problem might be in the 'almost' -- the delay is less than one second but discernable.
In Chromium79, Modernizr.indexeddb is always undefined.
In Firefox71, Modernizr.indexeddb is almost always undefined (multiple reloads).
(Modernizr.indexeddbblob is always undefined in each).
In Chromium79, the css class indexeddb-deletedatabase is added about 6 seconds after indexeddb is added.
In Firefox71, the delay between the two is about 40 seconds!
My guess is that Modernizr.indexeddb is not getting set to true in time to be accessed by the switch/alert script. But perhaps I am using Modernizr incorrectly.
In load and execute order of scripts, the accepted answer makes reference to the loading and running of scripts. But the time when a script is run is not the same as the time when a script completes.
There will be a point at which Modernizr returns it's Modernizer.* values(s). Assuming the problem is a race condition, can this moment be detected by another script? Or is the only option a check...wait...check solution, such as suggested in the accepted answer to load jQuery script after JavaScript script has finished?
I have tried using setTimeout() on an anonymous function to call the switch/alert section, which does then yield the 'correct' results. But then the question is, for how long to delay...?
Or am I looking for the wrong solution?
Notes.
A)
Without setTimeout(), both results come back undefined.
When using setTimeout() the results are coming back true (for indexeddb) followed by undefined (for indexeddbblob).
So we can infer that undefined means either
feature not available
OR
result not yet returned
B)
load and execute order of scripts also says: "The relevant part of the HTML5 spec (for newer compliant browsers) is here. There is a lot written in there about async behavior. Obviously, this spec doesn't apply to older browsers (or mal-conforming browsers) whose behavior you would probably have to test to determine."
So it may be that the solution to this sync/async/race-condition issue (assuming that's what it is) cannot be applied to older/mal-conformant browsers. Which defeats the object of discovering if a browser can support something using a javascript-based system like Modernizr.
...so then presumably we need something like Babel... turtles all the way down?
I'm hoping for an answer which begins, "You're making things way too complicated" :)
