หน้านี้ได้รับการแปลโดย 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 คุณจะตรวจสอบแท็ก Canonical URL <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>

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

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

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

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

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

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

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

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

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

navigator.canShare()

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

แหล่งที่มา

navigator.share()

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

แหล่งที่มา

แสดงการรองรับ API

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

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

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

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

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

การแชร์ไฟล์

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

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

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

แสดงการรองรับ API

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