Tích hợp với giao diện người dùng chia sẻ của hệ điều hành bằng API Chia sẻ web

Ứng dụng web có thể sử dụng các tính năng chia sẻ do hệ thống cung cấp giống như các ứng dụng dành riêng cho nền tảng.

Joe Medley
Joe Medley
GitHub

Với API Chia sẻ trên web, các ứng dụng web có thể sử dụng cùng một tính năng chia sẻ do hệ thống cung cấp như các ứng dụng dành riêng cho nền tảng. Web Share API cho phép các ứng dụng web chia sẻ đường liên kết, văn bản và tệp với các ứng dụng khác được cài đặt trên thiết bị theo cách tương tự như các ứng dụng dành riêng cho nền tảng.

Trình chọn mục tiêu chia sẻ ở cấp hệ thống, trong đó có một PWA đã cài đặt.
Bộ chọn mục tiêu chia sẻ cấp hệ thống có một PWA đã cài đặt dưới dạng tuỳ chọn.

Khả năng và giới hạn

Tính năng chia sẻ trên web có các tính năng và hạn chế sau:

  • Bạn chỉ có thể sử dụng mã này trên trang web được truy cập qua HTTPS.
  • Nếu lượt chia sẻ diễn ra trong iframe của bên thứ ba, bạn phải sử dụng thuộc tính allow.
  • Bạn phải gọi phương thức này để phản hồi một hành động của người dùng, chẳng hạn như một lượt nhấp. Không thể gọi phương thức này thông qua trình xử lý onload.
  • Tin nhắn có thể chia sẻ URL, văn bản hoặc tệp.

Hỗ trợ trình duyệt

  • Chrome: 89.
  • Edge: 93.
  • Firefox: phía sau một cờ.
  • Safari: 12.1.

Nguồn

Chia sẻ đường liên kết và văn bản

Để chia sẻ đường liên kết và văn bản, hãy sử dụng phương thức share(). Đây là một phương thức dựa trên lời hứa với đối tượng thuộc tính bắt buộc. Để trình duyệt không gửi TypeError, đối tượng phải chứa ít nhất một trong các thuộc tính sau: title, text, url hoặc files. Ví dụ: bạn có thể chia sẻ văn bản mà không có URL hoặc ngược lại. Việc cho phép cả ba thành viên sẽ mở rộng phạm vi linh hoạt của các trường hợp sử dụng. Hãy tưởng tượng nếu sau khi chạy mã bên dưới, người dùng chọn một ứng dụng email làm mục tiêu. Tham số title có thể trở thành tiêu đề email, text, nội dung thư và các tệp và tệp đính kèm.

if (navigator.share) {
  navigator.share({
    title: 'web.dev',
    text: 'Check out web.dev.',
    url: 'https://web.dev/',
  })
    .then(() => console.log('Successful share'))
    .catch((error) => console.log('Error sharing', error));
}

Nếu trang web của bạn có nhiều URL cho cùng một nội dung, hãy chia sẻ URL chính tắc của trang thay vì URL hiện tại. Thay vì chia sẻ document.location.href, bạn sẽ kiểm tra thẻ <meta> URL chính tắc trong <head> của trang rồi chia sẻ thẻ đó. Điều này sẽ mang lại trải nghiệm tốt hơn cho người dùng. Không chỉ tránh được lệnh chuyển hướng, mà còn đảm bảo rằng URL dùng chung sẽ phân phát đúng trải nghiệm người dùng cho một ứng dụng cụ thể. Ví dụ: nếu một người bạn chia sẻ một URL dành cho thiết bị di động và bạn xem URL đó trên máy tính, bạn sẽ thấy phiên bản dành cho máy tính:

let url = document.location.href;
const canonicalElement = document.querySelector('link[rel=canonical]');
if (canonicalElement !== null) {
    url = canonicalElement.href;
}
navigator.share({url});

Chia sẻ tệp

Để chia sẻ tệp, trước tiên hãy kiểm tra và gọi navigator.canShare(). Sau đó, hãy thêm một mảng tệp vào lệnh gọi đến navigator.share():

if (navigator.canShare && navigator.canShare({ files: filesArray })) {
  navigator.share({
    files: filesArray,
    title: 'Vacation Pictures',
    text: 'Photos from September 27 to October 14.',
  })
  .then(() => console.log('Share was successful.'))
  .catch((error) => console.log('Sharing failed', error));
} else {
  console.log(`Your system doesn't support sharing files.`);
}

Lưu ý rằng mẫu này xử lý việc phát hiện tính năng bằng cách kiểm thử cho navigator.canShare() thay vì navigator.share(). Đối tượng dữ liệu được truyền đến canShare() chỉ hỗ trợ thuộc tính files. Bạn có thể chia sẻ một số loại tệp âm thanh, hình ảnh, pdf, video và văn bản. Hãy xem bài viết Các đuôi tệp được phép trong Chromium để biết danh sách đầy đủ. Các loại tệp khác có thể được thêm vào trong tương lai.

Chia sẻ trong iframe của bên thứ ba

Để kích hoạt hành động chia sẻ từ trong iframe của bên thứ ba, hãy nhúng iframe có thuộc tính allow với giá trị là web-share:

<!-- On https://example.com/index.html -->
<iframe allow="web-share" src="https://third-party.example.com/iframe.html"></iframe>

Bạn có thể xem ví dụ thực tế trong bản minh hoạ trên Glitch và xem mã nguồn. Nếu không cung cấp thuộc tính này, bạn sẽ thấy NotAllowedError kèm theo thông báo Failed to execute 'share' on 'Navigator': Permission denied.

Nghiên cứu điển hình về Santa Tracker

Ứng dụng Theo chân ông già Noel cho thấy nút chia sẻ.
Nút chia sẻ của ứng dụng Theo chân ông già Noel.

Santa Tracker, một dự án nguồn mở, là một truyền thống trong mùa lễ tại Google. Mỗi tháng 12, bạn có thể ăn mừng mùa lễ bằng các trò chơi và trải nghiệm giáo dục.

Năm 2016, nhóm Santa Tracker đã sử dụng Web Share API trên Android. API này phù hợp hoàn hảo với thiết bị di động. Trong những năm trước, nhóm đã xoá các nút chia sẻ trên thiết bị di động vì không gian rất hạn chế và họ không thể biện minh cho việc có nhiều mục tiêu chia sẻ.

Nhưng với API Chia sẻ trên web, họ có thể hiển thị một nút, giúp tiết kiệm các pixel quý giá. Họ cũng nhận thấy rằng số người dùng chia sẻ bằng tính năng Chia sẻ trên web cao hơn khoảng 20% so với số người dùng không bật API này. Hãy truy cập vào Theo chân ông già Noel để xem tính năng Chia sẻ trên web hoạt động như thế nào.

Hỗ trợ trình duyệt

Hỗ trợ trình duyệt cho API Chia sẻ trên web rất tinh tế và bạn nên sử dụng tính năng phát hiện tính năng (như mô tả trong các mẫu mã trước đó) thay vì giả định rằng một phương thức cụ thể được hỗ trợ.

Dưới đây là thông tin sơ lược về việc hỗ trợ tính năng này. Để biết thông tin chi tiết, hãy nhấp vào một trong các đường liên kết hỗ trợ.

navigator.canShare()

Hỗ trợ trình duyệt

  • Chrome: 89.
  • Edge: 93.
  • Firefox: phía sau một cờ.
  • Safari: 14.

Nguồn

navigator.share()

Hỗ trợ trình duyệt

  • Chrome: 89.
  • Edge: 93.
  • Firefox: phía sau một lá cờ.
  • Safari: 12.1.

Nguồn

Hiện thông tin hỗ trợ về API này

Bạn có dự định sử dụng Web Share API không? Sự ủng hộ 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 thấy tầm quan trọng của việc hỗ trợ các tính năng đó.

Gửi một tweet đến @ChromiumDev bằng hashtag #WebShare và cho chúng tôi biết bạn đang sử dụng ở đâu và như thế nào.