Ứng dụng web có thể sử dụng tính năng chia sẻ do hệ thống cung cấp giống như ứng dụng dành riêng cho nền tảng.
Với API Chia sẻ web, các ứng dụng web có thể sử dụng cùng 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 giống với 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ó những khả năng và hạn chế sau:
- URL này chỉ có thể được sử dụng trên trang web được truy cập qua HTTPS.
- Nếu quá trình chia sẻ diễn ra trong iframe của bên thứ ba, thì bạn phải sử dụng thuộc tính
allow. - Mã 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 nó 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.
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 một đố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 phần sẽ giúp tă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ã dưới đây, 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 chủ đề email, text, nội dung thư, các 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 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> của URL chính tắc trong <head> của trang và chia sẻ thẻ đó. Điều này sẽ mang lại trải nghiệm tốt hơn cho người dùng. URL này không chỉ tránh các lệnh chuyển hướng mà còn đảm bảo rằng một URL dùng chung mang lại trải nghiệm người dùng chính xác cho một ứng dụng cụ thể. Ví dụ: nếu một người bạn chia sẻ URL trên 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 thử và gọi navigator.canShare(). Sau đó, hãy đưa một mảng các 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.`);
}
Xin 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.
Xem phần 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 trong tương lai.
Chia sẻ trong iframe của bên thứ ba
Để kích hoạt hành động chia sẻ từ bên trong iframe của bên thứ ba, hãy 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 không cung cấp thuộc tính này, bạn sẽ nhận được 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ề công cụ Theo chân ông già Noel
Ông già Noel, một dự án nguồn mở, là một hoạt động truyền thống mùa lễ tại Google. Mỗi tháng 12, bạn có thể chào mừng mùa lễ này bằng các trò chơi và trải nghiệm giáo dục.
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 toàn phù hợp với thiết bị di động. Trong những năm trước, họ đã gỡ bỏ các nút chia sẻ trên thiết bị di động vì không gian ở mức quá cao 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ẻ web, họ đã có thể hiển thị một nút, tiết kiệm được các điểm ảnh 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ẻ web nhiều hơn khoảng 20% so với người dùng không bật API. Hãy truy cập vào trang Theo chân ông già Noel để xem cách hoạt động của tính năng Chia sẻ web.
Hỗ trợ trình duyệt
Khả năng hỗ trợ trình duyệt cho API Chia sẻ web có sự khác biệt lớn và bạn nên sử dụng chế độ phát hiện tính năng (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ợ.
Đây là sơ lược về việ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()navigator.share()
Hỗ trợ API
Bạn có định dùng API Chia sẻ web 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
#WebShare
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.