Nhận dữ liệu được chia sẻ bằng API mục tiêu chia sẻ web

Dễ dàng chia sẻ trên thiết bị di động và máy tính nhờ Web Share Target API

Pete LePage
Joe Medley
Joe Medley
GitHub

Trên thiết bị di động hoặc máy tính, việc chia sẻ phải đơn giản như việc nhấp vào nút Chia sẻ, chọn ứng dụng và chọn người bạn muốn chia sẻ. Ví dụ: có thể bạn muốn chia sẻ một bài viết thú vị bằng cách gửi qua email cho bạn bè hoặc tweet bài viết đó cho mọi người.

Trước đây, chỉ những ứng dụng dành riêng cho nền tảng mới có thể đăng ký với hệ điều hành để nhận lượt chia sẻ từ các ứng dụng đã cài đặt khác. Tuy nhiên, với Web Share Target API, các ứng dụng web đã cài đặt có thể đăng ký với hệ điều hành cơ bản làm mục tiêu chia sẻ để nhận nội dung được chia sẻ.

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

Xem cách hoạt động của Mục tiêu chia sẻ web

  1. Sử dụng Chrome 76 trở lên cho Android hoặc Chrome 89 trở lên trên máy tính, hãy mở bản minh hoạ Mục tiêu chia sẻ web.
  2. Khi được nhắc, hãy nhấp vào Install (Cài đặt) để thêm ứng dụng vào màn hình chính hoặc sử dụng trình đơn Chrome để thêm ứng dụng vào màn hình chính.
  3. Mở bất kỳ ứng dụng nào hỗ trợ tính năng chia sẻ hoặc dùng nút Chia sẻ trong ứng dụng minh hoạ.
  4. Trên bộ chọn mục tiêu, hãy chọn Kiểm thử Chia sẻ web.

Sau khi chia sẻ, bạn sẽ thấy tất cả thông tin được chia sẻ trong ứng dụng web đích chia sẻ trên web.

Đăng ký ứng dụng của bạn làm mục tiêu chia sẻ

Để đăng ký ứng dụng của bạn làm mục tiêu chia sẻ, ứng dụng đó cần đáp ứng tiêu chí của Chrome về khả năng cài đặt. Ngoài ra, để người dùng có thể chia sẻ với ứng dụng của bạn, họ phải thêm ứng dụng đó vào màn hình chính. Điều này ngăn các trang web tự thêm chính mình vào trình chọn ý định chia sẻ của người dùng và đảm bảo rằng người dùng muốn thực hiện việc chia sẻ với ứng dụng của bạn.

Cập nhật tệp kê khai ứng dụng web

Để đăng ký ứng dụng của bạn làm mục tiêu chia sẻ, hãy thêm mục share_target vào tệp kê khai ứng dụng web của ứng dụng đó. Điều này yêu cầu hệ điều hành đưa ứng dụng của bạn vào dưới dạng một tuỳ chọn trong trình chọn ý định. Nội dung bạn thêm vào tệp kê khai sẽ kiểm soát dữ liệu mà ứng dụng của bạn sẽ chấp nhận. Dưới đây là 3 trường hợp phổ biến cho mục nhập share_target:

  • Chấp nhận thông tin cơ bản
  • Đang chấp nhận thay đổi đối với đơn đăng ký
  • Chấp nhận tệp

Chấp nhận thông tin cơ bản

Nếu ứng dụng mục tiêu chỉ chấp nhận thông tin cơ bản như dữ liệu, đường liên kết và văn bản, hãy thêm nội dung sau vào tệp manifest.json:

"share_target": {
  "action": "/share-target/",
  "method": "GET",
  "params": {
    "title": "title",
    "text": "text",
    "url": "url"
  }
}

Nếu ứng dụng của bạn đã có một lược đồ URL dùng chung, bạn có thể thay thế các giá trị params bằng tham số truy vấn hiện có. Ví dụ: nếu giao thức URL chia sẻ sử dụng body thay vì text, thì bạn có thể thay thế "text": "text" bằng "text": "body".

Giá trị method mặc định là "GET" nếu không được cung cấp. Trường enctype không xuất hiện trong ví dụ này cho biết loại mã hoá dữ liệu. Đối với phương thức "GET", enctype mặc định là "application/x-www-form-urlencoded" và sẽ bị bỏ qua nếu bạn đặt chính sách này thành bất kỳ giá trị nào khác.

Đang chấp nhận thay đổi đối với đơn đăng ký

Nếu dữ liệu được chia sẻ thay đổi ứng dụng mục tiêu theo cách nào đó (ví dụ: lưu dấu trang trong ứng dụng mục tiêu), hãy đặt giá trị method thành "POST" và thêm trường enctype. Ví dụ bên dưới sẽ tạo một dấu trang trong ứng dụng đích, vì vậy, nó sẽ sử dụng "POST" cho method và "multipart/form-data" cho enctype:

{
  "name": "Bookmark",
  "share_target": {
    "action": "/bookmark",
    "method": "POST",
    "enctype": "multipart/form-data",
    "params": {
      "url": "link"
    }
  }
}

Chấp nhận tệp

Tương tự như các thay đổi đối với ứng dụng, việc chấp nhận tệp yêu cầu method phải là "POST" và enctype phải có mặt. Ngoài ra, enctype phải là "multipart/form-data" và phải thêm một mục files.

Bạn cũng phải thêm một mảng files xác định các loại tệp mà ứng dụng chấp nhận. Các phần tử mảng là các mục nhập có hai thành phần: trường name và trường accept. Trường accept nhận một loại MIME, đuôi tệp hoặc một mảng chứa cả hai. Tốt nhất là bạn nên cung cấp một mảng chứa cả loại MIME và đuôi tệp vì các hệ điều hành khác nhau theo ý muốn.

{
  "name": "Aggregator",
  "share_target": {
    "action": "/cgi-bin/aggregate",
    "method": "POST",
    "enctype": "multipart/form-data",
    "params": {
      "title": "name",
      "text": "description",
      "url": "link",
      "files": [
        {
          "name": "records",
          "accept": ["text/csv", ".csv"]
        },
        {
          "name": "graphs",
          "accept": "image/svg+xml"
        }
      ]
    }
  }
}

Xử lý nội dung đến

Cách bạn xử lý dữ liệu được chia sẻ đến là tuỳ thuộc vào bạn và phụ thuộc vào ứng dụng của bạn. Ví dụ:

  • Ứng dụng email có thể soạn email mới bằng cách sử dụng title làm chủ đề của email, trong đó text và url là phần nội dung chính.
  • Một ứng dụng mạng xã hội có thể soạn thảo một bài đăng mới bỏ qua title, sử dụng text làm nội dung thư và thêm url làm đường liên kết. Nếu thiếu text, ứng dụng cũng có thể sử dụng url trong phần nội dung. Nếu thiếu url, ứng dụng có thể quét text để tìm một URL và thêm URL đó dưới dạng đường liên kết.
  • Một ứng dụng chia sẻ ảnh có thể tạo một bản trình chiếu mới bằng cách sử dụng title làm tiêu đề cho cách trình chiếu, text làm nội dung mô tả và files làm hình ảnh trình chiếu.
  • Ứng dụng nhắn tin văn bản có thể soạn tin nhắn mới bằng cách sử dụng text và url nối với nhau và thả title.

Đang xử lý lượt chia sẻ GET

Nếu người dùng chọn ứng dụng của bạn và method của bạn là "GET" (mặc định), thì trình duyệt sẽ mở một cửa sổ mới tại URL action. Sau đó, trình duyệt sẽ tạo một chuỗi truy vấn bằng cách sử dụng các giá trị mã hoá URL đã cung cấp trong tệp kê khai. Ví dụ: nếu ứng dụng chia sẻ cung cấp title và text, thì chuỗi truy vấn sẽ là ?title=hello&text=world. Để xử lý trường hợp này, hãy sử dụng trình nghe sự kiện DOMContentLoaded ở trang nền trước và phân tích cú pháp chuỗi truy vấn:

window.addEventListener('DOMContentLoaded', () => {
  const parsedUrl = new URL(window.location);
  // searchParams.get() will properly handle decoding the values.
  console.log('Title shared: ' + parsedUrl.searchParams.get('title'));
  console.log('Text shared: ' + parsedUrl.searchParams.get('text'));
  console.log('URL shared: ' + parsedUrl.searchParams.get('url'));
});

Hãy nhớ sử dụng trình chạy dịch vụ để lưu trước vào bộ nhớ đệm trang action để trang này tải nhanh và hoạt động ổn định, ngay cả khi người dùng không kết nối mạng. Workbox là công cụ giúp bạn triển khai quá trình lưu trước vào bộ nhớ đệm trong trình chạy dịch vụ.

Đang xử lý lượt chia sẻ POST

Nếu method của bạn là "POST", như sẽ là nếu ứng dụng đích chấp nhận dấu trang đã lưu hoặc tệp được chia sẻ, thì phần nội dung của yêu cầu POST đến sẽ chứa dữ liệu mà ứng dụng chia sẻ truyền, được mã hoá bằng giá trị enctype được cung cấp trong tệp kê khai.

Trang nền trước không thể xử lý trực tiếp dữ liệu này. Vì trang xem dữ liệu dưới dạng một yêu cầu, nên trang sẽ chuyển dữ liệu đó đến trình chạy dịch vụ, tại đó bạn có thể chặn dữ liệu bằng trình nghe sự kiện fetch. Từ đây, bạn có thể chuyển dữ liệu trở lại trang nền trước bằng cách sử dụng postMessage() hoặc truyền dữ liệu đó đến máy chủ:

self.addEventListener('fetch', event => {
  const url = new URL(event.request.url);
  // If this is an incoming POST request for the
  // registered "action" URL, respond to it.
  if (event.request.method === 'POST' &&
      url.pathname === '/bookmark') {
    event.respondWith((async () => {
      const formData = await event.request.formData();
      const link = formData.get('link') || '';
      const responseUrl = await saveBookmark(link);
      return Response.redirect(responseUrl, 303);
    })());
  }
});

Xác minh nội dung được chia sẻ

Chiếc điện thoại Android cho thấy ứng dụng minh hoạ có nội dung được chia sẻ.
Ứng dụng đích chia sẻ mẫu.

Hãy nhớ xác minh dữ liệu nhận được. Thật không may, không có gì đảm bảo rằng các ứng dụng khác sẽ chia sẻ nội dung phù hợp trong đúng tham số.

Ví dụ: trên Android, trường url sẽ trống vì trường này không được hỗ trợ trong hệ thống chia sẻ của Android. Thay vào đó, URL sẽ thường xuất hiện trong trường text hoặc đôi khi trong trường title.

Hỗ trợ trình duyệt

Web Share Target API được hỗ trợ như mô tả dưới đây:

Trên tất cả các nền tảng, ứng dụng web của bạn phải được cài đặt thì mới có thể xuất hiện dưới dạng mục tiêu tiềm năng để nhận dữ liệu được chia sẻ.

Ứng dụng mẫu

Hỗ trợ API

Bạn có định sử dụng Web Share Target API không? Sự hỗ trợ công khai của bạn giúp nhóm Chromium ưu tiên các tính năng và cho các nhà cung cấp trình duyệt khác biết tầm quan trọng của việc hỗ trợ các tính năng đó.

Hãy gửi một bài đăng trên Twitter tới @ChromiumDev kèm theo hashtag #WebShareTarget và cho chúng tôi biết vị trí cũng như cách bạn sử dụng bài đăng này.