การสร้างหน้าจอ PWA Splash แบบกำหนดเอง

ตามที่ระบุไว้ก่อนหน้านี้ในบทช่วยสอนรายการ PWA ของเรา คุณสามารถสร้างหน้าจอเริ่มต้นเฉพาะสำหรับ PWA ของคุณด้วยโค้ดเพียงไม่กี่บรรทัดใน manifest.json ของคุณ กระบวนการนี้ไม่ได้ซับซ้อนจนเกินไปอย่างที่ใครๆ คาดคิด และคุณสามารถทำทุกอย่างให้เสร็จได้ในพริบตา มาเริ่มกันเลยดีกว่า:

กรณีสแปลชใน กปภ.

เมื่อไม่ได้กำหนดค่า ผู้ใช้ที่เปิด PWA ของคุณจะถูกต้อนรับด้วยหน้าจอว่างเปล่าสีขาว สิ่งนี้น่าจะใช้ได้ดีในอุปกรณ์สมัยใหม่ เวลาในการเปิดแอปแทบจะในทันที อย่างไรก็ตาม ในอุปกรณ์ที่ช้ากว่า นี่ อาจ เป็นปัญหาได้ เนื่องจากมันทำลายการรับรู้เริ่มต้นของผู้ใช้ที่มีต่อแอปของคุณ ควบคู่ไปกับความจริงที่ว่าอุปกรณ์ที่มีสเปคต่ำกว่าที่มี RAM ขนาด 1GB ยังคงเป็นสิ่งที่พบได้บ่อยที่สุด หน้าจอสแปลชที่ไม่เหมือนใครซึ่งเป็นตัวแทนของแบรนด์ของคุณจึงเป็นสิ่งจำเป็น

วิธีสร้างหน้าจอสแปลชของคุณเอง

บน Android กระบวนการนี้รวดเร็วพอๆ กับการใส่โค้ดสามบรรทัด อย่างไรก็ตาม สำหรับ iOS เป็นเรื่องที่แตกต่างกัน เนื่องจากคุณต้องสร้างขนาดภาพสแปลชที่แตกต่างกันสำหรับขนาดหน้าจอต่างๆ

สำหรับ Android

ลงมือทำเอง

ในไฟล์ manifest.json ตรวจสอบให้แน่ใจว่าคุณสมบัติทั้งสามนี้: name , background_color และ icons ได้รับการกำหนดค่าอย่างเหมาะสม:

• name : ชื่อ กปภ
• background_color : สีพื้นหลังของหน้าจอเริ่มต้น รู้จักเฉพาะค่าสี CSS ที่ถูกต้องเท่านั้น
• icons : ไอคอน . .png ที่มีขนาดขั้นต่ำ 192×192 พิกเซล

ตัวอย่างเช่น นี่คือสิ่งที่ manifest.json ที่กำหนดค่าไว้อย่างเหมาะสมควรมีลักษณะดังนี้ สังเกตว่าคุณสมบัติ icons มีสี่ขนาดแตกต่างกันอย่างไร — ไอคอนขนาดต่างกันเหล่านี้มีให้เพื่อให้เข้ากันได้ดีที่สุดสำหรับอุปกรณ์ต่างๆ

 {
    "theme_color": "#f69435",
    "background_color": "#ffffff",
    "display": "เต็มจอ",
    "ขอบเขต": "/",
    "start_url": "/",
    "app_name": "SimiCart",
    "short_name": "SimiCart",
    "description": "โซลูชันอีคอมเมิร์ซรุ่นต่อไปสำหรับวีโอไอพี",
    "ไอคอน": [
        {
            "src": "/icon-192x192.png",
            "ขนาด": "192x",
            "type": "image/png"
        },
        {
            "src": "/icon-256x256.png",
            "ขนาด": "256x",
            "type": "image/png"
        },
        {
            "src": "/icon-384x384.png",
            "ขนาด": "384x",
            "type": "image/png"
        },
        {
            "src": "/icon-512x512.png",
            "ขนาด": "512x",
            "type": "image/png"
        }
    ]
}

หลังจากตั้งค่าคุณสมบัติ (และไฟล์ manifest.json ของคุณเสร็จแล้ว) เบราว์เซอร์ที่รองรับ PWA (โดยทั่วไปคือ Chrome) จะสร้างขนาดไอคอนต่างๆ สำหรับหน้าจอเริ่มต้นของคุณโดยอัตโนมัติและแสดงตามนั้น

ค่อนข้างง่ายใช่มั้ย หากคุณถามเรา เราคิดว่าประสบการณ์การพัฒนาควรรู้สึกเช่นนี้

 การอ่านที่แนะนำ: PWA Manifest: การสร้างเว็บแอปของคุณแสดงให้เห็นวิธีที่ง่าย

การใช้โปรแกรมสร้างไฟล์ Manifest

คุณสามารถทำให้กระบวนการนี้เป็นอัตโนมัติได้อย่างง่ายดายโดยใช้เครื่องมือ สร้างไฟล์ Manifest ของเรา เพียงใส่ข้อมูลที่จำเป็นแล้วโปรแกรมสร้างของเราจะสร้างไฟล์ .zip ให้คุณ ซึ่งจะมีข้อมูลทั้งหมดที่คุณต้องการ

สำหรับ iOS

Apple ไม่ต้องการทำให้กระบวนการนี้ง่ายสำหรับนักพัฒนาอย่างแน่นอน ในขณะที่เขียนสิ่งนี้ สถานะของการสนับสนุน Web App Manifest ยังคงแสดงเป็น รองรับบางส่วน — ไม่เปลี่ยนแปลงสองปีหลังจากการปรากฏตัวครั้งแรก ซึ่งหมายความว่า PWAs ไม่ได้รับการสนับสนุนสำหรับ icons , minimal-ui , fullscreen , theme-color และ orientation

โชคดีที่ยังมีวิธีแก้ไขคือใช้เมตาแท็ก <apple-touch-startup-image> ไม่ใช่ทางออกที่ดี — แต่ได้ผล

 <!-- Splash Screen สำหรับ iPhone X (1125px x 2436px) -->
<link rel="apple-touch-startup-image" media="(device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3)" href="/apple -launch-1125x2436.png">

ด้วยการใช้เมตาแท็ก <apple-touch-startup-image> คุณสามารถระบุรูปภาพที่มีความละเอียดคงที่สำหรับหน้าจอเริ่มต้นของ PWA (เช่น startup-image ) หน้าจอเริ่มต้นแบบกำหนดเองนี้เข้ากันได้กับขนาดหน้าจอ เดียว เท่านั้น และคุณจะต้องใช้ขนาดภาพที่แตกต่างกันมากขึ้นเพื่อรองรับขนาดหน้าจอต่างๆ ของผลิตภัณฑ์ Apple ในตลาด

สิ่งนี้หมายความว่า คุณจะต้องสร้างหน้าจอเริ่มต้นสองหน้าจอสำหรับแต่ละขนาดหน้าจอ โดยหนึ่งหน้าจอสำหรับแต่ละการวางแนว (แนวนอนและแนวตั้ง) นี่คือลักษณะของโค้ดของเราเมื่อเราครอบคลุมอุปกรณ์ บาง ตัวในรายการ:

 <!-- iPhone X (1125px x 2436px) -->
<link rel="apple-touch-startup-image" media="(device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3)" href="/apple -launch-1125x2436.png">
<!-- iPhone 8, 7, 6s, 6 (750px x 1334px) -->
<link rel="apple-touch-startup-image" media="(device-width: 375px) and (device-height: 667px) and (-webkit-device-pixel-ratio: 2)" href="/apple -launch-750x1334.png">
<!-- iPhone 8 Plus, 7 Plus, 6s Plus, 6 Plus (1242px x 2208px) -->
<link rel="apple-touch-startup-image" media="(device-width: 414px) and (device-height: 736px) and (-webkit-device-pixel-ratio: 3)" href="/apple -launch-1242x2208.png">
<!-- iPhone 5 (640px x 1136px) -->
<link rel="apple-touch-startup-image" media="(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2)" href="/apple -launch-640x1136.png">
<!-- iPad Mini, Air (1536px x 2048px) -->
<link rel="apple-touch-startup-image" media="(device-width: 768px) and (device-height: 1024px) and (-webkit-device-pixel-ratio: 2)" href="/apple -launch-1536x2048.png">
<!-- iPad Pro 10.5" (1668px x 2224px) -->
<link rel="apple-touch-startup-image" media="(device-width: 834px) and (device-height: 1112px) and (-webkit-device-pixel-ratio: 2)" href="/apple -launch-1668x2224.png">
<!-- iPad Pro 12.9" (2048px x 2732px) -->
<link rel="apple-touch-startup-image" media="(device-width: 1024px) and (device-height: 1366px) and (-webkit-device-pixel-ratio: 2)" href="/apple -launch-2048x2732.png">

เชื่อมโยงรหัสนี้ใน <head> ของ index.html และอย่าลืมแทรกแท็ก <meta> ด้านล่างเพื่อเปิดใช้งานการทำงานของ PWA มิฉะนั้น หน้าจอเริ่มต้นของเราจะไม่ทำงานเลย

 <meta name="apple-mobile-web-app-capable" content="yes">

ด้วยวิธีนี้คุณควรจะพร้อม เปิด iOS PWA แล้วคุณจะเห็นหน้าจอเริ่มต้น

การใช้ตัวสร้างหน้าจอเริ่มต้นของ iOS

แน่นอนว่ามีวิธีที่ดีกว่าในการทำให้กระบวนการนี้เป็นแบบอัตโนมัติ ซึ่งก็คือการใช้ iOS Splash Screen Generator ด้วยรูปภาพของคุณเป็นแหล่งที่มา ตัวสร้างจะสร้างรูปภาพขนาดต่างๆ ให้กับคุณพร้อมกับโค้ด HTML ที่จำเป็นที่จะแทรกใน index.html ของคุณ

บทสรุป

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

เราหวังว่าบทช่วยสอนนี้จะแก้ปัญหาได้ตรงจุดของคุณ การปรับใช้และปรับแต่ง PWA อาจเป็นเรื่องน่าปวดหัวหากคุณและทีมของคุณไม่มีประสบการณ์มากนัก โซลูชันการพัฒนา PWA แบบมืออาชีพ เช่น SimiCart สามารถช่วยทำให้ง่ายขึ้นมาก