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