share_target

實驗性： 這是一個 實驗性技術
在生產環境中使用此功能之前，請仔細檢視 瀏覽器相容性表.

型別 物件

share_target 清單成員允許已安裝的 漸進式 Web 應用 (PWA) 在系統共享對話方塊中註冊為共享目標。

註冊並安裝後，使用 Web 共享目標 API 的 PWA 充當內容共享目標，與典型的系統共享目標（如電子郵件、訊息傳遞應用和其他可以接收共享內容的原生應用）並列。

注意：如果您想使用 Web 共享 API 共享資料，請參閱 Web 共享 API 和 navigator.share().

屬性

要定義應用程式如何接收共享資料，清單中的 share_target 物件可能包含以下屬性（action 和 params 是必需的）

action

Web 共享目標的 URL。

enctype 可選

使用 POST 請求時共享資料的編碼。在 GET 請求中忽略。

method 可選

要使用的 HTTP 請求方法。可以是 GET 或 POST。如果共享資料包含影像等二進位制資料，或者如果它更改了目標應用（例如，如果它建立了一個數據點，例如書籤），請使用 POST。

params

用於配置共享引數的物件。物件鍵對應於 navigator.share() 中的 data 物件。物件值可以指定，並將用作查詢引數

  • title 可選：用於共享文件標題的查詢引數的名稱。
  • text 可選：用於共享訊息文字（或正文）的查詢引數的名稱。
  • url 可選：用於共享資源 URL 的查詢引數的名稱。
  • files 可選：定義共享目標接受哪些檔案的物件（或物件陣列）。該物件需要以下屬性
    • name：用於共享檔案的表單欄位的名稱。
    • accept：接受的 MIME 型別或副檔名的字串（或字串陣列）。

示例

使用 GET 接收共享資料

可以使用以下 share_target 清單成員註冊共享目標

json
{
  "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 介面可用於處理您的應用程式中的共享資料並執行相關操作。

js
const sharedName = url.searchParams.get("name");
const sharedDescription = url.searchParams.get("description");
const sharedLink = url.searchParams.get("link");

使用 POST 接收共享資料

如果共享請求包含一個或多個檔案，或者在您的應用程式中產生副作用，則應使用 HTTP POST 方法。例如，如果您的應用程式接收影像以進行進一步處理，或者想要將共享連結儲存為您的資料庫中的書籤。

json
{
  "share_target": {
    "action": "/save-bookmark/",
    "method": "POST",
    "enctype": "multipart/form-data",
    "params": {
      "url": "link"
    }
  }
}

您可以使用伺服器端程式碼處理 POST 共享資料，或者，為了為離線使用者提供更好的體驗，可以使用 fetch 事件偵聽器攔截 HTTP 請求，這允許在 服務工作者 中訪問資料。

js
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 型別或副檔名。最好同時定義這兩個屬性，因為作業系統在它們之間可能有所不同。

json
{
  "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 以讀取檔案。為了從服務工作者上下文將檔案傳遞到客戶端上下文，一種解決方案是將檔案暫時寫入 Cache 或 IndexedDB，然後使用 Client.postMessage() 通知其客戶端。

安全和隱私

只有在您的 PWA 已安裝的情況下，它才能充當 Web 共享目標。另請參閱 如何使 PWA 可安裝.

與 HTML 表單提交類似，您應該注意透過共享目標傳送到您的應用程式的資料。在使用傳入資料之前，請務必驗證其有效性。

規範

規範
Web 共享目標 API
# share_target-member

瀏覽器相容性

BCD 表格僅在瀏覽器中載入