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

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

Pete LePage

Joe Medley

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

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

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

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

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

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

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

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

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

อัปเดตไฟล์ 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 หากต้องการประมวลผล ให้ใช้ 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 ช่อง url จะว่างเปล่าเนื่องจากระบบการแชร์ของ Android ไม่รองรับ แต่ URL มักจะปรากฏในช่อง text หรือบางครั้งในช่อง title

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

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

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

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

• สควอช
• PWA ของสมุดภาพ

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

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

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