การตรวจจับเอนจินเบราว์เซอร์มือถือ: ความแตกต่างระหว่าง iOS และ Android คืออะไร?

เมื่อพัฒนาแอพพลิเคชั่นมือถือ หน้า H5 หรือการจดจำลายนิ้วมือของเบราเซอร์ คุณจะต้องพบกับปัญหาที่น่า headaches นี้อย่างแน่นอน：

หน้าเว็บเดียวกันทำงานแตกต่างกันบน iOS และ Android สาเหตุหลักมักเกี่ยวข้องกับ "การตรวจจับเอนจินเบราว์เซอร์มือถือ"

ถัดไป บรรณาธิการจะพูดคุยเกี่ยวกับ: ความแตกต่างระหว่างเคอร์เนล iOS และ Android คืออะไร? และเครื่องมือเช่น ToDetect สำหรับการตรวจสอบลายนิ้วมือทางเว็บสามารถช่วยในการดีบักได้อย่างไร。

1. ทำไมต้องทำ?การตรวจสอบเอนจินเบราว์เซอร์？

มีเซลล์ของเบราว์เซอร์มากมาย แต่มีเพียงไม่กี่คอร์เท่านั้น ยกตัวอย่างเช่น คุณอาจเห็นชื่อที่เกินจริงในโทรศัพท์มือถือของคุณ เช่น: รุ่นที่เร็วมาก, เบราว์เซอร์ที่ปลอดภัย, เบราว์เซอร์ Android, เบราว์เซอร์ iOS…

แต่ส่วนที่ทำให้เว็บเพจแสดงผลจริงมักมาจากเครื่องยนต์เดียวกัน ทำไมจึงจำเป็นต้องตรวจจับเครื่องยนต์? มีสามเหตุผลหลัก:

• เคอร์เนลที่แตกต่างกันมีความสามารถที่แตกต่างกัน และ API และคุณสมบัติ CSS ที่รองรับอาจแตกต่างกันไป

• ความแตกต่างของประสิทธิภาพมีความสำคัญ; แอนิเมชัน, วิดีโอ, และรูปแบบที่ปรับตัวอาจให้ผลลัพธ์ที่แตกต่างกันโดยสิ้นเชิง。

• นโยบายความปลอดภัยแตกต่างกัน และความสามารถเช่นการรู้จำลายนิ้วมือของเบราว์เซอร์และการดึงข้อมูลอุปกรณ์จะแตกต่างกันอย่างมากตามเคอร์เนลที่แตกต่างกัน

II. ระบบเบราว์เซอร์มือถือของ iOS และ Android มีความแตกต่างกันอย่างไร?

1. iOS ครองตลาด โดยอนุญาตให้ใช้เฉพาะ WebKit เท่านั้น

ถ้าคุณเป็นผู้ใช้ iPhone เว็บเบราว์เซอร์ทั้งหมดที่เปิดอยู่ในโทรศัพท์ของคุณ—ไม่ว่าจะเป็น Safari, Chrome, Firefox หรือเว็บเบราว์เซอร์ในประเทศอื่น—ทั้งหมดถูกบังคับโดย Apple ให้ใช้เครื่องยนต์ WebKit (ให้พูดให้ถูกคือ WKWebView)

ความสามารถพื้นฐานของเบราว์เซอร์ iOS ทั้งหมดมีลักษณะพื้นฐานที่คล้ายกัน นั่นหมายความว่าแม้ว่าคุณจะเห็น UI ที่แตกต่างกัน แต่ประสิทธิภาพในการใช้งานเว็บจะมีความคล้ายคลึงกันมาก ความแตกต่างในการระบุฟุตพริ้นท์ของเบราว์เซอร์นั้นไม่สำคัญนักเพราะส่วนประกอบพื้นฐานมีความเหมือนกันโดยพื้นฐาน

ฟีเจอร์ใน iOS (เช่น การปัดกลับ, การเลื่อนแบบเด้ง, เป็นต้น) แแทบจะเป็นไปไม่ได้ที่จะเปลี่ยนแปลงโดยการเปลี่ยนเบราว์เซอร์ ดังนั้นการทำ "การตรวจสอบเอนจินเบราว์เซอร์ iOS" จึงค่อนข้างง่าย และสุดท้ายมันก็จะวนกลับไปที่ WebKit เสมอ

2. แอนดรอยด์กำลังเติบโตอย่างมากมายด้วยความหลากหลายมากมาย และความแตกต่างของเคอร์เนลนั้นมีความสำคัญอย่างยิ่ง

Android แตกต่างอย่างสิ้นเชิง มันอนุญาตให้เบราว์เซอร์ใช้เคอร์เนลของตนเองและยังอนุญาตให้ WebView ของระบบสามารถอัปเดตได้โดยอิสระ ดังนั้นคุณจะพบว่า:

• Chrome → เคอร์เนล Blink

• WeChat, Alipay, Douyin → มี WebView อิสระในตัวเอง (ก็จาก Blink แต่เป็นเวอร์ชันที่แตกต่างกัน)

• Android เก่า → Native WebKit (เก่ามาก ไม่แนะนำ)

ผลกระทบที่เกิดจากสิ่งนี้ชัดเจนมาก:

• โค้ด JS ชิ้นเดียวกันอาจให้ผลลัพธ์ที่แตกต่างกันบนอุปกรณ์ Android ที่แตกต่างกัน

• การสนับสนุน CSS มีความแตกต่างกันมาก และการเคลื่อนไหวบางอย่างอาจสะดุดในเวอร์ชันเก่าของ WebView

• UA, สิทธิ์ และนโยบายความปลอดภัยของ WebView อาจแตกต่างกันไป

เมื่อทำการตรวจสอบลายนิ้วมือของเบราว์เซอร์ คุณลักษณะการกระจายของ Android มีความซับซ้อนมากกว่าของ iOS การตรวจจับเคอร์เนลของเบราว์เซอร์บน Android เป็น "จุดเด่น" ที่แท้จริง

III. การตรวจสอบเอนจินเบราว์เซอร์มักทำได้อย่างไร?

นักพัฒนาส่วนใหญ่ทำการกำหนดสิ่งนี้ผ่าน UA (User-Agent) เช่น:

• ประกอบด้วย AppleWebKit → พื้นฐาน WebKit/Blink

• รวมถึง Chrome/xx → Blink

• Includes Version/xx → iOS Safari

แต่ปัญหาก็เกิดขึ้น:

• UA สามารถปลอมแปลงได้และกำลังกลายเป็นสิ่งที่เชื่อถือได้น้อยลงเรื่อยๆ。

• การลด UA ของ Chrome กำลังทำให้ข้อมูล UA มีขีดจำกัดมากขึ้น。

ดังนั้น วิธีที่ถูกต้องกว่าคือ:

✔ การตรวจจับฟีเจอร์โดยใช้ความสามารถของเบราว์เซอร์

ทดสอบว่า API มีอยู่หรือไม่ ตัวอย่างเช่น:

• WebGL, WebRTC

• OffscreenCanvas

• การสนับสนุนฟีเจอร์ CSS ใหม่

✔ การวิเคราะห์คุณลักษณะลายนิ้วมือแบบผสม

• การเรนเดอร์ฟอนต์

• คุณสมบัติของCanvas

• WebGL ฟิงเกอร์พริ้นท์

• ข้อมูลหน้าจอ

วิธีการ "การตรวจจับความสามารถ + การตรวจจับพฤติกรรม" นี้มีความเสถียรมากกว่าการตรวจจับ UA และเหมาะสมกว่าสำหรับสภาพแวดล้อมของเว็บสมัยใหม่。

สี่ToDetect Browser Fingerprint Detectionบทบาทในการวิเคราะห์เคอร์เนล

นักพัฒนาหลายคนใช้เครื่องมือบางอย่างเมื่อทำการดีบักความเข้ากันได้ของมือถือ โดยเฉพาะอย่างยิ่งแพลตฟอร์มการตรวจจับลายนิ้วมือของเบราว์เซอร์ ToDetect นั้นค่อนข้างใช้งานได้จริง

มันสามารถช่วยให้คุณบรรลุ:

• การวิเคราะห์คุณลักษณะของเคอร์เนลเบราว์เซอร์โดยอัตโนมัติ

• แสดงข้อมูลการระบุตัวตนของเบราว์เซอร์ เช่น Canvas, WebGL, โซนเวลา, ฟอนต์ เป็นต้น

• ตรวจสอบประเภท WebView (เคอร์เนล WeChat, เคอร์เนล Alipay, ฯลฯ)

• ตรวจสอบว่าเบราว์เซอร์ปัจจุบันรองรับฟีเจอร์ฝั่งหน้าใดบ้าง

• ช่วยยืนยันสาเหตุที่ทำให้หน้าเว็บทำงานผิดปกติบนโทรศัพท์บางรุ่น。

ถ้าคุณกำลังแก้ปัญหาสมาร์ทโฟน Android ที่โหลดหน้าเว็บผิดปกติในขณะที่ iPhone ทำงานได้ปกติ มีโอกาสถึง 80% ที่ปัญหาจะเกี่ยวข้องกับเคอร์เนลเบราว์เซอร์มือถือของมัน การใช้เครื่องมือการตรวจสอบเช่นนี้สามารถระบุปัญหาได้อย่างรวดเร็ว

สรุป

• เคอร์เนล iOS เป็นแบบรวมศูนย์ ในขณะที่เคอร์เนล Android มีความหลากหลาย ดังนั้นวิธีการตรวจจับจึงไม่สามารถเหมือนกันได้

• เครื่องมือการตรวจจับลายนิ้วมือของเบราว์เซอร์เช่น ToDetect สามารถปรับปรุงประสิทธิภาพการดีบักได้อย่างมาก

• หากหน้าเว็บของคุณทำงานได้ดีบน iOS แต่มีปัญหาบน Android น่าจะเกี่ยวข้องกับ WebView หรือเวอร์ชันของเคอร์เนล

จำไว้ว่า：

แกนหลักของการพัฒนาโมบายไม่ได้อยู่ที่ "ชื่อเบราว์เซอร์" แต่คือ "เอนจินเบราว์เซอร์"