Google ใช้เทคโนโลยี AI เพื่อแปลเนื้อหาเป็นภาษาที่คุณต้องการ การแปลโดย AI อาจมีข้อผิดพลาด

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

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

Joe Medley

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

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

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

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

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

Browser Support

Source

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

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

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

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

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

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

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

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

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

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

navigator.canShare()

Browser Support

Source

navigator.share()

Browser Support

Source

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

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

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

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

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

การแชร์ไฟล์

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

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

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

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

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