เดิมแล้ว ถ้า User เข้ามาในเว็บไซต์ที่มี manifest + serviceworker ติดตั้งอยู่ แล้วเข้าตาม Add to Home Screen criteria (ลองกด link ไปดูครับ ไม่ได้พิมพ์ไว้กลัว Google ปรับ Criteria) ตัว banner หน้าตาด้านล่างนี้จะโผล่มา
และเมื่อ user ตอบตกลง ก็จะมี Dialog แบบนี้โผล่ขึ้นมา
แต่ใน Chrome 68 มันจะไม่เป็นแบบนั้นอีกแล้วววว!!!!!
ใน Chrome 68 จะไม่มี การแสดง banner นี้ขึ้นมาอีกแล้ว แต่จะเปลี่ยนไปเป็นการ fire event ที่มีชื่อ ว่า beforeinstallprompt ขึ้นมาแทน แล้วถ้าเราต้องการให้ dialog ที่มีหน้าตาอย่างข้างบนแสดงออกมา เราต้องสั่ง ให้มันโชว์เองด้วย code หน้าตาแบบด้านล่างนี้ เท่านั้น
https://gist.github.com/thangman22/138fa6d17b44034dbc7da6265d4ff140
คราวนี้ถ้าเราไม่อยากให้มันมี dialog เด้งขึ้นมาเลย สิ่งที่เราทำได้ก็คือ สร้าง ตัวแปรนึงมาเก็บ event เอาไว้ แล้ว ตอนกด button ก็ค่อยโยน event นี้เข้าไปในปุ่มอีกที ประมาณนี้
https://gist.github.com/thangman22/7fea578a86fbc3525fd91e2d47e613eb
หลังจากที่ User install application เสร็จแล้ว ตัว Browser จะ fire event ออกมาอีก event คือ appinstalled และเราก็สามารถสร้าง eventListener ออกมารับได้ตามปกติ
ส่วนถ้าใครอยากเช็คว่า User เข้ามา application ของเราผ่าน App ที่ถูก install หรือไม่ ตอนนี้ Chrome กับ Safari ยังแตกต่างกันอยู่ ถ้าเขียนใน safe ที่สุดก็เขียนตามด้านล่างนี้ได้เลย
https://gist.github.com/thangman22/5be112a143d2a84355bec77ee24e409c
จะเห็นว่า เปลี่ยนไปเยอะมากๆ จาก Chrome version ก่อนๆ เพราะฉะนั้นแล้ว ใครที่ทำอะไรเกี่ยวกับ PWA อยู่แล้ว ใช้ คุณสมบัติของ Add to home screen Banner อย่าลืมไปตรวจสอบ app ของ ท่านด้วยนะครับ
Leave a Reply