มาทำแชร์(ลูกโซ่) กันครับ ฮ่า ๆ

สวัสดีครับ วันนี้เราจะมาลองเล่น Web Share API กัน เย้
หลายคนคงเคยเห็นวิธีแชร์แบบนี้กัน เคยสงสัยมั้ยว่าเราสามารถทำแบบนี้บนเว็บได้มั้ย

คำตอบคือทำได้นะครับ เราจะใช้ Web Share API นั่นเอง แต่การจะใช้ก็จะมีข้อจำกัดอยู่นะครับเช่น จากที่ผมได้ลองมาคือ
- require HTTPS
- บน IOS Safari ไม่สามารถแชร์รูปจากการ fetch data จาก api ได้
- Browser Support น้อยมาก และเป็นเวอร์ชั่นค่อนข้างใหม่เลยทีเดียว

อันนี้ที่เจอมานะครับ ถ้าใครมีวิธีดึงรูปจาก url ที่ fetch มาจาก api แล้วแชร์บน IOS Safari ได้ โปรดชี้แนะผมด้วยครับ ._.
อะมาลองเล่นกันเลยดีกว่า
เริ่มด้วยทำปุ่มขึ้นมาอันนึงให้กดแชร์ได้

จากนั้นเมื่อคลิกปุ่มให้ toggle share ขึ้นมาเลย
อย่างที่บอกครับ เว็บเราต้องมี HTTPS ผมจึงใช้ ngrok เพื่อ forward https ผ่าน ngrok แล้วเข้า localhost อีกที (ขี้เกียจเอาขึ้น 5555) ผลที่ได้คือ

ลองกดแชร์ไปใน twiiter ดูหน่อย

เดี๋ยวจะลองแชร์รูปภาพกันดูครับ ปรับ code นิดหน่อย เพิ่ม input file ไปครับ ส่วนแชร์รูปภาพจะเป็น Web Share API Level 2 นะครับ

ปรับอ่านไฟล์จาก input ใน script นิดหน่อย

ตัว files ที่เป็น data จะต้องเป็น type Array of File Object เท่านั้นนะครับ
Ref:
ผลลัพธ์ที่ได้จะเป็นแบบนี้ครับ



ลองดึงรูปจาก url แล้วมาแชร์กันบ้างดีกว่า ปรับโค้ดให้ดึงรูปจาก url มา แล้วแปลง blob เป็น File Object และรูปที่จะดึงมาต้องมีการ enable CORS จาก server ด้วยนะครับ

ผลลัพธ์ที่ได้ เมื่อกดแชร์ไปยัง Facebook นะครับ

มีวิธีแชร์ให้เลือกมากมายครับ ไปลองเล่นกันดูได้ แต่ผมมองว่ามันยังไม่เสถียรเท่าไหร่ และรองรับไม่ครอบคลุมเท่าไหร่ครับ เผื่อใครจะเอาไปลองเล่นดู :D
อ่านเพิ่มเติมได้ที่
Source Code:
