與 OS 共用 UI 與 Web Share API 整合

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

Joe Medley
Joe Medley
GitHub

有了 Web Share API，網頁應用程式就能與特定平台的應用程式一樣，使用系統提供的分享功能。透過 Web Share API，網頁應用程式可透過與特定平台應用程式相同的方式，將連結、文字和檔案分享至裝置上安裝的其他應用程式。

系統層級分享目標挑選器，其中已安裝的 PWA 為選項。
系統層級共用目標挑選器，將已安裝的 PWA 設為選項。

功能和限制

網頁分享功能具有下列功能和限制：

  • 只能用於透過 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，而是在網頁的 <head> 中檢查標準網址 <meta> 標記，然後分享該標記。這可讓使用者享有更優質的體驗。這不僅可避免重新導向，還可確保共用網址可為特定用戶端提供正確的使用者體驗。舉例來說，如果朋友分享行動版網址，而你在電腦上查看該網址，應該會看到電腦版網址：

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 中觸發分享動作，請嵌入 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 是 Google 的一項開放原始碼專案，也是 Google 的節慶傳統。每年 12 月，您都可以透過遊戲和教育體驗歡度這個季節。

2016 年，聖誕老人追蹤器團隊在 Android 上使用 Web Share API。這個 API 非常適合行動裝置。過去幾年，團隊移除了行動版的分享按鈕，因為行動裝置空間有限，無法提供多個分享目標。

但有了 Web Share API，他們就能顯示一個按鈕，節省寶貴的像素。他們也發現，使用者透過 Web Share 分享的次數，比未啟用 API 的使用者多出約 20%。前往聖誕老人追蹤器，瞭解 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 團隊將功能列為優先，並向其他瀏覽器供應商顯示，支援這些功能的重要性。

使用主題標記 #WebShare 發送推文給 @ChromiumDev，告訴我們你在何處使用這項功能，以及使用方式。