แชร์มาแชร์กลับไม่โกงกับ Share Target API และ Web Share API

เวลาใครๆเข้าเว็บไซต์ต่างๆโดยเฉพาะ เว็บไซต์ Content คงจะติดภาพ widget ที่ใช้แชร์ที่หน้าตาแบบข้างล่างนี้

ซึ่ง การใช้งาน widget แชร์แบบนี้จะมีปัญหาต่างๆที่เราต้องทั้งฝั่ง User เองและ Developer เจอประมาณนี้

• ไม่สามารถใช้ช่องทางการแชร์ของ Platform ได้ มีจำกัดแค่ที่ทำเอาไว้เท่านั้น
• แต่ละเว็บไซต์ implement ต่างกัน experince ก็เลยต่างกันไปด้วย
• บาง Channel แสดงผลไม่สมบูรณ์ในบาง Platform
• แต่ละ Channel มีวิธีการ implement ต่างกันทำให้ Code ดูแลรักษายาก

แก้ปัญหาด้วย Web Share API

ด้วยปัญหาต่างๆเหล่านี้ เลยมี API ตัวนึงที่เกิดขึ้นมาชื่อว่า Web Share API โดย Web Share API หลักการก็คือเมื่อเราทำการเรียก Web Share API ตัว Platform ก็จะเด้ง Dialog share ที่เป็น Native ของแต่ละ platform ออกมา หน้าตาประมาณนี้

ด้วยวิธีนี้จะทำให้เราไม่ต้องมา Handle การแชร์ต่างๆอีกต่อไปเพราะว่า การแชร์จากเว็บก็จะกลายเป็นส่วนหนึ่งของ Platform ไปโดยทันที

คราวนี้วิธีเขียนของ share API เนี่ย ไม่ได้ยากอย่างที่คิดครับก็แค่เรียก function แบบนี้ ตัว Dialog แชร์ก็จะโผล่ออกมาเลย

https://gist.github.com/thangman22/fcf32c353557d3d04d6f813ae8b31d78

ณ วันนี้ ถ้าใครกังวลว่า WebShare API จะไม่ Support Platform มือถือ อย่าง iOS ไม่ต้องกังวลเลยครับเพราะว่าใน iOS 12.1 ได้ Support WebShare API เป็นที่เรียบร้อยแล้ว

แชร์ไปก็ต้องแชร์กลับได้

เมื่อเราแชร์ไปได้ ก็ต้องแชร์กลับได้ เมื่อเรามี Web share API แล้ว ทาง ผู้พัฒนา Browser ก็เลยมีการสร้าง API อีกตัวออกมานั่นคือ Web Share Target API ( ชื่อเหมือนกันเลย ) โดยไอเดียก็คือเราสามารรถเอา PWA ของเราไปใส่ไว้ในรายชื่อ Appที่อยากให้ Appอื่น แชร์มาที่ App เราได้ แต่ข้อจำกัดนึงที่ต้องทราบก่อนก็คือ App ที่จะเอาไปแสดงใน List ได้นั้นต้องถูกติดตั้งผ่านการ Add to Home Screen ก่อเท่านั้น โดยวิธีการจะต้องทำสองอย่างก็คือ

1. เราจะต้องไปเพิ่ม information ของ manifest.json ก่อน

https://gist.github.com/thangman22/a189fd73d7e1b204245a007aa5fd2265

2. หลังจากนั้น เราก็ไปที่หน้าที่เรากำหนดไว้และ คอยดัง information ที่มาพร้อมกับ Event ตอนเปิดหน้าเว็บ

https://gist.github.com/thangman22/328cf9a7aa1d2399dd9505553f46a2a6

แค่นี้เองครับเว็บของคุณก็จะสามารถรับ การแชร์จาก App อื่นๆได้แล้ว แต่หน้าเสียดายหน่อยที่ปัจจุบัน Feature นี้รองรับแค่ Chrome บน Android เท่านั้น T_T