10 คำถามกับเรื่อง Installation ของ Progressive Web App ที่คนมักสงสัยและชอบถามกันบ่อย

warat wongmaneekit

ตั้งแต่เริ่มพฑูดเรื่อง PWA ก็เริ่มจะมีคนถามคำถามซ้ำๆเกี่ยวกับเรื่องการติดตั้งอยู่หลายคำถามวันนี้ผมจะมา list ให้อ่านกันครับว่ามีคำถามอะไรบ้างที่คนชอบสงสัยและชอบถามกันเข้ามา

1. จะบังคับ Banner ได้มั้ยว่าจะให้ขึ้นตอนไหน

ถ้าใครที่หน้าเว็บมี manifest.json และมี service worker จะคงเคยเห็นว่า มี banner บอกว่าให้ add to home screen โผล่ขึ้นมาซึ่งก็มีคนเคยสงสัยว่า จะบังคับให้มันโผล่ขึ้นมาได้มั้ยคำตอบก็คือ ไม่ได้ครับ เราบังคับให้มันขึ้นมาไม่ได้เลย โดย เงื่อนไขที่มันจะโผล่ขึ้นมาหรือไม่โผล่ขึ้นมาอ้างอิงตามนี้เลย

เพราะฉะนั้นแล้วตอบคำถามที่ว่า จะบังคับ banner ขึ้นมาได้มั้ยคำตอบคือ “ไม่ได้ครับ”

2. ทำ Banner install เองได้มั้ย

ข้อนี้ขอตอบว่า ได้ครับ แต่ว่ามันอาจจะไม่ได้เป็นอย่างที่ใจนึกเท่านั้นเอง สาเหตุที่ผมบอกแบบนั้นเพราะว่า วิธีการการสร้าง Banner ของเราขึ้นมาเองจะเป็นการดัก event ที่ชื่อว่า beforeinstallprompt ซึ่ง event นี้จะถูกสร้างขึ้นมา ตอนนี้ Banner install จะโผล่ขึ้นมา โดยเราสามารถไป ชะลอการโผล่ขึ้นมาของ banner และทำให้มันแสดง Banner ของเราขึ้นมาเองได้ แต่สุดท้ายแล้วตอนที่ user จะกด Add ก็ยังจะต้อง Add จาก Dialog ของ Browser เท่านั้น เพื่อความเข้าใจง่ายผมอธิบายด้วย code ดีกว่า

3. ทำยังไงให้พอกดที่ icon จาก Home Screen แล้ว location bar ไม่โผล่มา

อันนี้วิธีค่อนข้างง่ายเลย เพียงแค่เราใส่ display: “standalone” เข้าไปในไฟล์ manifest.json ของเราเพียงแค่นี้ตอนนี้ add to home screen ไปแล้ว พอ user กดเข้ามาก็จะไม่เห็น location bar ใน Browser อีกเลย แต่ถ้า user ยังไม่ add ก็จะยังไม่สามารถ ซ่อนได้

4. Detect ยังไงว่าคนเข้ามาผ่าน หน้า Home screen หรือ หน้าเว็บปกติ

จริงๆ ณ ตอนนี้ยังไม่มีวิธีดีๆสำหรับการ detect ว่าคนเข้ามาจาก icon หน้า Home หรือเปล่า แต่ก็พอมีวิธีที่ work around ได้อยู่ โดยใช้วิธีการ detect หา media query ของหน้านั้นๆว่าเป็น standalone หรือเปล่า

if (window.matchMedia('(display-mode: standalone)').matches) {
console.log("This is running as PWA.");
}

วิธีนี้อาจจะมี bug นิดนึงถ้าเรากำหนดให้ display ใน file manifest ไม่ใช่ standalone วิธีนี้จะไม่สามารถ detect ได้เพราะฉะนั้นแล้ว ถ้าเพื่อความสะดวก อย่าลืมกำหนด display ในไฟล์ manifest ให้เป็น standalone ด้วย

5. ถ้า User Install PWA ไปแล้ว เวลาเข้า Link เว็บไซต์นั้นจะวิ่งไปที่ PWA เลยหรือเปล่า

ใน ตอนนี้ถ้าเรา Add to home screen บน Android แล้ว link ของ PWA นั้นถูกคลิกมมาจากหน้าเว็บ ณ ปัจจุบัน ถ้าเป็น Android และ Desktop ตัว Browser Chrome จะเปิดตัว PWA ขึ้นมาให้แทนเปิดเว็บทันที

หน้าตา PWA บน Desktop

6. ทำ splash screen เองได้มั้ย

ตามที่ Browser support ณ เวลานี้เรายังไม่สามารถทำ splash screen ได้ เอง โดยตัว Browser จะไปหยิบตัว Icon ที่ใหญ่ ที่สุด มาทำเป็น Splash screen ให้ แต่ถ้าอ้างอิงตาม spec ในอนาคต เราจะสามารถ กำหนด splash screen เองได้ แต่ก็ยังไม่รู้ว่า Browser ไหนจะหยิบไปทำก่อน

7. ทำไม iOS ไม่อ่านค่าจาก manifest.json

ณ ปัจจุบัน iOS ยังไม่ support ตัวไฟล์ manifest.json ซึ่งตอนนี้ feature นี้ยังอยู่ใน สถานะ in Development อยู่ ซึ่งถ้าเป็น PWA บน iOS สิ่งที่เราต้องทำคือ เพิ่ม meta ตาม List เข้าไปเพื่อให้ iOS เข้าใจว่าเว็บนี้ Add to Home Screen ได้

รอแปบนึงน้า กำลังจะมา

9. ถ้าอยากจะชวนคนไป install app ใน play store เราควรทำยังไง

ปัจจุบันให้ Android นอกจากจะมี้ banner ชวนคนกด add to home screen แล้ว ยังมี banner สำหรับให้คนไปโหลด app บน Play Store ได้ด้วย ซึ่งวิธีการที่จะให้ โชว์ banner นี้ เราต้องไปกำหนด ค่า prefer_related_applications ใน manifest.json ก่อน ตามข้างล่างนี้

"prefer_related_applications": true,
"related_applications": [
{
"platform": "play",
"id": "com.google.samples.apps.iosched"
}
]

หลังจากนั้นแทนที่ตัว เว็บไซต์จะเด้ง banner ให้ user Add to Home screen ก็จะเป็น banner ให้ user วิ่งไป playstore แทน

10. ถ้า คน กด Add to Home screen ไปแล้ว พวก Cookie, LocalStorage จะตามมามั้ย

ถ้าเป็น บน Android และ Desktop พวก user data อย่าง LocalStorage หรือ cookie จะวิ่งตามไปยัง PWA ที่ถูก add to home screen แต่ถ้าเป็นบน iOS ตัว PWA ที่ถูก add to home screen ไปจะถือว่าเป็น session ใหม่ทันที

นี่ก็เป็นคำถามที่ผมมักจะได้ยินบ่อยๆจากหลายๆคนที่เข้ามาถามผมเรื่อง PWA เลยรวมๆเอามาตอบไว้ที่เดียว ถ้าใครมีคำถามอะไรที่ผมไม่ได้ตอบเอาไว้ comment ไว้ข้างล่างได้เลยนะครับ

warat wongmaneekit

Written by

Co-Founder and Product Owner of ThothZocial, Google Developer Expert Web Technologies https://thangman22.com/

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade