หน้านี้ได้รับการแปลโดย 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 หรือในทางกลับกัน การให้สิทธิ์สมาชิกทั้ง 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

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

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

Santa tracker ซึ่งเป็นโปรเจ็กต์โอเพนซอร์สเป็นธรรมเนียมวันหยุดที่ 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

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