docs: add warning about Firefox private browsing (#13)

Related to #9, we should at least communicate this.

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.

docs/index.html

@@ -157,6 +157,13 @@ <h1>emoji-picker-element</h1>
     <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 @@ <h1>emoji-picker-element</h1>
       }
       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>