Tích hợp PWA vào giao diện người dùng chia sẻ tích hợp sẵn bằng Workbox

Cách để PWA của bạn 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

Jeff Posnick
Joe Medley
Joe Medley
GitHub
Sam Richard

Web Share Target API cho phép bạn hiển thị Ứng dụng web tiến bộ trong bảng 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ù hoạt động rất hiệu quả nếu bạn có một máy chủ để nhận yêu cầu, nhưng sẽ khó khăn hơn nhiều nếu bạn không có.

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ợ khi không có mạng vào các ứng dụng web) để tạo một URL mục tiêu chia sẻ hoàn toàn nằm 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 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.

Điện thoại Android đang mở ngăn "Chia sẻ qua".
Bộ chọn mục tiêu chia sẻ ở cấp hệ thống có một PWA đã cài đặt có tên là Share Target Test làm lựa chọn.

Trên cùng một trang

Nếu bạn chưa quen với cách hoạt động của Web Share Target, thì bài viết Nhận dữ liệu được chia sẻ bằng Web Share Target API sẽ cung cấp cho bạn thông tin giới thiệu chi tiết. Sau đây là phần tóm tắt nhanh.

Có hai phần để triển khai chức năng mục tiêu 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 lượt chia sẻ đến URL /share thông qua yêu cầu POST. Nội dung này được mã hoá dưới dạng biểu mẫu nhiều phần, trong đó 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"]
      }
    ]
  }
}
…

Mục tiêu chia sẻ của trình chạy dịch vụ bằng Workbox

Mặc dù thường được xử lý bằng một điểm cuối của máy chủ, nhưng bạn có thể thực hiện một thủ thuật gọn gàng cho mục tiêu chia sẻ là đăng ký một tuyến đường ngay trong trình chạy dịch vụ để xử lý yêu cầu. Nhờ đó, ứng dụng của bạn có thể là mục tiêu chia sẻ mà không cần có phần phụ trợ.

Bạn có thể 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'. Xin lưu ý rằng nó được đăng ký cho tuyến đường /share, giống như tuyến đường được liệt kê trong tệp kê khai ứng dụng web mẫu. Để phản hồi, nó sẽ gọi shareTargetHandler().

import { registerRoute } from 'workbox-routing';

registerRoute(
  '/share',
  shareTargetHandler,
  'POST'
);

Hàm shareTargetHandler() là hàm không đồng bộ và lấy sự kiện, đợi dữ liệu biểu mẫu, sau đó truy xuất các tệp đa 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 những tệp này. Bạn có thể lưu trữ chúng 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 lựa chọn khác về tệp kê khai, có thể 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 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 này.

Một việc thường thấy mà bạn có thể làm là giữ 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ợ đồ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ộ vào thiết bị của người dùng, giúp ứng dụng này ngang bằng với các ứng dụng dành riêng cho nền tảng trong nhiệm vụ quan trọng là chia sẻ nội dung giữa các ứng dụng. Nhưng để làm như vậy, bạn thường cần 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 đường đích chia sẻ ngay trong trình chạy dịch vụ, ứng dụng của bạn sẽ không bị hạn chế này, cho phép Đích 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 của Elaine Casap trên Unsplash