網頁應用程式可使用與平台專屬應用程式相同的系統提供的共用功能。
有了 Web Share API，網頁應用程式即可採用與平台專用應用程式相同的系統提供的共用功能。Web Share API 可讓網頁應用程式將連結、文字和檔案分享到裝置上安裝的其他應用程式，方法與平台專屬應用程式相同。
功能和限制
網路分享功能具有下列功能和限制：
- 這項功能只能在透過 HTTPS 存取的網站上使用。
- 如果是在第三方 iframe 中共用，則必須使用
allow屬性。 - 您必須為了回應使用者動作 (例如點擊) 而叫用此程式。無法透過
onload處理常式叫用。 - 可分享網址、文字或檔案。
分享連結和文字
如要分享連結和文字，請使用 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 的 iframe：
<!-- 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 訊息。
聖誕老人追蹤器個案研究
聖誕老人追蹤器是一項開放原始碼專案，是 Google 的節慶傳統。每年 12 月，您都能以遊戲和教育體驗來慶祝這個季節
2016 年，聖誕老人追蹤器團隊在 Android 上使用 Web Share API。這個 API 非常適合行動裝置。 前幾年，該團隊因為空間價格不高，決定移除了行動裝置上的分享按鈕，而且他們無法確定有好幾個分享目標是合理行為。
但透過 Web Share API 功能，他們只添加一個按鈕，就能節省寶貴的像素。他們還發現，採用 Web Share 功能的使用者比未啟用 API 的使用者高出約 20%。請前往聖誕老人追蹤器查看 Web Share 的實際運作情形。
瀏覽器支援
Web Share API 的瀏覽器支援非常細微，建議您使用功能偵測 (如先前的程式碼範例所述)，不要假設系統支援特定方法。
下方大致列出這項功能的支援情況。如需詳細資訊，請點選任一支援連結。
navigator.canShare()navigator.share()
展現對 API 的支援
你打算使用 Web Share API 嗎？您的公開支援可協助 Chromium 團隊決定功能的優先順序，以及向其他瀏覽器廠商說明這項功能有多重要。
請使用主題標記 #WebShare 將 Tweet 訊息傳送至 @ChromiumDev，並告訴我們您的使用地點和方式。