วันนี้ผมจะมาเล่าถึงประสบการณ์การแก้ปัญหาแอป iOS ที่เกิดกับ iPhone หลายรุ่น ทำงานได้บ้าง ไม่ได้บ้าง ซึ่งในที่สุดพบว่าปัญหามาจากการตั้งค่าในไฟล์ .browserslistrc โดยเฉพาะการกำหนดเวอร์ชั่นที่เก่าเกินไป โดยจะมาแชร์วิธีการแก้ไขและสรุปสิ่งที่พบครับ สำหรับใครที่อยากรู้จัก การทำงานของไฟล์ .browserslistrc ใน Angular
ปัญหาที่พบ
แอปที่พัฒนาถูกทดสอบบน iPhone หลายรุ่น โดยพบปัญหาว่ามีบางเมนูที่ทำงานได้บ้าง ไม่ได้บ้าง รวมถึงปัญหาเข้าแอปได้แค่ครั้งแรกหลังติดตั้งใหม่ ในรุ่นต่อไปนี้
iPhone 15 Pro (iOS 17.6.1): เข้าได้ครั้งแรกหลังติดตั้งใหม่ ที่เหลือเข้าไม่ได้เลย
iPhone 11 Pro (iOS 16.0.3): เข้าไม่ได้เลย
iPhone 12 Pro Max (iOS 17.5.1): ใช้งานได้ตลอด
iPhone 15 Pro (iOS 18.0): ใช้งานได้ปกติ
และอื่น ๆ
หลังจากพยายามลบแอป ติดตั้งใหม่ รวมถึงตรวจสอบโค้ดส่วนอื่น พบว่าเครื่องรุ่นใหม่กว่าใช้งานได้ปกติ แต่รุ่นเก่าหรือเวอร์ชั่น iOS ที่เก่ากว่า จะเกิดปัญหาใช้งานไม่ได้หรือใช้งานไม่สมบูรณ์
วิธีแก้ปัญหา
ปัญหามาจากการตั้งค่าในไฟล์ .browserslistrc ซึ่งเป็นไฟล์ที่กำหนดว่าตัวแอปจะรองรับการทำงานบนเบราว์เซอร์เวอร์ชั่นใดบ้าง
การตั้งค่าเดิม
> 0.5%
last 3 versions
not dead
Safari >= 15
จากการตั้งค่านี้เมื่อใช้ iOS เวอร์ชั่น 18 ระบบจะนับรวมเวอร์ชัน 18 และ 17 แต่มีหลายกรณีที่ต้องรองรับเวอร์ชันที่ต่ำกว่านั้น เช่น iOS 16.x.x ทำให้เกิดปัญหากับการแสดงผลเมนูบางส่วน
การแก้ไข
เปลี่ยนการนับเวอร์ชั่นจาก 3 เป็น 5 เพื่อให้รองรับเวอร์ชั่นเก่ามากขึ้น พร้อมลดเวอร์ชันของ Safari ที่รองรับจาก 15 เป็น 14 เพื่อให้ครอบคลุม iOS รุ่นเก่า
> 0.5%
last 5 versions
not dead
Safari >= 14
หลังจากทำการแก้ไขนี้ ปัญหาการใช้งานแอปที่พบในรุ่น iPhone ต่าง ๆ ได้รับการแก้ไขเป็นที่เรียบร้อย
สรุป
การตั้งค่ารองรับเบราว์เซอร์ในไฟล์ .browserslistrc มีผลต่อการทำงานของแอปอย่างมาก โดยเฉพาะในกรณีที่ต้องรองรับ iOS รุ่นเก่าหรือ Safari เวอร์ชั่นต่ำกว่า การปรับแต่งให้รองรับเวอร์ชั่นที่กว้างขึ้นช่วยให้แอปทำงานได้อย่างสมบูรณ์ทั้งใน iPhone รุ่นเก่าและใหม่
แหล่งข้อมูลเพิ่มเติม: user-agent iOS เก่า ๆ บน Safari