หน้าจอแนะนำที่กำหนดเองทำให้ Progressive Web App (PWA) ดูเหมือนแอปที่สร้างขึ้นมาสำหรับอุปกรณ์นั้นมากขึ้น โดยค่าเริ่มต้น เมื่อผู้ใช้เปิด PWA จากหน้าจอหลัก Android จะแสดงหน้าจอสีขาวจนกว่า PWA จะพร้อมใช้งาน ผู้ใช้อาจเห็นหน้าจอเปล่าสีขาวนี้เป็นเวลาไม่เกิน 200 มิลลิวินาที การตั้งค่าหน้าจอแนะนำที่กำหนดเองจะช่วยให้คุณแสดงสีพื้นหลังที่กำหนดเองและไอคอนของ PWA แก่ผู้ใช้ ซึ่งจะให้ประสบการณ์การใช้งานที่น่าดึงดูดใจของแบรนด์
วิธีที่การตรวจสอบหน้าจอแนะนำของ Lighthouse ล้มเหลว
Lighthouse จะแจ้งเตือนหน้าที่ไม่มีหน้าจอแนะนำที่กำหนดเอง ดังนี้
วิธีสร้างหน้าจอแนะนำที่กำหนดเอง
Chrome สำหรับ Android จะแสดงหน้าจอแนะนำที่กำหนดเองโดยอัตโนมัติ ตราบใดที่ คุณมีคุณสมบัติตามข้อกำหนดต่อไปนี้ในไฟล์ Manifest ของเว็บแอป
- พร็อพเพอร์ตี้
nameตั้งค่าเป็นชื่อของ PWA - พร็อพเพอร์ตี้
background_colorได้รับการตั้งค่าเป็นค่าสี CSS ที่ถูกต้อง - พร็อพเพอร์ตี้
theme_colorได้รับการตั้งค่าเป็นค่าสี CSS ที่ถูกต้อง - อาร์เรย์
iconsระบุไอคอนที่มีขนาดอย่างน้อย 512x512 พิกเซล - มีไอคอนที่ระบุและเป็น PNG
ดูข้อมูลเพิ่มเติมได้ที่การเพิ่มหน้าจอแนะนำสำหรับเว็บแอปที่ติดตั้งใน Chrome 47
แหล่งข้อมูล
ซอร์สโค้ดของการตรวจสอบไม่ได้กำหนดค่าไว้สำหรับการตรวจสอบหน้าจอแนะนำที่กำหนดเอง