Internal Browser: ฝันร้ายของ Front-end dev

inline

ไม่แน่ใจเหมือนกันว่าทำไมแอพต่างๆ ถึงได้มีความพยายาม render url ลงบน webview ภายในแอพเอง (ที่เรียกว่า Internal Browser) แทนที่จะส่งผู้ใช้ออกไป external browser อย่าง chrome หรือ safari แต่ที่แน่ๆ คือแอพมือถือดังๆ อย่าง Facebook, LINE ล้วนใช้แนวทางนี้ด้วยกันทั้งสิ้น

ซึ่งมันก็คงจะไม่มีประเด็นอะไร หาก internal browser สามารถทำงานได้เช่นเดียวกับ browser ปกติ แต่ทว่าฟีเจอร์สำคัญหลายๆ อย่างได้ถูกตัดทอนออกไป เช่นในภาพตัวอย่าง ผู้ใช้บางคนไม่สามารถสตรีม m3u8 ใน internal browser ของ LINE ได้ หรือเคสโด่งดังก็เช่นเว็บสร้างภาพเรารักในหลวง loveking.earthchie.com ลองตามไปอ่านคอมเมนต์ท้ายเพจนะครับ มีคนมากมายไม่สามารถดาวน์โหลดภาพได้ ก็เนื่องจาก internal browser ไม่รองรับการดาวน์โหลดไฟล์นี่แหละ

ไม่ใช่เรื่องเล็กๆ เลย…

ข่าวร้ายอีกประการก็คือ ปัจจุบันไม่มีทาง force ให้เว็บเราเปิดใน external browser ได้เลย คือไม่ว่าจะยังไง ถ้าลิงก์เราถูกแชร์ผ่าน Facebook, LINE เมื่อผู้ใช้เปิดลิงก์ยังไงก็จะค้างอยู่ใน Internal Browser อย่างหลีกเลี่ยงไม่ได้ เสียหายหนักครับ Facebook, LINE นี่มัน Traffic หลักของทุกเว็บในเว็บปี 2016 เลยนะ

โชคยังดี…

เราสามารถเช็ค User Agent (UA) แล้วรู้ได้ว่าเค้ากำลังเปิดเว็บเราด้วย Internal Browser อยู่หรือไม่
ถึงแม้เราจะสั่งเปิดตัวเองใน Browser ไม่ได้ แต่เราขึ้นข้อความแจ้ง User ได้ว่าต้องเปิดเว็บใน External Browser นะ
จะยิ่งดีขึ้นไปอีก ถ้าทำ Tutorial สอนด้วยเลยว่าต้องทำยังไง แสดงข้อมูลเจาะจงตาม OS ได้เลย Android/iOS เพราะเรารู้จาก UAอยู่แล้ว

ตัวอย่าง User Agent จาก Android ครับ

Facebook

Mozilla/5.0 (Linux; Android 7.0; Nexus 6P Build/NBD90Z; wv) AppleWebKit/537.36 (KHTML, like Gecko) Version/4.0 Chrome/54.0.2840.68 Mobile Safari/537.36 [FB_IAB/FB4A;FBAV/101.0.0.18.70;]

LINE

Mozilla/5.0 (Linux; Android 7.0; Nexus 6P Build/NBD90Z; wv) AppleWebKit/537.36 (KHTML, like Gecko) Version/4.0 Chrome/54.0.2840.68 Mobile Safari/537.36 Line/6.8.2/IAB

เอาล่ะ วิธีเช็คก็ไม่ยาก UA ของ Facebook จะมีคำว่า FBAN ไม่ก็ FBAV/ อยู่เสมอครับ ส่วนของไลน์มีแค่แบบเดียวคือจะมี Line/ อยู่เสมอ
อันนี้เป็นโค้ด JavaScript สำหรับเช็คครับ

function DetectInternalApp() {
    var UA = navigator.userAgent || navigator.vendor || window.opera;

    var isLINE = function (UA) {
        return (UA.indexOf("Line/") > -1);
    }

    var isFacebook = function (UA) {
        return (UA.indexOf("FBAN") > -1) || (UA.indexOf("FBAV/") > -1);
    }

    if (isLINE(UA)) {
        return 'LINE';
    }
    if (isFacebook(UA)) {
        return 'Facebook'
    }

    return false;
}

ถ้าเปิดด้วย LINE มันจะ return string LINE ออกมา ถ้าเป็น Facebook ก็ Facebook เช่นกัน ในขณะที่ถ้าเปิดใน Browser อื่นๆ ก็จะได้ค่า False ออกมา
ซึ่งเพื่อนๆ สามารถไปเขียนเพิ่มเพื่อดัก UA ของแอพอื่นๆ ได้ตามสะดวกเลยนะครับ