IndexedDB fails in Firefox private mode

[danburzo]

Firefox currently does not allow interacting with IndexedDB in Private Mode (meta issue here), so emojis fail to load in this scenario.

Tested in FF 77.0.1 / macOS Private Mode.

[mustafa0x]

Also if cookies are disabled in most/all browsers

[nolanlawson]

Yup, Firefox has had that bug for some time. I kind of struggled with this, but decided not to deal with it for the time being.

If indexedDB is disabled or throws an error, then frankly that's a privacy leak, because now the website knows you're in private browsing mode. Incidentally, this is how most news websites detect Firefox's private browsing.

You can work around this by using Firefox containers instead, as they don't have this limitation. I'm hoping that soon Mozilla will just use their container implementation for private browsing.

Arguably I could have a different error message or something. The only other alternative is to re-implement all of the IndexedDB logic as in-memory, which obviously 1) bloats the JS size, and 2) defeats the purpose of using IndexedDB. Tough problem!

[danburzo]

Makes sense! (And I agree about the IDB failure being a privacy leak.)

Since it's an issue that's theoretically going away eventually (or at least the intention to fix IDB in private mode is there), I think waiting it out with a note in the docs is a fair resolution. People can then go as far as conditionally loading the component iff IDB is available, and direct users to the OS-provided emoji UI otherwise.

[nolanlawson]

Yep, alternatively we could at least show the custom emoji if IDB is unsupported. This would at least fill the one gap that the built-in OS picker can't fill.

[jordan-breton]

OK guys, so I faced this problem today and since I need to have this functionnality in private mode for Firefox, I managed to use some dirty trick to allow a fallback MemoryDB to mimic the IndexedDB and provide an emoji picker even in these conditions.

WARNING : It's a DIRTY and QUICK trick. In my case, I don't need the search and the 'favorites' features, so I just did it to 'work' without error. It will not return the same result as the default db behaviour, but fell free to adapt this solution to your usecase.

So, if you want to implement that fallback, you need to change the index.js file, line 2186 to 2189.
Before :

console.error(err);
$$invalidate(9, message = i18n.networkErrorMessage);

After :

if (window && window['emoji-picker-fallback-db']){
    console.warn("Fallback db loaded");
    $$invalidate(40, database = new window['emoji-picker-fallback-db']({dataSource, locale}));
} else{
    console.error(err);
    $$invalidate(9, message = i18n.networkErrorMessage);
}

Then, you just need to include a DB that will have the same interface as the default emoji-picker's one.

See this gist to get the file : https://gist.github.com/AriartWt/407d854d5c487feb06d9c6a7e5a1a0a9

And Thanks to the author, this emoji picker is genious. The only features I would want to see is a way to disable search & favorites from the html declaration. Not a major change, since I currently hide it with css, but it would be easier to use anyway.

Hope it will be usefull to someone :)

[nolanlawson]

Hmm, I wonder if another way would be to use fake-indexeddb as a fallback when IndexedDB is unavailable. I'd be happy to document this in the README.

[nolanlawson]

Ugh, looks like that's not possible:

TypeError: setting getter-only property "indexedDB"

So unfortunately right now modifying emoji-picker-element itself is the only way to make this work. That, and bugging Mozilla to fix the bug. 😛

[jordan-breton]

It would have been too easy, unfortunately...

The easiest way is, indeed, that Firefox fix his bug, but it's in place since 8 years now. It have been assigned since like... 2 years ago and have not been updated yet, I do not now if it will be fixed soon. It may take months if it's already on their roadmap, and years if they have more important concerns :/

That said, my dirty fix can be embeded in the emoji picker in a cleaner way. Basicaly, the only code I wrote is the MemoryDB class itself, since the other functions have been copy/pasted from your original source code.

Inserting a fake db in the base code of emoji-picker would not increase the file size too much. I'm unsure if leaving your internal DB open to injection like I do with the global window['emoji-picker-fallback-db'] = MemoryDB; is a good thing, but embed a memory DB to fallback like this is not a big deal. There is no indexDB feature that can't be easily implemented (except speed and efficiency...). Even the top favourites function isn't that hard to do efficiently. The worst would be the litteral search, but with a little of indexing beforehand while parsing the data for the first time, it can be enhanced to get some decent perfomances.

[nolanlawson]

Actually, it looks like the bug was just updated 3 days ago. So maybe Mozilla is working to fix this soon.

In any case, I also managed to get fake-indexeddb working. Rather than override indexedDB or IDBKeyRange itself, I just override its methods, and it works. Here is a working demo.

Since I consider this to be Mozilla's bug, and since there is a workaround, I'm going to close this issue for now. I'll document the workaround in the README.

[Madriix]

We are in 2023 and the bug is still not fixed on Firefox
I installed the fake-indexeddb.js script and it's working fine now, it's much better than an error that shows "Failed to load emojis"