Cách hiển thị PWA 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
Web Share Target API (API mục tiêu chia sẻ trên web) cho phép bạn hiển thị Ứng dụng web tiến bộ trong trang chia sẻ cấp hệ thống của người dùng sau khi ứng dụng được cài đặt. Mặc dù phương thức này hoạt động rất tốt nếu bạn có 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 ứng dụng web, nhằm tạo một URL đích chia sẻ nằm hoàn toàn bên trong trình chạy dịch vụ. Điều này cho phép các trang web tĩnh và ứng dụng một trang đóng vai trò là mục tiêu chia sẻ mà không cần điểm cuối máy chủ chuyên dụng.
Trên cùng một trang
Nếu bạn chưa quen với cách hoạt động của Mục tiêu chia sẻ trên web, hãy tham khảo bài viết Nhận dữ liệu được chia sẻ bằng API Mục tiêu chia sẻ trên web để tìm hiểu chi tiết. Sau đây là thông tin tóm tắt nhanh.
Có hai phần để triển khai chức năng mục tiêu lượt chia sẻ trên 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 là mục tiêu chia sẻ khi được cài đặt. Ví dụ sau đây chuyển hướng các lượt chia sẻ đến url /share
thông qua yêu cầu POST
. Tiêu đề được gọi là name
, văn bản được gọi là description
và hình ảnh JPEG được gọi là photos
.
…
"share_target": {
"action": "/share",
"method": "POST",
"enctype": "multipart/form-data",
"params": {
"title": "name",
"text": "description",
"files": [
{
"name": "photos",
"accept": ["image/jpeg", ".jpg"]
}
]
}
}
…
Trình chạy dịch vụ chia sẻ mục tiêu với Workbox
Mặc dù thường được xử lý bằng điểm cuối của máy chủ, nhưng bạn có thể thực hiện một mẹo gọn gàng cho mục tiêu chia sẻ là đăng ký trực tiếp một tuyến trong worker dịch vụ để xử lý yêu cầu. Điều này sẽ cho phép ứng dụng của bạn trở thành mục tiêu chia sẻ mà không cần 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 đường 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'
. Lưu ý rằng lớp này được đăng ký cho tuyến /share
, giống với tuyến được liệt kê trong tệp kê khai ứng dụng web mẫu. Để phản hồi, lớp này sẽ gọi shareTargetHandler()
.
import { registerRoute } from 'workbox-routing';
registerRoute(
'/share',
shareTargetHandler,
'POST'
);
Hàm shareTargetHandler()
không đồng bộ và nhận sự kiện, chờ dữ liệu biểu mẫu, sau đó truy xuất các tệp phương tiệ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 đó vào bộ nhớ đệm. Bạn có thể gửi các tệp đó đến một nơi nào đó bằng một 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ể là phân phát một trang có một số tham số truy vấn cho các mục dùng chung khác hoặc lưu trữ dữ liệu và con trỏ đến nội dung nghe nhìn trong API Kho lưu trữ bộ nhớ đệm 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 worker dịch vụ trong mã nguồn.
Một việc phổ biến mà 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
API Mục tiêu chia sẻ là một cách đơn giản để tích hợp sâu Ứng dụng web tiến bộ vào thiết bị của người dùng, đưa ứng dụng này ngang hàng với các ứng dụng dành riêng cho nền tảng để thực hiện nhiệm vụ quan trọng là chia sẻ nội dung giữa các ứng dụng. Tuy nhiên, để làm như vậy, bạn thường phải có một máy chủ để nhận yêu cầu. Bằng cách tận dụng Workbox để tạo một tuyến đích chia sẻ trực tiếp trong trình chạy dịch vụ, ứng dụng của bạn sẽ không bị ràng buộc này, cho phép Mục tiêu chia sẻ hoạt động cho các ứng dụng khi không có mạng và không có phần phụ trợ.
Ảnh chụp của Elaine Casap trên Unsplash