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

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

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

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

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

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

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

คุณลองใช้ได้ในแอปตัวอย่าง Fugu บันทึกและดู Service Worker ของบันทึก ในแหล่งที่มา ได้

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

บทสรุป

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

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