สำหรับคนที่ใช้งาน Ionic framework ทำแอพ iOS และ Android อยู่ ในบางครั้งจะพบว่าโปรเจครันแอพขึ้นมาเป็นหน้าจอสีขาวๆ หรือไม่ก็ติดอยู่ที่ Splash screen (ภาพนิ่งที่จะถูกแสดงขึ้นมาระหว่างรอแอพพร้อมใช้งาน) เป็นหนึ่งใน Error ที่น่าพรั่นพรึงอย่างหนึง

และอาการนี้แหละเรียกกันว่า “White Screen of Dead”

White Screen of Dead เกิดจากอะไร?

จริงๆ ปัญหานี้เกิดจากหลายสาเหตุ แต่เท่าที่โค้ชพล และเพื่อนพี่น้องที่เรียกกันเคยเจอมามีดังนี้ (ขอเอาเคสของฝรั่งที่เจอมารวมด้วย)

1. Plugin แบบ 3rd-party (กลุ่มที่ไม่ใช่ Plugin ของ Ionic) ไม่เข้ากับระบบ, มีบั้ก
2. เรื่องของ Content Security Policy บน iOS 9
3. ความไม่เข้ากันของ iOS SDK หรือ Xcode

ซึ่งอาจจะมีสาเหตุอื่นๆ อีก ถ้าเห็นว่าที่ตัวเองเจอแตกต่างจากข้อด้านบน ฝาก comment ไว้ด้านล่างด้วยนะครับ

แนวทางแก้ไขปัญหา White Screen of Dead

เท่าที่เจอมา ปัญหาส่วนใหญ่จะเกิดในฝั่ง iOS มากกว่า Android โดยมีวิธีแก้ปัญหาเป็นกรณีไปดังนี้

ปัญหาที่น่าจะเกิดจาก iOS SDK หรือ Xcode

• โปรเจค Ionic เป็น iOS
• มีการอัพเดต Xcode หรือ iOS SDK เวอร์ชั่นใหม่

ใช้คำสั่งต่อไปนี้ในโปรแกรม Terminal (OS X) หรือ Command Prompt (Windows) โดยต้องสั่งจากโฟลเดอร์ของโปรเจค

ionic platform remove ios

ionic platform add iOS

ปัญหาที่น่าจะเกิดจาก Plugin

ลองสั่งลบ Plugin และติดตั้ง Plugin ใหม่อีกครั้ง เพราะ:

• Plugin เวอร์ชั่นที่เกิดปัญหามีบั้ก
• Plugin เก่าเกินไป

ใช้คำสั่งต่อไปนี้ในโปรแกรม Terminal (OS X) หรือ Command Prompt (Windows) โดยต้องสั่งจากโฟลเดอร์ของโปรเจค

cordova plugin rm <ชื่อ หรือ url ของ plugin>

cordova plugin add <ชื่อ หรือ url ของ plugin>

ปัญหาเฉพาะ Plugin และอื่นๆ

ระหว่างการรวบรวมข้อมูล โค้ชพลเจอการแก้ไขปัญหาใน Plugin เฉพาะด้วย เลยเอามารวมในที่นี้ครับ

• Google Analytic Plugin for Ionic
  • App Transport Security
  • Bitcode (1, 2)
• UIWebView
  • สลับไปใช้ WKWebView แทน
• ปัญหา SSL
  • Facebook Plugin บน iOS 9
• ปัญหาระบบ Natigation

อ้างอิง:

• Problem compiling with XCode7 and iOS9: White Screen of Death. Please help us
• ภาพโดย Hernán Piñera