與 OS 共用 UI 與 Web Share API 整合

網頁應用程式可以使用與平台專用應用程式相同的系統共用功能。

Joe Medley
Joe Medley
GitHub

有了 Web Share API，網頁應用程式就能使用系統提供的相同共用功能 做為平台專屬應用程式Web Share API 可讓網頁應用程式 透過相同裝置，將連結、文字和檔案分享到安裝在裝置上的其他應用程式 做為平台專屬應用程式

，瞭解如何調查及移除這項存取權。
將已安裝 PWA 設為系統層級共用目標選擇工具的選項。
將已安裝 PWA 設為系統層級共用目標選擇工具的選項。

功能和限制

Web Share 具備下列功能和限制：

  • 而且只能用於透過 HTTPS 存取的網站。
  • 如果分享是在第三方 iframe 中發生，則必須使用 allow 屬性。
  • 您必須在回應使用者動作 (例如點擊) 時叫用此函式。叫用 因此無法透過 onload 處理常式進行。
  • 可分享網址、文字或檔案。

瀏覽器支援

  • Chrome：89.
  • Edge：93，
  • Firefox：位於旗幟後方。
  • Safari：12.1.

資料來源

分享連結和文字

如要分享連結和文字，請使用 share() 方法，這種做法以承諾使用 方法，其中包含必要的屬性物件。 如何防止瀏覽器擲回 TypeError： 物件必須包含至少一個 下列任一屬性：title、text、url 或 files。個人中心 例如在沒有網址的情況下分享文字，反之亦然。允許這三項 成員可擴展用途的彈性假設在執行程式碼後 下方的說明，使用者選擇電子郵件應用程式做為目標。title 參數 可能會成為電子郵件主旨、text、郵件內文和檔案， 附件。

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));
}

如果網站上有多個網址用於相同內容，請提供網頁的 標準網址，而非目前網址。不共用 document.location.href，您將檢查以下網頁是否有標準網址 <meta> 標記： 並分享該網頁的 <head>如此一來， 內容。這麼做不僅能避免重新導向，還能確保共用的網址會放送 為特定用戶端提供正確的使用者體驗舉例來說，如果好友 分享行動版網址，然後透過電腦查看 您應該會看到電腦版網頁：

let url = document.location.href;
const canonicalElement = document.querySelector('link[rel=canonical]');
if (canonicalElement !== null) {
    url = canonicalElement.href;
}
navigator.share({url});

分享檔案

如要分享檔案，請先測試並呼叫 navigator.canShare()。接著加入 呼叫 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.`);
}

請注意，這個範例會測試 navigator.canShare() 而非 navigator.share()。 傳遞至 canShare() 的資料物件僅支援 files 屬性。 您可以分享特定類型的音訊、圖片、PDF、影片和文字檔案。 請參閱「Chromium 中允許的副檔名」一文 查看完整清單日後可能會新增更多檔案類型。

在第三方 iframe 中共用

如要透過第三方 iframe 觸發共用動作，請按照下列步驟操作： 將 iframe 嵌入 allow 屬性，其值為 web-share：

<!-- On https://example.com/index.html -->
<iframe allow="web-share" src="https://third-party.example.com/iframe.html"></iframe>

請參閱 Glitch 示範，瞭解實際的運作方式 並查看原始碼。 如未提供這項屬性，將導致 NotAllowedError 和訊息 Failed to execute 'share' on 'Navigator': Permission denied。

聖誕老人追蹤器個案研究

聖誕老人追蹤器應用程式顯示分享按鈕。
聖誕老人追蹤器分享按鈕。

Santa Tracker 是一款開放原始碼專案 節慶傳統每年 12 月皆可歡慶佳節 不僅如此，還能透過遊戲和教育體驗

2016 年，聖誕老人追蹤器團隊在 Android 上使用 Web Share API。 這個 API 非常適合行動裝置。 去年，由於太空 但無法合理達成多個共用目標。

但有了 Web Share API 就能夠將一個按鈕 儲存寶貴的像素 他們還發現，透過網路分享功能分享的使用者， 。前往 聖誕老人追蹤器，瞭解 Web Share 的實際運作情形。

瀏覽器支援

Web Share API 的瀏覽器支援略為複雜，建議您使用 功能 偵測 (如之前的程式碼範例所述)，而不要假設特定的方法 支援。

以下概略說明這項功能的支援情形。如需詳細資訊，請點按任一支援連結。

navigator.canShare()

瀏覽器支援

  • Chrome：89.
  • Edge：93，
  • Firefox：位於旗幟後方。
  • Safari：14.

資料來源

navigator.share()

瀏覽器支援

  • Chrome：89.
  • Edge：93，
  • Firefox：位於旗幟後方。
  • Safari：12.1.

資料來源

顯示對 API 的支援

您是否打算使用 Web Share API？你的公開支援能協助 Chromium 團隊 優先開發功能，並向其他瀏覽器廠商說明支援這些功能的重要性。

使用主題標記將推文傳送至 @ChromiumDev #WebShare敬上 ，並說明你使用這項服務的位置和方式。