Trang này được dịch bởi Cloud Translation API.

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

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

Joe Medley

Với API Chia sẻ web, các ứng dụng web có thể sử dụng cùng một lượt chia sẻ do hệ thống cung cấp dưới dạng các ứng dụng dành riêng cho nền tảng. API Chia sẻ web giúp các ứng dụng web có thể 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 cùng một thiết bị dưới dạng ứng dụng dành riêng cho nền tảng.

Bộ chọn mục tiêu chia sẻ ở cấp hệ thống có tuỳ chọn một ứng dụng web tiến bộ (PWA) đã cài đặt.

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

Tính năng chia sẻ trên web có các khả năng và giới hạn sau:

Bạn chỉ có thể sử dụng mã này trên trang web được truy cập qua HTTPS.
Nếu hoạt động 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.
Phương thức này phải được gọi để phản hồi một hành động của người dùng, chẳng hạn như lượt nhấp. Đang gọi thông qua trình xử lý onload là không thể.
Ứng dụng này có thể chia sẻ URL, văn bản hoặc tệp.

Hỗ trợ trình duyệt

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(), phương thức này dựa trên lời hứa với đối tượng thuộc tính bắt buộc. Để ngăn trình duyệt gửi TypeError, thì đối tượng phải chứa ít nhất một trong số các thuộc tính sau: title, text, url hoặc files. Bạn có thể chia sẻ văn bản mà không cần URL hoặc ngược lại. Cho phép cả ba thành viên giúp tăng tính linh hoạt cho 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à tệp, 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 URL chính tắc thay vì URL hiện tại. Thay vì chia sẻ document.location.href, bạn sẽ kiểm tra xem có thẻ <meta> của URL chính tắc trong <head> của trang và chia sẻ thông tin đó. Việc này sẽ mang lại trải nghiệm tốt hơn cho người dùng. Cách này không chỉ tránh được lệnh chuyển hướng mà còn đảm bảo rằng một URL được chia sẻ sẽ phân phát trải nghiệm người dùng phù hợp cho một khách hàng cụ thể. Ví dụ: nếu một người bạn chia sẻ URL dành cho thiết bị di động và bạn xem URL đó trên máy tính để bàn, 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 đó bao gồm một mảng tệp trong 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 tra navigator.canShare() thay vì cho navigator.share(). Đối tượng dữ liệu được truyền đến canShare() chỉ hỗ trợ thuộc tính files. Có thể chia sẻ một số loại tệp âm thanh, hình ảnh, pdf, video và văn bản. Xem Các đuôi tệp được phép trong Chromium để xem danh sách đầy đủ. Chúng tôi có thể sẽ thêm các loại tệp khác trong tương lai.

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

Cách kích hoạt thao tác chia sẻ từ bên trong iframe của bên thứ ba: nhúng iframe bằng thuộc tính allow có giá trị 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 bạn không cung cấp thuộc tính này, thì NotAllowedError sẽ kèm theo thông báo Failed to execute 'share' on 'Navigator': Permission denied

Nghiên cứu điển hình về công cụ Theo chân ông già Noel

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

theo chân ông già Noel, một dự án nguồn mở, là truyền thống ngày lễ tại Google. Bạn có thể ăn mừng mùa lễ vào tháng 12 hằng năm với các trò chơi và trải nghiệm giáo dục.

Vào năm 2016, nhóm Theo chân ông già Noel sử dụng API Chia sẻ web trên Android. API này hoàn hảo cho thiết bị di động. Trong những năm trước, công ty đã gỡ bỏ các nút chia sẻ trên thiết bị di động vì không gian ở mức cao, nhưng họ không thể chứng minh rằng mình có một vài mục tiêu chia sẻ.

Tuy nhiên, nhờ Web Share API, họ đã có thể trình bày một nút, lưu các điểm ảnh quý giá. Họ cũng nhận thấy rằng người dùng chia sẻ qua tính năng Chia sẻ trên web nhiều hơn khoảng 20% so với người dùng chưa bật API. Đi đến Theo chân ông già Noel để xem cách tính năng Chia sẻ trên web hoạt động.

Hỗ trợ trình duyệt

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

Dưới đây là bản phác thảo sơ bộ về các hỗ trợ cho 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

Nguồn

navigator.share()

Hỗ trợ trình duyệt

Nguồn

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

Bạn có định dùng API Chia sẻ web không? Sự hỗ trợ công khai của bạn giúp ích cho 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 đó.

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

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

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

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

Chia sẻ tệp

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

Nghiên cứu điển hình về công cụ Theo chân ông già Noel

Hỗ trợ trình duyệt

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

Liên kết Hữu ích