docs: add warning about Firefox private browsing (#13)
Related to #9, we should at least communicate this.
This commit is contained in:
parent
57be573e3c
commit
04f490a6cb
|
@ -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.
|
||||
|
|
|
@ -157,6 +157,13 @@
|
|||
<div style="padding: 20px;" role="alert" aria-live="polite">
|
||||
<pre style="display:none;"></pre>
|
||||
</div>
|
||||
<div class="private-browsing-warning"
|
||||
style="padding: 20px; display: none; border: 2px dashed crimson;"
|
||||
role="alert">
|
||||
Note that <code>emoji-picker-element</code> currently does not support Firefox private browsing mode,
|
||||
or any other setting that disables IndexedDB. See
|
||||
<a href="https://github.com/nolanlawson/emoji-picker-element/issues/9">issue #9</a>.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script defer src="./focus-visible.js"></script>
|
||||
|
@ -191,6 +198,34 @@
|
|||
}
|
||||
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';
|
||||
}
|
||||
})
|
||||
</script>
|
||||
</body>
|
||||
|
|
Loading…
Reference in New Issue