Web Share API

安全上下文： 此功能僅在安全上下文（HTTPS）中可用，且支援此功能的瀏覽器數量有限。

Web Share API 提供了一種機制，用於將文字、連結、檔案和其他內容共享給使用者選擇的任意共享目標。

注意： 此 API 在 Web Workers 中不可用（未透過 WorkerNavigator 暴露）。

注意：此 API 不應與 Web Share Target API 混淆，後者允許網站將自身指定為共享目標。

概念與用法

Web Share API 允許網站透過利用底層作業系統的共享機制，將文字、連結、檔案和其他內容共享給使用者選擇的共享目標。這些共享目標通常包括系統剪貼簿、電子郵件、聯絡人或訊息應用程式，以及藍牙或 Wi-Fi 通道。

該 API 只有兩個方法。在將資料傳遞給 navigator.share() 進行傳送之前，可以使用 navigator.canShare() 方法來驗證資料是否“可共享”。

navigator.share() 方法會呼叫底層作業系統的原生共享機制並傳遞指定的資料。它需要瞬時啟用，因此必須透過 UI 事件（如按鈕點選）觸發。此外，該方法必須指定原生實現支援共享的有效資料。

Web Share API 受 web-share 許可權策略的限制。如果支援該策略但未授予許可權，兩個方法都會指示資料不可共享。

介面

其他介面的擴充套件

navigator.canShare(): 返回一個布林值，指示指定的資料是否可共享。
navigator.share(): 返回一個 Promise，如果傳遞的資料已成功傳送到共享目標，則該 Promise 會解析。此方法必須在按鈕點選或其他使用者啟用時呼叫（需要瞬時啟用）。

示例

以下程式碼顯示瞭如何使用 navigator.share() 共享一個連結，該連結由按鈕點選觸發。

const shareData = {
  title: "MDN",
  text: "Learn web development on MDN!",
  url: "https://mdn.club.tw",
};

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

// Share must be triggered by "user activation"
btn.addEventListener("click", async () => {
  try {
    await navigator.share(shareData);
    resultPara.textContent = "MDN shared successfully";
  } catch (err) {
    resultPara.textContent = `Error: ${err}`;
  }
});

上面的示例取自我們的 Web share test（檢視原始碼）。您也可以在 navigator.share() 中看到此示例的即時版本。