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

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

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

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

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

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

หากไม่คุ้นเคยกับวิธีการทำงานของ Web Share Target หัวข้อการรับข้อมูลที่แชร์ด้วย 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 โดยตรงเพื่อจัดการคําขอ ซึ่งจะช่วยให้แอปเป็นเป้าหมายการแชร์ได้โดยไม่ต้องมีแบ็กเอนด์

ซึ่งทำได้ใน 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 โดยตรงจะทำให้แอปของคุณไม่มีข้อจำกัดนี้ ซึ่งช่วยให้เป้าหมายการแชร์ทำงานได้ในแอปขณะออฟไลน์และไม่มีแบ็กเอนด์

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