Web Share API

Khái niệm và cách dùng

Web Share API cho phép một site chia sẻ văn bản, liên kết, tệp và các nội dung khác tới các đích chia sẻ do người dùng chọn, tận dụng cơ chế chia sẻ của hệ điều hành nền tảng. Các đích chia sẻ này thường bao gồm clipboard của hệ thống, email, danh bạ hoặc ứng dụng nhắn tin, và các kênh Bluetooth hoặc Wi‑Fi.

API chỉ có hai phương thức. Phương thức navigator.canShare() có thể được dùng trước để xác thực xem một số dữ liệu có thể "chia sẻ" hay không, trước khi truyền nó vào navigator.share() để gửi.

Phương thức navigator.share() gọi cơ chế chia sẻ gốc của hệ điều hành nền tảng và truyền dữ liệu đã chỉ định. Nó yêu cầu transient activation, vì vậy phải được kích hoạt từ một sự kiện giao diện người dùng như nhấp nút. Hơn nữa, phương thức phải chỉ định dữ liệu hợp lệ và được triển khai gốc hỗ trợ cho việc chia sẻ.

Web Share API được kiểm soát bởi web-share Permissions Policy. Nếu chính sách được hỗ trợ nhưng chưa được cấp, cả hai phương thức sẽ báo rằng dữ liệu không thể chia sẻ.

Giao diện

Mở rộng các giao diện khác

navigator.canShare()

Trả về một giá trị boolean cho biết dữ liệu đã chỉ định có thể chia sẻ hay không.

navigator.share()

Trả về một Promise sẽ được giải quyết nếu dữ liệu đã truyền được gửi thành công tới một đích chia sẻ. Phương thức này phải được gọi khi nhấp nút hoặc một kích hoạt người dùng khác (yêu cầu transient activation).

Ví dụ

Đoạn mã dưới đây cho thấy cách bạn có thể chia sẻ một liên kết bằng navigator.share(), được kích hoạt từ một lần nhấp nút.

const shareData = {
  title: "MDN",
  text: "Học phát triển web trên MDN!",
  url: "https://mdn.go-mizu.dev",
};

const btn = document.querySelector("button");
const resultPara = document.querySelector(".result");

// Việc chia sẻ phải được kích hoạt bởi "user activation"
btn.addEventListener("click", async () => {
  try {
    await navigator.share(shareData);
    resultPara.textContent = "MDN shared successfully";
  } catch (err) {
    resultPara.textContent = `Error: ${err}`;
  }
});

Ví dụ trên được lấy từ Web share test của chúng tôi (xem mã nguồn). Bạn cũng có thể xem nó như một ví dụ trực tiếp trong navigator.share().

Thông số kỹ thuật

Tương thích trình duyệt

api.Navigator.share

api.Navigator.canShare

Xem thêm

• Web Share Target API