Javascript detect if native emoji is supported

user_3985356 0
Viewed 362

I would like to detect if native emoji is supported.
Only if it does not, I will then load emoji font to save bandwidth and also make the application look more native.

However, as I search through the Internet, I only found someone using userAgent to check if emoji is supported or not.
For example, the below code is from https://github.com/github/g-emoji-element/blob/master/emoji-detection.js, 

export function isEmojiSupported(): boolean {
  const onWindows7 = /\bWindows NT 6.1\b/.test(navigator.userAgent)
  const onWindows8 = /\bWindows NT 6.2\b/.test(navigator.userAgent)
  const onWindows81 = /\bWindows NT 6.3\b/.test(navigator.userAgent)
  const onFreeBSD = /\bFreeBSD\b/.test(navigator.userAgent)
  const onLinux = /\bLinux\b/.test(navigator.userAgent)

  return !(onWindows7 || onWindows8 || onWindows81 || onLinux || onFreeBSD)
}

Though the regular expression may not be perfect, as Firefox in Windows 7 does support Emoji as from http://caniemoji.com/.

However, as different browser or libraries may have different set of emoji, some emoji may render perfectly in one browser, and some just not render very well.

So is there a better method other than using userAgent to check if Emoji is supported?

emoji javascript
1 Answers

Rather than trying to detect, I would suggest loading the font with all the glyphs you want, and using font-display: swap in your CSS.

Then, your page can still be shown while the loading of this extra font is still occurring.

See also: https://css-tricks.com/font-display-masses/

user_3625360
Related