การแชร์บนอุปกรณ์เคลื่อนที่และเดสก์ท็อปที่ง่ายขึ้นด้วย Web Share Target API
ในอุปกรณ์เคลื่อนที่หรือเดสก์ท็อป การแชร์ควรทำได้ง่ายๆ ด้วยการคลิกปุ่มแชร์ การเลือกแอป และการเลือกแอปที่จะแชร์ด้วย เช่น คุณอาจต้องการ แชร์บทความที่น่าสนใจ โดยส่งอีเมลให้เพื่อนหรือทวีตถึงคนทั้งโลก
ก่อนหน้านี้ แอปเฉพาะแพลตฟอร์มเท่านั้นที่จะลงทะเบียนกับระบบปฏิบัติการเพื่อรับการแชร์จากแอปอื่นๆ ที่ติดตั้งไว้ได้ แต่เมื่อใช้ Web Share Target API เว็บแอปที่ติดตั้งไว้จะลงทะเบียนด้วยระบบปฏิบัติการที่ใช้งานอยู่ได้ โดยกำหนดเป้าหมายการแชร์เพื่อรับเนื้อหาที่แชร์
![โทรศัพท์ Android ที่เปิดลิ้นชัก "แชร์ผ่าน" อยู่](https://developer.chrome.com/static/docs/capabilities/web-apis/web-share-target/image/android-phone-the-share-e651a6cf19688.png?authuser=5&hl=th)
ดูการทํางานจริงของเป้าหมายการแชร์เว็บ
- ใช้ Chrome 76 ขึ้นไปสําหรับ Android หรือ Chrome 89 ขึ้นไปในเดสก์ท็อป ให้เปิดการสาธิตเป้าหมายการแชร์เว็บ
- เมื่อได้รับข้อความแจ้ง ให้คลิกติดตั้งเพื่อเพิ่มแอปลงในหน้าจอหลัก หรือใช้เมนู Chrome เพื่อเพิ่มแอปลงในหน้าจอหลัก
- เปิดแอปที่รองรับการแชร์ หรือใช้ปุ่มแชร์ในแอปเดโม
- จากเครื่องมือเลือกเป้าหมาย ให้เลือกการทดสอบการแชร์เว็บ
หลังจากแชร์แล้ว คุณควรเห็นข้อมูลที่แชร์ทั้งหมดในเว็บแอปเป้าหมายของการแชร์เว็บ
ลงทะเบียนแอปเป็นเป้าหมายการแชร์
หากต้องการลงทะเบียนแอปเป็นเป้าหมายการแชร์ แอปจะต้องเป็นไปตามเกณฑ์ความสามารถในการติดตั้งของ Chrome นอกจากนี้ ผู้ใช้ต้องเพิ่มแอปไปยัง หน้าจอหลักก่อน จึงจะแชร์กับแอปของคุณได้ วิธีนี้จะป้องกันไม่ให้เว็บไซต์สุ่มเพิ่มตัวเองลงในตัวเลือกความตั้งใจในการแชร์ของผู้ใช้และดูแลให้ผู้ใช้ต้องการทำการแชร์กับแอป
อัปเดตไฟล์ Manifest ของเว็บแอป
หากต้องการลงทะเบียนแอปเป็นเป้าหมายการแชร์ ให้เพิ่มรายการ share_target
ลงในไฟล์ Manifest ของเว็บแอป การดำเนินการนี้จะบอกให้ระบบปฏิบัติการรวมแอปของคุณ
เป็นตัวเลือกในตัวเลือก Intent สิ่งที่คุณเพิ่มลงในไฟล์ Manifest จะควบคุมข้อมูลที่แอปจะยอมรับ รายการ share_target
มีสถานการณ์ทั่วไป 3 สถานการณ์ดังนี้
- กำลังยอมรับข้อมูลพื้นฐาน
- กำลังยอมรับการเปลี่ยนแปลงใบสมัคร
- กำลังยอมรับไฟล์
กำลังยอมรับข้อมูลพื้นฐาน
หากแอปเป้าหมายยอมรับข้อมูลพื้นฐาน เช่น ข้อมูล ลิงก์ และข้อความ ให้เพิ่มค่าต่อไปนี้ลงในไฟล์ manifest.json
"share_target": {
"action": "/share-target/",
"method": "GET",
"params": {
"title": "title",
"text": "text",
"url": "url"
}
}
หากแอปพลิเคชันมีรูปแบบ URL การแชร์อยู่แล้ว คุณสามารถแทนที่ค่า params
ด้วยพารามิเตอร์การค้นหาที่มีอยู่ได้ เช่น หากรูปแบบ URL การแชร์ของคุณใช้ body
แทน text
คุณอาจแทนที่ "text": "text"
ด้วย "text":
"body"
ได้
ค่า method
จะมีค่าเริ่มต้นเป็น "GET"
หากไม่ได้ระบุไว้ ช่อง enctype
ที่ไม่ปรากฏในตัวอย่างนี้คือประเภทการเข้ารหัสสำหรับข้อมูล
สำหรับเมธอด "GET"
enctype
จะมีค่าเริ่มต้นเป็น "application/x-www-form-urlencoded"
และระบบจะไม่ประมวลผลค่านี้หากตั้งค่าเป็นอย่างอื่น
กำลังยอมรับการเปลี่ยนแปลงใบสมัคร
หากข้อมูลที่แชร์เปลี่ยนแปลงแอปเป้าหมายในลักษณะใดลักษณะหนึ่ง เช่น การบันทึกบุ๊กมาร์กในแอปพลิเคชันเป้าหมาย ให้ตั้งค่า method
เป็น "POST"
และใส่ช่อง enctype
ตัวอย่างด้านล่างสร้างบุ๊กมาร์กในแอปเป้าหมาย จึงใช้ "POST"
สำหรับ method
และ "multipart/form-data"
สำหรับ enctype
{
"name": "Bookmark",
"share_target": {
"action": "/bookmark",
"method": "POST",
"enctype": "multipart/form-data",
"params": {
"url": "link"
}
}
}
กำลังยอมรับไฟล์
เช่นเดียวกับการเปลี่ยนแปลงแอปพลิเคชัน การยอมรับไฟล์กำหนดให้ method
ต้องมี "POST"
และ enctype
นอกจากนี้ enctype
ต้องเป็น "multipart/form-data"
และต้องเพิ่มรายการ files
คุณต้องเพิ่มอาร์เรย์ files
ที่กำหนดประเภทไฟล์ที่แอปยอมรับด้วย องค์ประกอบอาร์เรย์คือรายการที่มีสมาชิก 2 คน ได้แก่ ช่อง name
และช่อง accept
ช่อง accept
จะใช้ประเภท MIME, นามสกุลไฟล์ หรืออาร์เรย์ที่มีทั้ง 2 ประเภท วิธีที่ดีที่สุดคือให้อาร์เรย์ที่มีทั้งประเภท MIME และนามสกุลไฟล์ เนื่องจากระบบปฏิบัติการที่แต่ละแบบต้องการ
{
"name": "Aggregator",
"share_target": {
"action": "/cgi-bin/aggregate",
"method": "POST",
"enctype": "multipart/form-data",
"params": {
"title": "name",
"text": "description",
"url": "link",
"files": [
{
"name": "records",
"accept": ["text/csv", ".csv"]
},
{
"name": "graphs",
"accept": "image/svg+xml"
}
]
}
}
}
จัดการเนื้อหาที่เข้ามาใหม่
วิธีที่คุณจะจัดการกับข้อมูลที่แชร์เข้ามานั้นขึ้นอยู่กับคุณและขึ้นอยู่กับแอปของคุณ ตัวอย่างเช่น
- โปรแกรมรับส่งอีเมลสามารถร่างอีเมลใหม่โดยใช้
title
เป็นชื่อเรื่องของอีเมล โดยที่text
และurl
ต่อกันเป็นส่วนเนื้อหา - แอปโซเชียลเน็ตเวิร์กอาจร่างโพสต์ใหม่ที่ไม่สนใจ
title
โดยใช้text
เป็นเนื้อความของข้อความ และเพิ่มurl
เป็นลิงก์ได้ หากtext
หายไป แอปอาจใช้url
ในส่วนเนื้อหาด้วย หากไม่มีurl
แอปอาจสแกนtext
เพื่อหา URL และเพิ่มเป็นลิงก์ - แอปแชร์รูปภาพสามารถสร้างภาพสไลด์ใหม่โดยใช้
title
เป็นชื่อภาพสไลด์text
เป็นคำอธิบาย และใช้files
เป็นภาพภาพสไลด์ - แอปรับส่ง SMS อาจร่างข้อความใหม่โดยใช้
text
และurl
ที่ต่อกันและลดtitle
ได้
กำลังประมวลผลการแชร์ GET
หากผู้ใช้เลือกแอปพลิเคชันของคุณ และ method
คือ "GET"
(ค่าเริ่มต้น) เบราว์เซอร์จะเปิดหน้าต่างใหม่ที่ URL ของ action
จากนั้นเบราว์เซอร์จะสร้างสตริงการค้นหาโดยใช้ค่าที่เข้ารหัส URL ที่ให้ไว้ในไฟล์ Manifest
เช่น หากแอปการแชร์มี title
และ text
สตริงการค้นหาจะเป็น ?title=hello&text=world
หากต้องการประมวลผล ให้ใช้ Listener เหตุการณ์ DOMContentLoaded
ในเบื้องหน้าและแยกวิเคราะห์สตริงการค้นหา ดังนี้
window.addEventListener('DOMContentLoaded', () => {
const parsedUrl = new URL(window.location);
// searchParams.get() will properly handle decoding the values.
console.log('Title shared: ' + parsedUrl.searchParams.get('title'));
console.log('Text shared: ' + parsedUrl.searchParams.get('text'));
console.log('URL shared: ' + parsedUrl.searchParams.get('url'));
});
อย่าลืมใช้ Service Worker เพื่อแคชล่วงหน้าหน้าเว็บ action
เพื่อให้หน้าโหลดได้อย่างรวดเร็วและทำงานได้อย่างเสถียร แม้ว่าผู้ใช้จะออฟไลน์อยู่ก็ตาม
Workbox เป็นเครื่องมือที่จะช่วยให้คุณใช้การแคชล่วงหน้าใน Service Worker ได้
กำลังประมวลผลการแชร์ POST
หาก method
ของคุณคือ "POST"
เช่นเดียวกับในกรณีที่แอปเป้าหมายยอมรับบุ๊กมาร์กหรือไฟล์ที่แชร์ที่บันทึกไว้ เนื้อหาของคำขอ POST
ที่เข้ามาจะมีข้อมูลที่ส่งโดยแอปพลิเคชันการแชร์ ซึ่งเข้ารหัสโดยใช้ค่า enctype
ที่ระบุไว้ในไฟล์ Manifest
หน้าเบื้องหน้าไม่สามารถประมวลผลข้อมูลนี้ได้โดยตรง เนื่องจากหน้านี้จะเห็นข้อมูลเป็นคำขอ หน้าเว็บจึงส่งข้อมูลไปยัง Service Worker ซึ่งคุณสามารถสกัดกั้นด้วย Listener เหตุการณ์ fetch
จากที่นี่ คุณสามารถส่งข้อมูลกลับไปยังหน้าเบื้องหน้าโดยใช้ postMessage()
หรือส่งต่อไปยังเซิร์ฟเวอร์ ดังนี้
self.addEventListener('fetch', event => {
const url = new URL(event.request.url);
// If this is an incoming POST request for the
// registered "action" URL, respond to it.
if (event.request.method === 'POST' &&
url.pathname === '/bookmark') {
event.respondWith((async () => {
const formData = await event.request.formData();
const link = formData.get('link') || '';
const responseUrl = await saveBookmark(link);
return Response.redirect(responseUrl, 303);
})());
}
});
กำลังยืนยันเนื้อหาที่แชร์
![โทรศัพท์ Android แสดงแอปเดโมซึ่งมีเนื้อหาที่แชร์](https://developer.chrome.com/static/docs/capabilities/web-apis/web-share-target/image/an-android-phone-displayi-000d1b109b71e.png?authuser=5&hl=th)
อย่าลืมยืนยันข้อมูลขาเข้า ขออภัย เราไม่รับประกันว่าแอปอื่นๆ จะแชร์เนื้อหาที่เหมาะสมในพารามิเตอร์ที่ถูกต้อง
เช่น ใน Android ช่อง url
จะว่างเปล่าเนื่องจากระบบการแชร์ของ Android ไม่รองรับ แต่ URL มักจะปรากฏในช่อง text
หรือบางครั้งในช่อง title
การสนับสนุนเบราว์เซอร์
Web Share Target API ใช้งานได้ตามที่อธิบายไว้ด้านล่าง
ในทุกแพลตฟอร์ม คุณจะต้องติดตั้งเว็บแอปก่อน เว็บแอปจึงจะแสดงเป็นเป้าหมายที่เป็นไปได้สำหรับการรับข้อมูลที่แชร์
แอปพลิเคชันตัวอย่าง
แสดงการสนับสนุนสำหรับ API
คุณวางแผนที่จะใช้ Web Share Target API ไหม การสนับสนุนสาธารณะของคุณช่วยให้ทีม Chromium จัดลำดับความสำคัญของคุณลักษณะต่างๆ และแสดงให้ผู้ให้บริการเบราว์เซอร์รายอื่นๆ เห็นว่าการสนับสนุนนั้นสำคัญเพียงใด
ส่งทวีตไปที่ @ChromiumDev โดยใช้แฮชแท็ก
#WebShareTarget
และแจ้งให้เราทราบว่าคุณใช้แฮชแท็กนี้ที่ไหนและอย่างไร