เว็บแอปใช้ความสามารถในการแชร์ที่ระบบมีให้เหมือนกับแอปเฉพาะแพลตฟอร์ม
Web Share API ช่วยให้เว็บแอปใช้ความสามารถด้านการแชร์ที่ระบบมีให้เหมือนกับแอปเฉพาะแพลตฟอร์ม Web Share API ช่วยให้เว็บแอปแชร์ลิงก์ ข้อความ และไฟล์กับแอปอื่นๆ ที่ติดตั้งในอุปกรณ์ได้ในลักษณะเดียวกันกับแอปที่ใช้เฉพาะแพลตฟอร์ม
![เครื่องมือเลือกเป้าหมายการแชร์ระดับระบบโดยมี PWA ที่ติดตั้งไว้เป็นตัวเลือก](https://web.dev/static/articles/web-share/image/system-level-share-target-9be61b07242ad.png?authuser=6&hl=th)
ความสามารถและข้อจำกัด
การแชร์เว็บมีความสามารถและข้อจำกัดต่อไปนี้
- และใช้ได้เฉพาะในเว็บไซต์ที่เข้าถึงผ่าน HTTPS เท่านั้น
- หากการแชร์เกิดขึ้นใน iframe ของบุคคลที่สาม คุณต้องใช้แอตทริบิวต์
allow
- โดยต้องเรียกใช้เพื่อตอบสนองต่อการดำเนินการของผู้ใช้ เช่น การคลิก เรียกใช้ผ่านเครื่องจัดการ
onload
ไม่ได้ - สามารถแชร์ URL, ข้อความ หรือไฟล์
การแชร์ลิงก์และข้อความ
หากต้องการแชร์ลิงก์และข้อความ ให้ใช้เมธอด 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
กรณีศึกษาเกี่ยวกับติดตามซานตาคลอส
![แอปตามติดซานต้าที่แสดงปุ่มแชร์](https://web.dev/static/articles/web-share/image/the-santa-tracker-app-sho-6ff6f0a0cebf4.png?authuser=6&hl=th)
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
และแจ้งให้เราทราบว่าคุณใช้แฮชแท็กนี้ที่ไหนและอย่างไร