การรับข้อมูลที่แชร์กับ Web Share Target API

ทำให้การแชร์บนอุปกรณ์เคลื่อนที่และเดสก์ท็อปง่ายขึ้นด้วย Web Share Target API

ในอุปกรณ์เคลื่อนที่หรือเดสก์ท็อป การแชร์ควรเป็นเรื่องง่ายเพียงคลิกปุ่มแชร์ เลือกแอป แล้วเลือกบุคคลที่จะแชร์ด้วย เช่น คุณอาจต้องการแชร์บทความที่น่าสนใจโดยส่งอีเมลให้เพื่อนหรือทวีตให้โลกรู้

ก่อนหน้านี้มีเพียงแอปเฉพาะแพลตฟอร์มเท่านั้นที่ลงทะเบียนกับระบบปฏิบัติการเพื่อรับการแชร์จากแอปอื่นๆ ที่ติดตั้งไว้ แต่ Web Share Target API จะช่วยให้เว็บแอปที่ติดตั้งไว้สามารถลงทะเบียนกับระบบปฏิบัติการที่ทำงานอยู่เบื้องหลังเพื่อรับเนื้อหาที่แชร์ได้

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

ดูการทํางานของเป้าหมายการแชร์เว็บ

  1. หากใช้ Chrome 76 ขึ้นไปสำหรับ Android หรือ Chrome 89 ขึ้นไปบนเดสก์ท็อป ให้เปิดการสาธิตเป้าหมายการแชร์เว็บ
  2. เมื่อได้รับข้อความแจ้ง ให้คลิกติดตั้งเพื่อเพิ่มแอปลงในหน้าจอหลัก หรือใช้เมนู Chrome เพื่อเพิ่มแอปลงในหน้าจอหลัก
  3. เปิดแอปที่รองรับการแชร์ หรือใช้ปุ่ม "แชร์" ในแอปเดโม
  4. จากเครื่องมือเลือกเป้าหมาย ให้เลือกการทดสอบการแชร์เว็บ

หลังจากแชร์แล้ว คุณควรเห็นข้อมูลที่แชร์ทั้งหมดในเว็บแอปเป้าหมายของการแชร์เว็บ

ลงทะเบียนแอปเป็นเป้าหมายการแชร์

หากต้องการลงทะเบียนแอปเป็นเป้าหมายการแชร์ แอปต้องเป็นไปตามเกณฑ์ความสามารถในการติดตั้งของ Chrome นอกจากนี้ ผู้ใช้ต้องเพิ่มแอปของคุณลงในหน้าจอหลักก่อนจึงจะแชร์ไปยังแอปได้ วิธีนี้จะช่วยป้องกันไม่ให้เว็บไซต์เพิ่มตัวเองลงในเครื่องมือเลือก Intent การแชร์ของผู้ใช้แบบสุ่ม และช่วยให้มั่นใจว่าการแชร์เป็นสิ่งที่ผู้ใช้ต้องการทำกับแอปของคุณ

อัปเดตไฟล์ Manifest ของเว็บแอป

หากต้องการลงทะเบียนแอปเป็นเป้าหมายการแชร์ ให้เพิ่มรายการ share_target ลงในไฟล์ Manifest ของเว็บแอป ซึ่งจะบอกให้ระบบปฏิบัติการรวมแอปของคุณเป็นตัวเลือกในตัวเลือก Intent สิ่งที่คุณเพิ่มลงในไฟล์ Manifest จะควบคุมข้อมูลที่แอปจะยอมรับ สถานการณ์ทั่วไป 3 รูปแบบของshare_target รายการมีดังนี้

  • การยอมรับข้อมูลพื้นฐาน
  • การยอมรับการเปลี่ยนแปลงแอปพลิเคชัน
  • การยอมรับไฟล์

การยอมรับข้อมูลพื้นฐาน

หากแอปเป้าหมายยอมรับเพียงข้อมูลพื้นฐาน เช่น ข้อมูล ลิงก์ และข้อความ ให้เพิ่มข้อมูลต่อไปนี้ลงในไฟล์ 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 เป็นรูปภาพสไลด์
  • แอปรับส่งข้อความสามารถร่างข้อความใหม่โดยใช้ text และ url ที่ต่อต่อกันและวาง title

กำลังประมวลผลส่วนแบ่ง GET

หากผู้ใช้เลือกแอปพลิเคชันและ method ของคุณคือ "GET" (ค่าเริ่มต้น) เบราว์เซอร์จะเปิดหน้าต่างใหม่ที่ URL ของ action จากนั้นเบราว์เซอร์จะสร้างสตริงการค้นหาโดยใช้ค่าที่เข้ารหัส URL ที่ระบุไว้ในไฟล์ Manifest เช่น หากแอปการแชร์มี title และ text สตริงการค้นหาจะเป็น ?title=hello&text=world หากต้องการประมวลผล ให้ใช้ DOMContentLoaded event listener ในหน้าเบื้องหน้าและแยกวิเคราะห์สตริงคําค้นหา ดังนี้

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 ที่แสดงแอปเดโมที่มีเนื้อหาที่แชร์
ตัวอย่างแอปเป้าหมายการแชร์

โปรดตรวจสอบข้อมูลที่เข้ามา แต่ไม่รับประกันว่าแอปอื่นๆ จะแชร์เนื้อหาที่เหมาะสมในพารามิเตอร์ที่ถูกต้อง

เช่น ใน Android ช่อง url จะว่างเปล่าเนื่องจากระบบการแชร์ของ Android ไม่รองรับ แต่ URL มักจะปรากฏในช่อง text หรือในช่อง title เป็นครั้งคราว

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

ระบบรองรับ Web Share Target API ตามที่อธิบายไว้ด้านล่าง

ในทุกแพลตฟอร์ม คุณจะต้องติดตั้งเว็บแอปก่อน แอปจึงจะปรากฏเป็นเป้าหมายที่เป็นไปได้ในการรับข้อมูลที่แชร์

แอปพลิเคชันตัวอย่าง

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

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

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