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

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

Joe Medley
Joe Medley

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

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

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

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

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

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

  • 89
  • 93
  • 12.1

แหล่งที่มา

หากต้องการแชร์ลิงก์และข้อความ ให้ใช้เมธอด share() ซึ่งเป็นเมธอดแบบสัญญากับออบเจ็กต์พร็อพเพอร์ตี้ที่จำเป็น ในการป้องกันไม่ให้เบราว์เซอร์ขว้าง TypeError ออบเจ็กต์ต้องมีพร็อพเพอร์ตี้ title, text, url หรือ files อย่างน้อย 1 รายการ เช่น คุณสามารถแชร์ข้อความโดยไม่มี 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 คุณจะต้องตรวจหาแท็ก Canonical URL <meta> ใน <head> ของหน้าเว็บ แล้วแชร์แท็กนั้น วิธีนี้จะช่วยให้ผู้ใช้ ได้รับประสบการณ์การใช้งานที่ดีขึ้น ฟีเจอร์นี้ไม่เพียงหลีกเลี่ยงการเปลี่ยนเส้นทางเท่านั้น แต่ยังช่วยให้ 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

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

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

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

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

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

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

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

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

navigator.canShare()

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

  • 89
  • 93
  • 14

แหล่งที่มา

navigator.share()

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

  • 89
  • 93
  • 12.1

แหล่งที่มา

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

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

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