หน้านี้ได้รับการแปลโดย Cloud Translation API

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

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

Pete LePage

Joe Medley

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

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

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

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

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

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

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

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

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

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

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

หมายเหตุ: คุณสามารถมี share_target ได้เพียง 1 รายการต่อไฟล์ Manifest เท่านั้นหากต้องการแชร์ หลายตำแหน่งภายในแอป ให้ตัวเลือกดังกล่าวเป็นตัวเลือกในการแชร์ หน้า Landing Page เป้าหมาย (หน้าที่ระบุโดยรายการ url)

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

หากแอปเป้าหมายยอมรับเพียงข้อมูลพื้นฐาน เช่น ข้อมูล ลิงก์ และข้อความ ให้เพิ่มค่าต่อไปนี้ลงในไฟล์ 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 หากต้องการดำเนินการ ให้ใช้DOMContentLoaded 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 ล่วงหน้า เพื่อให้โหลดได้อย่างรวดเร็วและทำงานได้อย่างเสถียรแม้ว่าผู้ใช้จะออฟไลน์อยู่ กล่องงานคือเครื่องมือที่ช่วยคุณ ใช้การแคชล่วงหน้าใน Service Worker ของคุณ

กำลังประมวลผลการแชร์ POST

หาก method ของคุณคือ "POST" เหมือนกับเมื่อแอปเป้าหมายยอมรับไฟล์ที่บันทึกไว้ บุ๊กมาร์กหรือไฟล์ที่แชร์ เนื้อหาของคำขอ POST ที่เข้ามาใหม่จะประกอบด้วย ข้อมูลที่ส่งผ่านโดยแอปพลิเคชันการแชร์ ซึ่งเข้ารหัสโดยใช้ค่า enctype ที่ให้ไว้ในไฟล์ Manifest

หน้าเบื้องหน้าประมวลผลข้อมูลนี้โดยตรงไม่ได้ เนื่องจากหน้าเว็บเห็นข้อมูลเป็น แล้ว หน้าเว็บจะส่งต่อไปยัง Service Worker ซึ่งคุณสามารถสกัดกั้นด้วย fetch Listener เหตุการณ์ จากที่นี่ คุณสามารถส่งข้อมูลกลับไปยังเบื้องหน้าได้ หน้าเว็บโดยใช้ 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 และแจ้งให้เราทราบถึงตำแหน่งและวิธีที่คุณใช้งาน