share_target
share_target 清單成員允許已安裝的 漸進式 Web 應用 (PWA) 在系統的分享對話方塊中註冊為分享目標。
一旦註冊並安裝，使用 Web 分享目標 API 的 PWA 就會作為一個內容分享目標，與其他典型的系統分享目標（如電子郵件、即時通訊工具和其他可以接收分享內容的本機應用）並列。
注意： 如果您想使用 Web Share API 分享資料，請參閱 Web Share API 和 navigator.share()。
值
share_target 成員的值是一個物件，用於定義應用程式如何接收分享的資料。該物件可以包含以下屬性（action 和 params 是必需的）
action-
Web 分享目標的 URL。
enctype可選method可選-
要使用的 HTTP 請求方法。可以是
GET或POST。如果分享的資料包含二進位制資料（如圖片），或者會更改目標應用（例如，建立書籤這樣的資料點），則應使用POST。 params-
一個用於配置分享引數的物件。物件鍵對應於
navigator.share()中的data物件。物件值可以被指定，並將用作查詢引數title可選：用於被分享文件標題的查詢引數名稱。text可選：用於被分享訊息文字（或正文）的查詢引數名稱。url可選：用於被分享資源 URL 的查詢引數名稱。files可選：一個（或一系列）物件，用於定義分享目標接受的檔案型別。該物件需要以下屬性name：用於分享檔案的表單欄位的名稱。accept：一個字串（或字串陣列），包含接受的 MIME 型別或副檔名。
示例
使用 GET 接收分享資料
可以使用以下 share_target 清單成員註冊一個分享目標
{
"share_target": {
"action": "/shared-content-receiver/",
"method": "GET",
"params": {
"title": "name",
"text": "description",
"url": "link"
}
}
}
當用戶在系統的分享對話方塊中選擇您的應用時，您的 PWA 將被啟動，並向提供的 URL 傳送一個 GET HTTP 請求，其中包含指定的查詢引數。它看起來會是這樣的：/shared-content-receiver/?name=a+shared+name&description=a+shared+description&link=https%3A%2F%2Fexample.com%2F。
URLSearchParams 介面可以方便地在您的應用程式中處理分享的資料並進行相應的操作。
const sharedName = url.searchParams.get("name");
const sharedDescription = url.searchParams.get("description");
const sharedLink = url.searchParams.get("link");
使用 POST 接收分享資料
如果分享請求包含一個或多個檔案，或者會導致您的應用程式產生副作用，則應使用 HTTP POST 方法。例如，如果您的應用程式接收圖片進行進一步處理，或者想在資料庫中儲存一個分享的連結作為書籤。
{
"share_target": {
"action": "/save-bookmark/",
"method": "POST",
"enctype": "multipart/form-data",
"params": {
"url": "link"
}
}
}
您可以透過伺服器端程式碼處理 POST 分享資料，或者為了給離線使用者提供更好的體驗，可以使用 fetch 事件監聽器來攔截 HTTP 請求，從而在 Service Worker 中訪問資料。
self.addEventListener("fetch", (event) => {
// Regular requests not related to Web Share Target.
if (event.request.method !== "POST") {
event.respondWith(fetch(event.request));
return;
}
// Requests related to Web Share Target.
event.respondWith(
(async () => {
const formData = await event.request.formData();
const link = formData.get("link") || "";
// Instead of the original URL `/save-bookmark/`, redirect
// the user to a URL returned by the `saveBookmark()`
// function, for example, `/`.
const responseUrl = await saveBookmark(link);
return Response.redirect(responseUrl, 303);
})(),
);
});
理想情況下，POST 請求應以 HTTP 303 See Other 重定向進行響應，以避免在使用者觸發頁面重新整理等情況下重複提交 POST 請求。
接收分享的檔案
要接受分享的檔案，HTTP 方法必須是 POST，enctype 必須是 multipart/form-data，並且必須提供一個定義接受檔案型別的 files 條目。
檔案必須有一個 name 屬性，並且 accept 屬性必須指定接受的 MIME 型別或副檔名。最好同時定義這兩者，因為作業系統在偏好上可能有所不同。
{
"share_target": {
"action": "/file-collector",
"method": "POST",
"enctype": "multipart/form-data",
"params": {
"title": "name",
"text": "description",
"url": "link",
"files": [
{
"name": "lists",
"accept": ["text/csv", ".csv"]
},
{
"name": "photos",
"accept": ["image/svg+xml", ".svg"]
}
]
}
}
}
要處理分享的檔案資料，請參閱上面的 POST 示例和用於讀取檔案的 FileReader API。為了將檔案從 Service Worker 上下文傳遞到客戶端上下文，一種解決方案是暫時將檔案寫入 Cache 或 IndexedDB，然後使用 Client.postMessage() 通知其客戶端。
安全與隱私
您的 PWA 只能在已安裝的情況下充當 Web 分享目標。另請參閱 如何使 PWA 可安裝。
與 HTML 表單提交類似，您應該謹慎處理透過分享目標傳送到您應用程式的資料。在使用傳入資料之前，請確保對其進行驗證。
規範
| 規範 |
|---|
| Web 分享目標 API # share_target-member |
瀏覽器相容性
載入中…