Web Share API มาแชร์กันเถอะ ~

Pozterz
Pozterz
Nov 3 · 3 min read

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

สวัสดีครับ วันนี้เราจะมาลองเล่น Web Share API กัน เย้

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

คำตอบคือทำได้นะครับ เราจะใช้ Web Share API นั่นเอง แต่การจะใช้ก็จะมีข้อจำกัดอยู่นะครับเช่น จากที่ผมได้ลองมาคือ

  • require HTTPS
  • บน IOS Safari ไม่สามารถแชร์รูปจากการ fetch data จาก api ได้
  • Browser Support น้อยมาก และเป็นเวอร์ชั่นค่อนข้างใหม่เลยทีเดียว
https://caniuse.com/#feat=web-share

อันนี้ที่เจอมานะครับ ถ้าใครมีวิธีดึงรูปจาก 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:

ผลลัพธ์ที่ได้จะเป็นแบบนี้ครับ

แชร์บน Instagram
แชร์ใน LINE
แชร์บน Facebook

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

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

แชร์ลง Facebook

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

อ่านเพิ่มเติมได้ที่

Source Code:

Pozterz

Written by

Pozterz

Lv.25 Full Stack Pokemon @Pi R Square

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