Ứng dụng web có thể sử dụng cùng một chức năng chia sẻ do hệ thống cung cấp như ứng dụng dành riêng cho nền tảng.
Với Web Share API, 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 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 thiết bị theo cách tương tự như các ứng dụng dành riêng cho nền tảng.
Khả năng và giới hạn
Tính năng chia sẻ trên web có các chức năng và hạn chế sau:
- Bạn chỉ có thể sử dụng tính năng này trên một trang web được truy cập qua HTTPS.
- Nếu việc chia sẻ diễn ra trong một iframe của bên thứ ba, thì 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ư một lượt nhấp. Không thể gọi lệnh này thông qua trình xử lý
onload. - Ứng dụng này có thể chia sẻ URL, văn bản hoặc tệp.
Đang 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ần URL hoặc ngược lại. Việc cho phép cả ba thành viên sẽ giúp mở rộng tính 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 trở thành nội dung thư và các tệp trở thành 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 nên kiểm tra thẻ URL chính tắc <meta> trong phần <head> của trang rồi chia sẻ URL đó. Điều 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ỉ giúp tránh chuyển hướng mà còn đảm bảo rằng URL được chia sẻ sẽ mang lại trải nghiệm người dùng chính xác cho một ứng dụng khách 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, thì 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 tra 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.
Xem Phần đuôi tệp được cho phép trong Chromium để biết danh sách đầy đủ. Chúng tôi có thể bổ sung thêm các loại tệp khác 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 một 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>
Nghiên cứu điển hình về Theo chân ông già Noel
Theo chân ông già Noel, một dự án nguồn mở, là một truyền thống ngày lễ tại Google. Tháng 12 hằng năm, bạn có thể đón mùa lễ hội bằng các trò chơi và trải nghiệm mang tính giáo dục.
Vào năm 2016, nhóm Theo chân ông già Noel đã sử dụng Web Share API trên Android. API này rất phù hợp 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ể giải thích được lý do có nhiều mục tiêu chia sẻ.
Nhưng nhờ có Web Share API, họ có thể hiển thị một nút, tiết kiệm được nhiều pixel quý giá. Họ cũng nhận thấy rằng người dùng chia sẻ bằng Web Share nhiều hơn khoảng 20% so với 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 cách hoạt động của Web Share.
Hỗ trợ trình duyệt
Hỗ trợ trình duyệt cho API Chia sẻ web có nhiều sắc thái và bạn nên sử dụng tính năng phát hiện (như mô tả trong các mã mẫu 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 tóm tắt về khả năng hỗ trợ tính năng này. Để biết thông tin chi tiết, hãy truy cập vào một trong hai đường liên kết đến trang ủng hộ.
navigator.canShare()navigator.share()
Thể hiện sự ủng hộ đối với API
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 tính năng này ở đâu và như thế nào.