與 OS 共用 UI 與 Web Share API 整合

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

Joe Medley

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

注意： 分享只是其中一項功能。網頁應用程式也可以是共用目標，也就是說，它們可以接收來自平台專屬或網頁應用程式的資料、連結、文字和檔案。請參閱「接收共用資料」，瞭解如何將應用程式註冊為共用目標。

系統層級的分享目標挑選器，其中包含已安裝的 PWA 選項。

功能和限制

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

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

Browser Support

• 128
• 93
• 
• 12.1

Source

分享連結和文字

如要分享連結和文字，請使用 share() 方法，這是一種以 Promise 為基礎的方法，需要屬性物件。為避免瀏覽器擲回 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));
}

如果網站有多個網址指向相同內容，請分享網頁的標準網址，而非目前網址。請改為檢查網頁 <head> 中的標準網址 <meta> 標記，並分享該網址，而不是分享 document.location.href。這可為使用者提供更優質的體驗。這不僅能避免重新導向，還能確保共用網址為特定用戶端提供正確的使用者體驗。舉例來說，如果朋友分享了行動版網址，而您在電腦上查看，應該會看到電腦版：

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 的 iframe：

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

聖誕老人追蹤器個案研究

聖誕老人追蹤器分享按鈕。

聖誕老人追蹤器是 Google 的開放原始碼專案，也是 Google 的節慶傳統。每年 12 月，你都可以透過遊戲和教育體驗慶祝佳節。

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

但有了 Web Share API，他們就能只顯示一個按鈕，節省寶貴的像素。他們也發現，與未啟用 API 的使用者相比，使用 Web Share 的使用者分享內容的次數增加了約 20%。前往聖誕老人追蹤器，查看 Web Share 的實際運作情形。

瀏覽器支援

瀏覽器對 Web Share API 的支援程度不盡相同，建議您使用功能偵測 (如前述程式碼範例所示)，而非假設特定方法受到支援。

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

navigator.canShare()

Browser Support

• 128
• 93
• 
• 14

Source

navigator.share()

Browser Support

• 128
• 93
• 
• 12.1

Source

表示支援 API

您是否打算使用 Web Share API？您的公開支持有助於 Chromium 團隊優先處理功能，並向其他瀏覽器供應商展示支援這些功能的重要性。

請使用主題標記 #WebShare 發布推文給 @ChromiumDev，告訴我們您在何處以及如何使用這項功能。

實用連結

• Web Share 示範
• Scrapbook PWA