Cách giúp PWA xuất hiện bên cạnh các ứng dụng dành riêng cho nền tảng trong giao diện người dùng chia sẻ ở cấp hệ thống
API Mục tiêu chia sẻ web cho phép bạn hiển thị Ứng dụng web tiến bộ trong trang tính chia sẻ ở cấp hệ thống của người dùng sau khi cài đặt. Mặc dù cách này là rất hiệu quả nếu bạn có sẵn một máy chủ để nhận yêu cầu, nhưng sẽ khó hoạt động hơn nhiều nếu bạn không có máy chủ.
Trong bài viết này, chúng ta sẽ sử dụng Workbox, một bộ thư viện JavaScript để thêm tính năng hỗ trợ ngoại tuyến vào các ứng dụng web, để tạo một URL mục tiêu dùng chung nằm hoàn toàn bên trong trình chạy dịch vụ của bạn. Điều này cho phép các trang web tĩnh và ứng dụng trang đơn phân phát dưới dạng mục tiêu chia sẻ mà không cần có điểm cuối máy chủ chuyên dụng.
Share Target Test.
Trên cùng một trang
Nếu bạn chưa hiểu rõ cách hoạt động của Web Share Target, thì bài viết Nhận dữ liệu được chia sẻ qua Web Share Target API sẽ được trình bày chi tiết. Sau đây là phần đánh giá nhanh.
Có hai phần để triển khai chức năng mục tiêu chia sẻ web. Trước tiên, hãy cập nhật tệp kê khai ứng dụng web để cho biết rằng bạn muốn ứng dụng của mình trở thành mục tiêu chia sẻ khi được cài đặt. Ví dụ sau đây sẽ chia sẻ URL /share thông qua một yêu cầu POST. Tệp này được mã hoá dưới dạng nhiều phần, với tiêu đề là name, văn bản là description và hình ảnh JPEG là 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 chia sẻ mục tiêu với Workbox
Mặc dù thường do điểm cuối máy chủ xử lý, nhưng một mẹo nhỏ bạn có thể thực hiện đối với mục tiêu chia sẻ là đăng ký tuyến trực tiếp trong trình chạy dịch vụ để xử lý yêu cầu. Việc này sẽ giúp ứng dụng của bạn trở thành mục tiêu chia sẻ mà không cần có phần phụ trợ.
Bạn thực hiện việc này trong Workbox bằng cách đăng ký một tuyến do trình chạy dịch vụ của bạn xử lý. Bắt đầu bằng cách nhập registerRoute từ 'workbox-routing'. Xin lưu ý rằng tuyến này được đăng ký cho tuyến /share, chính là tuyến được liệt kê trong tệp kê khai ứng dụng web mẫu. Để phản hồi, hàm này sẽ gọi shareTargetHandler().
import { registerRoute } from 'workbox-routing';
registerRoute(
'/share',
shareTargetHandler,
'POST'
);
Hàm shareTargetHandler() không đồng bộ và lấy sự kiện, chờ dữ liệu biểu mẫu rồi truy xuất các tệp nội dung nghe nhìn từ đó.
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
};
Sau đó, bạn có thể làm bất cứ điều gì bạn muốn với các tệp này. Bạn có thể lưu các tệp này vào bộ nhớ đệm. Bạn có thể gửi chúng đến một nơi nào đó bằng yêu cầu tìm nạp. Bạn thậm chí có thể sử dụng các tuỳ chọn tệp kê khai khác, có thể phân phát một trang có một số tham số truy vấn cho các mục được chia sẻ khác hoặc lưu trữ dữ liệu và con trỏ đến nội dung nghe nhìn trong Cache Storage API hoặc IndexedDB.
Bạn có thể dùng thử trên ứng dụng mẫu Fugu Journal và xem cách triển khai trình chạy dịch vụ trong mã nguồn của ứng dụng.
Một việc phổ biến bạn có thể làm là giữ lại các tài nguyên dùng chung cho đến khi có kết nối mạng tốt hơn. Workbox cũng hỗ trợ tính năng đồng bộ hoá định kỳ ở chế độ nền.
Kết luận
Share Target API là một cách đơn giản để tích hợp sâu Ứng dụng web tiến bộ của bạn vào thiết bị của người dùng, giúp ứng dụng này ngang hàng với các ứng dụng dành riêng cho nền tảng cho nhiệm vụ quan trọng là chia sẻ nội dung giữa các ứng dụng. Tuy nhiên, việc này thường đòi hỏi phải có máy chủ để nhận yêu cầu. Bằng cách tận dụng Workbox để tạo tuyến mục tiêu chia sẻ ngay trong trình chạy dịch vụ, ứng dụng của bạn sẽ thoát khỏi hạn chế này, cho phép tính năng Chia sẻ mục tiêu hoạt động trên các ứng dụng khi không có kết nối mạng mà không có phần phụ trợ.
Ảnh của Elaine Casap trên Unsplash