diff --git a/README.md b/README.md index d6e896d5..df155b91 100644 --- a/README.md +++ b/README.md @@ -759,6 +759,9 @@ Using IndexedDB has a few advantages: 2. After the first load, there is no need to download, parse, and index the JSON file again, because it's already available in IndexedDB. 3. If you want, you can even [load the IndexedDB data in a web worker](https://github.com/nolanlawson/emoji-picker-element/blob/ff86a42/test/adhoc/worker.js), keeping the main thread free from non-UI data processing. +Note that because `emoji-picker-element` has a requirement on IndexedDB, it will not work +in enviroments where IDB is unavailable, such as [Firefox private browsing](https://bugzilla.mozilla.org/show_bug.cgi?id=1639542). See [issue #9](https://github.com/nolanlawson/emoji-picker-element/issues/9) for more details. + ### Native emoji To avoid downloading a large sprite sheet that renders a particular emoji set – which may look out-of-place on different platforms, or may have [IP issues](https://blog.emojipedia.org/apples-emoji-crackdown/) – `emoji-picker-element` only renders native emoji. This means it is limited to the emoji actually installed on the user's device. diff --git a/docs/index.html b/docs/index.html index 43f535f2..13d656eb 100644 --- a/docs/index.html +++ b/docs/index.html @@ -157,6 +157,13 @@

emoji-picker-element


     
+ @@ -191,6 +198,34 @@

emoji-picker-element

} picker.classList.toggle('has-custom', !!e.target.checked) }) + + // check for private browsing mode to show the warning + async function hasIDB() { + if (typeof indexedDB === 'undefined') { + return false + } + + try { + const idbFailed = await new Promise(resolve => { + const db = indexedDB.open('test-idb') + db.onerror = () => resolve(true) + db.onsuccess = () => { + indexedDB.deleteDatabase('test-idb') + resolve(false) + } + }) + if (idbFailed) { + return false + } + } catch (e) { + return false + } + return true + } + + if (!(await hasIDB())) { + $('.private-browsing-warning').style.display = 'block'; + } })