เว็บแอปสามารถใช้ความสามารถในการแชร์ที่ระบบจัดเตรียมให้เช่นเดียวกับแอปเฉพาะแพลตฟอร์ม
Web Share API ช่วยให้เว็บแอปใช้ความสามารถในการแชร์ที่ระบบมีให้เช่นเดียวกับแอปเฉพาะแพลตฟอร์มได้ Web Share API ช่วยให้เว็บแอปแชร์ลิงก์ ข้อความ และไฟล์ไปยังแอปอื่นๆ ที่ติดตั้งในอุปกรณ์ได้ในลักษณะเดียวกับแอปเฉพาะแพลตฟอร์ม
ความสามารถและข้อจำกัด
การแชร์บนเว็บมีความสามารถและข้อจำกัดต่อไปนี้
- ใช้ได้เฉพาะในเว็บไซต์ที่เข้าถึงผ่าน HTTPS เท่านั้น
- หากการแชร์เกิดขึ้นใน iframe ของบุคคลที่สาม จะต้องใช้แอตทริบิวต์
allow - ต้องเรียกใช้เพื่อตอบสนองต่อการกระทำของผู้ใช้ เช่น การคลิก เรียกใช้ผ่านแฮนเดิล
onloadไม่ได้ - โดยจะแชร์ URL, ข้อความ หรือไฟล์ก็ได้
การแชร์ลิงก์และข้อความ
หากต้องการแชร์ลิงก์และข้อความ ให้ใช้วิธี share() ซึ่งเป็นวิธีที่อิงตาม Promise และมีออบเจ็กต์พร็อพเพอร์ตี้ที่ต้องระบุ หากต้องการไม่ให้เบราว์เซอร์แสดง TypeError ออบเจ็กต์ต้องมีพร็อพเพอร์ตี้ต่อไปนี้อย่างน้อย 1 รายการ ได้แก่ title, text, url หรือ files เช่น คุณสามารถแชร์ข้อความโดยไม่มี URL หรือแชร์ URL โดยไม่มีข้อความก็ได้ การอนุญาตให้สมาชิกทั้ง 3 คน เข้าถึงจะช่วยเพิ่มความยืดหยุ่นของกรณีการใช้งาน ลองนึกภาพว่าหลังจากเรียกใช้โค้ด ด้านล่าง ผู้ใช้เลือกแอปพลิเคชันอีเมลเป็นเป้าหมาย พารามิเตอร์ title อาจกลายเป็นเรื่องของอีเมล text เนื้อหาของข้อความ และไฟล์ ไฟล์แนบ
if (navigator.share) { navigator.share({ title: 'web.dev', text: 'Check out web.dev.', url: 'https://web.dev/', }) .then(() => console.log('Successful share')) .catch((error) => console.log('Error sharing', error)); } หากเว็บไซต์มี URL หลายรายการสำหรับเนื้อหาเดียวกัน ให้แชร์ Canonical URL ของหน้าเว็บแทน URL ปัจจุบัน แทนที่จะแชร์ document.location.href คุณควรตรวจสอบแท็ก URL ของ Canonical <meta> ใน<head> ของหน้าเว็บ แล้วแชร์แท็กนั้น ซึ่งจะช่วยมอบประสบการณ์การใช้งานที่ดียิ่งขึ้นให้แก่ผู้ใช้ ซึ่งไม่เพียงแต่หลีกเลี่ยงการเปลี่ยนเส้นทาง แต่ยังช่วยให้มั่นใจได้ว่า URL ที่แชร์จะมอบประสบการณ์การใช้งานที่ถูกต้องแก่ผู้ใช้สำหรับไคลเอ็นต์หนึ่งๆ ตัวอย่างเช่น หากเพื่อนแชร์ URL อุปกรณ์เคลื่อนที่และคุณดู URL นั้นบนคอมพิวเตอร์เดสก์ท็อป คุณควรเห็นเวอร์ชันเดสก์ท็อป
let url = document.location.href; const canonicalElement = document.querySelector('link[rel=canonical]'); if (canonicalElement !== null) { url = canonicalElement.href; } navigator.share({url}); การแชร์ไฟล์
หากต้องการแชร์ไฟล์ ให้ทดสอบและเรียกใช้ navigator.canShare() ก่อน จากนั้นใส่ อาร์เรย์ของไฟล์ในการเรียกใช้ navigator.share() ดังนี้
if (navigator.canShare && navigator.canShare({ files: filesArray })) { navigator.share({ files: filesArray, title: 'Vacation Pictures', text: 'Photos from September 27 to October 14.', }) .then(() => console.log('Share was successful.')) .catch((error) => console.log('Sharing failed', error)); } else { console.log(`Your system doesn't support sharing files.`); } โปรดสังเกตว่าตัวอย่างจะจัดการการตรวจหาแฮนเดิลโดยการทดสอบ navigator.canShare() แทนที่จะทดสอบ navigator.share() ออบเจ็กต์ข้อมูลที่ส่งไปยัง canShare() รองรับเฉพาะพร็อพเพอร์ตี้ files คุณแชร์ไฟล์เสียง รูปภาพ PDF วิดีโอ และข้อความบางประเภทได้ ดูรายการทั้งหมดได้ที่นามสกุลไฟล์ที่อนุญาตใน Chromium อาจมีการเพิ่มประเภทไฟล์อื่นๆ ในอนาคต
การแชร์ใน iframe ของบุคคลที่สาม
หากต้องการทริกเกอร์การดำเนินการแชร์จากภายใน iframe ของบุคคลที่สาม ให้ฝัง iframe ด้วยแอตทริบิวต์ allow ที่มีค่าเป็น web-share ดังนี้
<!-- On https://example.com/index.html --> <iframe allow="web-share" src="https://third-party.example.com/iframe.html"></iframe> กรณีศึกษาเกี่ยวกับแอปติดตามซานตาคลอส
แอปติดตามซานตาคลอสเป็นโปรเจ็กต์โอเพนซอร์สและเป็นประเพณีในช่วงวันหยุดของ Google ในเดือนธันวาคมของทุกปี คุณสามารถเฉลิมฉลองเทศกาล ด้วยเกมและประสบการณ์การเรียนรู้
ในปี 2016 ทีมติดตามซานตาคลอสใช้ Web Share API ใน Android API นี้เหมาะกับอุปกรณ์เคลื่อนที่อย่างยิ่ง ในช่วงหลายปีที่ผ่านมา ทีมได้นำปุ่มแชร์ในอุปกรณ์เคลื่อนที่ออกเนื่องจากพื้นที่เป็นสิ่งสำคัญ และไม่สามารถมีเป้าหมายการแชร์หลายรายการได้
แต่เมื่อใช้ Web Share API พวกเขาก็สามารถแสดงปุ่มเดียวได้ ซึ่งช่วยประหยัดพื้นที่พิกเซลอันมีค่า นอกจากนี้ยังพบว่าผู้ใช้ที่แชร์ด้วย Web Share มีการแชร์มากกว่าผู้ใช้ที่ไม่ได้เปิดใช้ API ประมาณ 20% ไปที่ติดตามซานตาคลอสเพื่อดูการทำงานของ Web Share
การสนับสนุนเบราว์เซอร์
การรองรับ Web Share API ในเบราว์เซอร์มีความแตกต่างกัน และเราขอแนะนำให้คุณใช้การตรวจหาฟีเจอร์ (ตามที่อธิบายไว้ในตัวอย่างโค้ดก่อนหน้านี้) แทนการสันนิษฐานว่าระบบรองรับเมธอดใดเมธอดหนึ่ง
ต่อไปนี้คือภาพรวมคร่าวๆ ของการรองรับฟีเจอร์นี้ หากต้องการข้อมูลโดยละเอียด โปรดคลิกลิงก์สนับสนุนใดลิงก์หนึ่ง
navigator.canShare()navigator.share()
แสดงการสนับสนุน API
คุณวางแผนที่จะใช้ Web Share API ใช่ไหม การสนับสนุนแบบสาธารณะของคุณจะช่วยให้ทีม Chromium จัดลําดับความสําคัญของฟีเจอร์และแสดงให้ผู้ให้บริการเบราว์เซอร์รายอื่นๆ เห็นว่าการสนับสนุนฟีเจอร์เหล่านี้มีความสําคัญเพียงใด
ทวีตถึง @ChromiumDev โดยใช้แฮชแท็ก #WebShare และแจ้งให้เราทราบว่าคุณใช้ฟีเจอร์นี้ที่ไหนและอย่างไร