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

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

Jeff Posnick

Joe Medley

Sam Richard

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

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

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

หากไม่คุ้นเคยกับวิธีการทำงานของเป้าหมายการแชร์บนเว็บ การรับข้อมูลที่แชร์ด้วย 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
};

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

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

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

บทสรุป

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

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