Sebuah cara untuk mendeteksi apakah browser support ECMAScript 5

Sebelumnya tim software engineer kami membuat website menggunakan ReactJS dengan ECMAScript 6 (ECMAScript 2015).

Ketika sudah dideploy dan mulai bisa diakses oleh publik, kami menerima banyak komplain karena website tersebut tidak muncul di browser mobile (Android/iOS) padahal versi Android/iOS-nya belum terlalu tua (Lollipop/iOS 9).

WTF! selidik punya selidik ternyata belum banyak browser yang dapat menjalankan ECMAScript 6. Kami mencoba untuk menurunkan versi ECMAScript menjadi ECMAScript 5, jadi kami tetap coding dengan ECMAScript 6 namun saat dideploy akan digunakan ECMAScript 5.

Untuk mencapai hal tersebut, kami menggunakan modul babelify untuk men-transform ECMAScript 6 menjadi ECMAScript 5. Dan akhirnya website kami dapat diakses dengan browser-browser yang kebanyakan dipakai user saat ini.

Namun hal tersebut tidak terjadi pada browser mobile Android dibawah versi 4.0 dan iOS 6. Pada browser tersebut website kami hanya tampil dengan layar putih. Kami memutuskan untuk tidak men-support browser tersebut, dan apabila diakses harus menampilkan informasi bahwa browser tersebut tidak disupport atau browser tersebut harus diupgrade.

Setelah googling sana dan googling sini, ketemu sama yang namanya kangax. Ini keceh banget, website tersebut sangat membantu untuk menemukan formula pengecekan apakah browser tersebut bisa mengakses website kita, atau tidak.

Contohnya; browser safari di iPad Generasi 1 tidak dapat mengakses website kita, Di-test-check menggunakan website kangax, dan kita menemukan bahwa browser safari tidak dapat menjalankan perintah ini.

function () { return typeof Function.prototype.bind == 'function'; }

Ada 1 perintah lagi untuk pengecekan apakah browser tersebut di-support atau tidak, yaitu :

Infinity = false;
var result = typeof Infinity == 'number';
Infinity = 1/0;
return result;

Dengan menggabungkan 2 perintah untuk pengecekan browser, kami menggunakan perintah dibawah ini untuk menentukan apakah browser tersebut di-support atau tidak.

<script type="text/javascript">
function f() {return typeof Function.prototype.bind == 'function';}
function c() {Infinity=false;var result=typeof Infinity=='number';Infinity=1/0;return result;}
if(!c()||!f()){window.location.replace("/browser-not-supported.html");} </script>

Dengan perintah tersebut, sampai saat ini kami belum menemukan kasus baru browser tidak dapat mengakses website kami. Terima kasih banyak kangax. :)