ผสานรวมกับ UI การแชร์ระบบปฏิบัติการด้วย Web Share API

เว็บแอปสามารถใช้ความสามารถในการแชร์ที่ระบบจัดหาให้เหมือนกับแอปเฉพาะแพลตฟอร์ม

Joe Medley
Joe Medley

เมื่อใช้ Web Share API เว็บแอปจะใช้ความสามารถในการแชร์ที่ระบบจัดหาให้เหมือนกับแอปเฉพาะแพลตฟอร์มได้ Web Share API ช่วยให้เว็บแอปแชร์ลิงก์ ข้อความ และไฟล์กับแอปอื่นๆ ที่ติดตั้งในอุปกรณ์ได้เช่นเดียวกับแอปเฉพาะแพลตฟอร์ม

เครื่องมือเลือกเป้าหมายการแชร์ระดับระบบที่มี PWA ที่ติดตั้งไว้เป็นตัวเลือก
เครื่องมือเลือกเป้าหมายการแชร์ระดับระบบที่มี PWA ที่ติดตั้งไว้เป็นตัวเลือก

ความสามารถและข้อจำกัด

การแชร์เว็บมีความสามารถและข้อจำกัดดังต่อไปนี้

  • ใช้ได้เฉพาะในเว็บไซต์ที่เข้าถึงผ่าน HTTPS
  • หากการแชร์เกิดขึ้นใน iframe ของบุคคลที่สาม ต้องใช้แอตทริบิวต์ allow
  • โดยต้องเรียกให้แสดงเพื่อตอบสนองการดําเนินการของผู้ใช้ เช่น การคลิก การเรียกใช้ผ่านตัวแฮนเดิล onload เป็นไปไม่ได้
  • โดยสามารถแชร์ URL, ข้อความ หรือไฟล์ได้

การรองรับเบราว์เซอร์

  • Chrome: 89
  • Edge: 93
  • Firefox: อยู่หลังธง
  • Safari: 12.1

แหล่งที่มา

หากต้องการแชร์ลิงก์และข้อความ ให้ใช้เมธอด share() ซึ่งเป็นเมธอดที่อิงตามสัญญาที่มีออบเจ็กต์พร็อพเพอร์ตี้ที่ต้องระบุ หากไม่ต้องการให้เบราว์เซอร์แสดง 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 คุณควรตรวจสอบแท็ก <meta> ของ URL Canonical ใน <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>

คุณสามารถดูการทํางานจริงได้ในการสาธิตบน Glitch และดูซอร์สโค้ด การไม่ระบุแอตทริบิวต์จะทำให้คุณได้รับ NotAllowedError พร้อมข้อความ Failed to execute 'share' on 'Navigator': Permission denied

กรณีศึกษาเกี่ยวกับแอปติดตามซานตาคลอส

แอปติดตามซานตาคลอสที่แสดงปุ่มแชร์
ปุ่มแชร์เครื่องมือติดตามซานตาคลอส

เครื่องมือติดตามซานตาคลอส ซึ่งเป็นโปรเจ็กต์โอเพนซอร์สเป็นประเพณีวันหยุดของ Google ในทุกๆ เดือนธันวาคม คุณสามารถฉลองเทศกาลด้วยเกมและประสบการณ์ด้านการศึกษา

ในปี 2016 ทีมติดตามซานตาคลอสใช้ Web Share API ใน Android API นี้เหมาะสําหรับอุปกรณ์เคลื่อนที่อย่างยิ่ง ในช่วงหลายปีที่ผ่านมา ทีมได้นําปุ่มแชร์ในอุปกรณ์เคลื่อนที่ออกเนื่องจากพื้นที่มีจํากัด และทีมไม่สามารถให้เหตุผลได้ว่าต้องมีเป้าหมายการแชร์หลายรายการ

แต่ Web Share API ช่วยให้แสดงปุ่มเดียวได้ ซึ่งช่วยประหยัดพื้นที่อันมีค่า นอกจากนี้ ยังพบว่าผู้ใช้ที่แชร์ด้วย Web Share มีจำนวนมากกว่าผู้ใช้ที่ไม่ได้เปิดใช้ API ประมาณ 20% ไปที่ เครื่องมือติดตามซานตาคลอสเพื่อดูการแชร์เว็บ

การสนับสนุนเบราว์เซอร์

การรองรับ Web Share API ของเบราว์เซอร์มีความซับซ้อน และเราขอแนะนำให้คุณใช้การตรวจหาฟีเจอร์ (ตามที่อธิบายไว้ในตัวอย่างโค้ดก่อนหน้านี้) แทนที่จะคิดว่าเบราว์เซอร์รองรับวิธีการหนึ่งๆ

ข้อมูลคร่าวๆ เกี่ยวกับการรองรับฟีเจอร์นี้มีดังนี้ หากต้องการรายละเอียด โปรดไปที่ลิงก์การสนับสนุน

navigator.canShare()

การรองรับเบราว์เซอร์

  • Chrome: 89
  • Edge: 93
  • Firefox: อยู่หลังธง
  • Safari: 14

แหล่งที่มา

navigator.share()

การรองรับเบราว์เซอร์

  • Chrome: 89
  • Edge: 93
  • Firefox: อยู่หลังธง
  • Safari: 12.1

แหล่งที่มา

แสดงการสนับสนุน API

คุณกำลังวางแผนที่จะใช้ Web Share API ใช่ไหม การสนับสนุนแบบสาธารณะของคุณช่วยให้ทีม Chromium จัดลําดับความสําคัญของฟีเจอร์ต่างๆ และแสดงให้เห็นว่าการสนับสนุนฟีเจอร์เหล่านี้สำคัญเพียงใดต่อผู้ให้บริการเบราว์เซอร์รายอื่นๆ

ทวีตถึง @ChromiumDev โดยใช้แฮชแท็ก #WebShare และแจ้งให้เราทราบว่าคุณใช้ฟีเจอร์นี้ที่ไหนและอย่างไร