หน้านี้ได้รับการแปลโดย Cloud Translation API

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

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

Joe Medley

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

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

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

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

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

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

แหล่งที่มา

การแชร์ลิงก์และข้อความ

หากต้องการแชร์ลิงก์และข้อความ ให้ใช้เมธอด 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()

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

แหล่งที่มา

navigator.share()

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

แหล่งที่มา

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

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

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

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

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

การแชร์ลิงก์และข้อความ

การแชร์ไฟล์

การแชร์ใน iframe ของบุคคลที่สาม

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

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

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

ลิงก์ที่มีประโยชน์