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 giúp PWA của bạn xuất hiện bên cạnh các ứng dụng dành riêng cho từng 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ẻ web) cho phép bạn hiển thị Ứng dụng web tiến bộ của bạn trong một trang chia sẻ ở cấp hệ thống của người dùng sau khi cài đặt. Mặc dù nó hoạt động tốt nếu bạn có một máy chủ sẵn sàng nhận yêu cầu, sẽ khó thực hiện hơn nhiều nếu bạn không làm như vậy.

Trong bài viết này, chúng tôi sẽ sử dụng Workbox (Hộp làm việc), một tập hợp JavaScript để thêm tính năng hỗ trợ ngoại tuyến vào các ứng dụng web, để tạo URL đích chia sẻ hoàn toàn hoạt động bên trong service worker của bạn. Việc này cho phép trang web tĩnh và các ứng dụng trang đơn đó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 có nút "Chia sẻ qua" mở ngăn.
Bộ chọn đích chia sẻ ở cấp hệ thống với một ứng dụng web tiến bộ (PWA) đã cài đặt có tên là Share Target Test làm tuỳ chọn.

Trên cùng một trang

Nếu bạn chưa hiểu rõ cách hoạt động của tính năng 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 tính năng Chia sẻ trên web API mục tiêu sẽ cung cấp cho bạn phần giới thiệu chuyên sâu. Sau đây là thông tin tóm tắt ngắn gọn.

Có hai phần để triển khai chức năng đích chia sẻ web. Đầu tiên, 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 được chia sẻ đích khi cài đặt. Ví dụ sau đây chuyển hướng các lượt chia sẻ đến URL /share thông qua một yêu cầu POST. Mã này được mã hoá dưới dạng nhiều phần, với tiêu đề được gọi là name, văn bản sẽ được gọi là description và hình ảnh JPEG sẽ đượ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 điểm cuối máy chủ xử lý, nhưng bạn có thể thực hiện một thủ thuật đơn giản để chia sẻ mục tiêu là đăng ký tuyến trực tiếp trong trình chạy dịch vụ của bạn để xử lý của bạn. Điều này sẽ cho phép ứng dụng của bạn trở thành mục tiêu dùng chung mà không cần phần phụ trợ.

Bạn thực hiện việc này trong Hộp công việc bằng cách đăng ký 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'. Lưu ý rằng miền này đã được đăng ký với Tuyến /share, cũng là tuyến được liệt kê trong tệp kê khai ứng dụng web mẫu. Trong phản hồi mà nó gọi là shareTargetHandler().

import { registerRoute } from 'workbox-routing';

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

Hàm shareTargetHandler() không đồng bộ và nhận sự kiện này, đang 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 bản ghi đó vào bộ nhớ đệm. Bạn có thể gửi chúng đến một nơi nào đó cùng với yêu cầu tìm nạp. Bạn thậm chí có thể sử dụng trong tệp kê khai, có thể phân phát một trang với một số tham số truy vấn cho các mục được chia sẻ hoặc lưu trữ dữ liệu và con trỏ tới phương tiện trong Bộ nhớ bộ nhớ đệm API hoặc IndexedDB.

Bạn có thể dùng thử trên ứng dụng mẫu Fugu Ghi nhật ký và xem trình chạy dịch vụ của nhật ký trong nguồn .

Một điều phổ biến bạn có thể làm là giữ tài nguyên được chia sẻ cho đến khi mạng tốt hơn kết nối đều có sẵn. Workbox cũng hỗ trợ nền định kỳ đồng bộ hoá.

Kết luận

Share Target API là một cách đơn giản để tích hợp sâu Progressive Web của bạn Ứng dụng vào thiết bị của người dùng, đặt chúng ngang hàng với các ứng dụng dành riêng cho nền tảng dành cho 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 thường đòi hỏi máy chủ hiện có để nhận yêu cầu. Bằng cách tận dụng Workbox để tạo lượt chia sẻ nhắm mục tiêu tuyến đường trực tiếp trong trình chạy dịch vụ của bạn, ứng dụng của bạn không có tuyến đường này ràng buộc, cho phép Share Target hoạt động với ứng dụng khi không có mạng chương trình phụ trợ.

Ảnh của Elaine Casap trên Unsplash