ผสานรวม PWA เป็น UI การแชร์ในตัวด้วย Workbox

วิธีทำให้ PWA แสดงข้างแอปเฉพาะแพลตฟอร์มใน UI การแชร์ระดับระบบ

Jeff Posnick

Joe Medley

Sam Richard

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

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

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

ในหน้าเดียวกัน

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

การใช้ฟังก์ชันการกำหนดเป้าหมายการแชร์เว็บมี 2 ส่วน ดังนี้ ก่อนอื่นให้อัปเดตไฟล์ Manifest ของเว็บแอปเพื่อระบุว่าคุณต้องการให้แอปเป็นเป้าหมายการแชร์เมื่อติดตั้ง ตัวอย่างต่อไปนี้จะนำทางการแชร์ไปยัง URL ของ /share ผ่านคำขอ POST โดยได้รับการเข้ารหัสเป็นแบบฟอร์มที่มีหลายส่วน โดยมีชื่อเรียกว่า name, ข้อความชื่อ description และรูปภาพ JPEG มีชื่อว่า photos

…
"share_target": {
  "action": "/share",
  "method": "POST",
  "enctype": "multipart/form-data",
  "params": {
    "title": "name",
    "text": "description",
    "files": [
      {
        "name": "photos",
        "accept": ["image/jpeg", ".jpg"]
      }
    ]
  }
}
…

Service Worker แชร์เป้าหมายกับ Workbox

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

คุณสามารถดำเนินการนี้ในพื้นที่ทำงาน โดยลงทะเบียนเส้นทางที่จัดการโดย Service Worker เริ่มต้นด้วยการนําเข้า registerRoute จาก 'workbox-routing' โปรดทราบว่าระบบได้ลงทะเบียนโดเมนดังกล่าวสำหรับเส้นทาง /share ซึ่งเป็นเส้นทางเดียวกับที่ระบุไว้ในไฟล์ Manifest ของเว็บแอป ในการตอบกลับ ระบบจะโทรหา shareTargetHandler()

import { registerRoute } from 'workbox-routing';

registerRoute(
  '/share',
  shareTargetHandler,
  'POST'
);

ฟังก์ชัน shareTargetHandler() เป็นแบบไม่พร้อมกันและเก็บเหตุการณ์ไว้ รอข้อมูลแบบฟอร์ม แล้วดึงไฟล์สื่อจากนั้น

async function shareTargetHandler ({event}) {
  const formData = await event.request.formData();
  const mediaFiles = formData.getAll('media');

  for (const mediaFile of mediaFiles) {
    // Do something with mediaFile
    // Maybe cache it or post it back to a server
  });

  // Do something with the rest of formData as you need
  // Maybe save it to IndexedDB
};

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

คุณลองใช้ในแอปตัวอย่าง Fugu Journal และดูการใช้งาน Service Worker ได้ในซอร์สโค้ด

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

บทสรุป

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

รูปภาพโดย Elaine Casap ใน Unsplash