透過 Web Share Target API 接收共用資料

透過 Web Share Target API 簡化行動裝置與電腦的分享流程

Pete LePage

Joe Medley

透過行動裝置或電腦分享資料應該非常簡單，只要按一下「分享」按鈕， 並選擇應用程式的分享對象。舉例來說 透過電子郵件或 Twitter 分享有趣的文章， 也讓整個世界變得更加美好

過去，在作業系統中，只有特定平台的應用程式可以註冊 接收其他已安裝應用程式的分享。但有了 Web Share Target API 已安裝的網頁應用程式可以透過基礎作業系統註冊 做為共用目標，接收共用內容。

注意：Web Share Target API 只是其中一部分的神奇指令。網頁應用程式可以分享資料 檔案、連結或文字詳情請見 Web Share API。

將已安裝 PWA 設為系統層級共用目標選擇工具的選項。

瞭解網路分享目標的實際運作情形

1. 使用 Chrome 76 以上版本 (Android) 或 Chrome 89 以上版本 桌面版，開啟 Web Share Target 示範。
2. 當系統提示時，按一下「安裝」將應用程式新增到主畫面。 請透過 Chrome 選單將小工具新增到主畫面
3. 開啟任何支援分享功能的應用程式，或使用「分享」按鈕 。
4. 在目標選擇器中，選擇「Web Share Test」。

分享完成後，您應該會看到 網路分享目標網頁應用程式

將應用程式註冊為共用目標

如要將應用程式註冊為共用目標，應用程式必須符合 Chrome 的 安裝條件此外，使用者必須先 新增到您的應用程式，就必須將他們新增到應用程式主畫面。這樣做可防止網站 將自己隨機加入使用者的共用意圖選擇工具 就是希望使用者喜歡您應用程式上的某些功能

更新網頁應用程式資訊清單

如要將應用程式註冊為共用目標，請在應用程式的 網路中加入 share_target 項目 資訊清單。指示作業系統將您的應用程式納入 使用單一選項您在資訊清單中加入的內容會控制 應用程式接受哪些參數有兩種常見的 share_target 情境。 項目：

• 正在接受基本資訊
• 接受應用程式變更
• 正在接受檔案

，瞭解如何調查及移除這項存取權。

注意：每個資訊清單只能有一個 share_target，以便共用於 並在你的應用程式內 目標到達網頁 (url 項目指定的網頁)。

正在接受基本資訊

如果您的目標應用程式只是接受基本資訊，例如資料、連結、 然後將下列指令新增至 manifest.json 檔案：

"share_target": {
  "action": "/share-target/",
  "method": "GET",
  "params": {
    "title": "title",
    "text": "text",
    "url": "url"
  }
}

如果您的應用程式已有共用網址配置，您可以替換 params 換成現有查詢參數的值舉例來說，如果你的分享網址 配置使用 body 而非 text，您可以將 "text": "text" 替換為 "text": "body"。

如未提供，method 值會預設為 "GET"。enctype 欄位，而不是 如以下範例所示，代表資料的編碼類型。 針對 "GET" 方法，enctype 預設為 "application/x-www-form-urlencoded" 和 如果設為任何其他項目，系統就會忽略。

接受應用程式變更

如果分享的資料以某種方式改變目標應用程式 (例如儲存 目標應用程式中的書籤—將 method 值設為 "POST" 並加入 enctype 欄位。以下範例會在目標應用程式中建立書籤 因此，它使用 "POST" 作為 method 和 "multipart/form-data" 的 enctype:

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

正在接受檔案

和變更應用程式一樣，接受檔案時必須具備 "POST" 的 method 且 enctype 也會顯示。此外，enctype 必須是 "multipart/form-data"，並且必須新增 files 項目。

您也必須新增 files 陣列，定義應用程式可接受的檔案類型。 陣列元素是包含兩名成員的項目：name 欄位和 accept ] 欄位。accept 欄位採用 MIME 類型、副檔名或陣列 一個包含上述兩個項目建議您提供同時包含 MIME 類型和副檔名，因為作業系統 他們的偏好。

{
  "name": "Aggregator",
  "share_target": {
    "action": "/cgi-bin/aggregate",
    "method": "POST",
    "enctype": "multipart/form-data",
    "params": {
      "title": "name",
      "text": "description",
      "url": "link",
      "files": [
        {
          "name": "records",
          "accept": ["text/csv", ".csv"]
        },
        {
          "name": "graphs",
          "accept": "image/svg+xml"
        }
      ]
    }
  }
}

處理傳入的內容

至於要如何處理傳入的共用資料，則由您決定 應用程式。例如：

• 電子郵件用戶端可以撰寫新的電子郵件草稿，並使用 title 做為主旨 電子郵件，text 和 url 串連為內文。
• 社交網路應用程式，可透過以下方式擬定忽略title的新訊息： 以 text 做為訊息內文，新增 url 做為連結。如果 text 是 如果缺少，應用程式也可以在主體中使用 url。如果缺少 url， 應用程式可能會掃描 text 尋找網址，並將該網址新增為連結。
• 相片共享應用程式可以使用 title 建立新投影播放， 投影片標題、將 text 設為說明，並以 files 做為投影播放圖片。
• 簡訊應用程式可以使用 text 和 url 撰寫新訊息草稿 將 title 串連在一起，

處理 GET 分享

如果使用者選擇您的應用程式，且 method 為 "GET" ( 預設)，瀏覽器會開啟一個位於 action 網址的新視窗。接著，瀏覽器 產生查詢字串，並使用資訊清單中提供的網址編碼值。 舉例來說，如果共用應用程式提供 title 和 text，查詢字串為 ?title=hello&text=world。如要處理此情況，請使用 DOMContentLoaded ，並剖析查詢字串：

window.addEventListener('DOMContentLoaded', () => {
  const parsedUrl = new URL(window.location);
  // searchParams.get() will properly handle decoding the values.
  console.log('Title shared: ' + parsedUrl.searchParams.get('title'));
  console.log('Text shared: ' + parsedUrl.searchParams.get('text'));
  console.log('URL shared: ' + parsedUrl.searchParams.get('url'));
});

請務必使用 Service Worker 預先快取 action 網頁，因此就算使用者處於離線狀態，也能快速載入並穩定運作。 Workbox 這項工具 在您的 Service Worker 中實作預先快取。

處理 POST 分享

如果 method 是 "POST"，就像目標應用程式接受儲存 書籤或共用檔案，那麼傳入的 POST 要求的內文會包含 共用應用程式傳送的資料 (使用 enctype 值進行編碼) 使用資訊清單中提供的 Deployment

前景頁面無法直接處理這項資料。這個網頁會在 網頁會將要求傳遞至 Service Worker，您可以使用 fetch敬上 事件接聽程式。您可以將資料傳回前景 或使用 postMessage() 傳送至伺服器：

self.addEventListener('fetch', event => {
  const url = new URL(event.request.url);
  // If this is an incoming POST request for the
  // registered "action" URL, respond to it.
  if (event.request.method === 'POST' &&
      url.pathname === '/bookmark') {
    event.respondWith((async () => {
      const formData = await event.request.formData();
      const link = formData.get('link') || '';
      const responseUrl = await saveBookmark(link);
      return Response.redirect(responseUrl, 303);
    })());
  }
});

驗證共用內容

分享目標應用程式範例。

請務必驗證傳入的資料。很遺憾， 應用程式會透過正確的參數分享適當內容。

舉例來說，在 Android 裝置上，url 欄位會留空，因為 不適用於 Android 的分享系統相反地，網址通常會顯示在 text 欄位，有時則在 title 欄位中。

瀏覽器支援

支援 Web Share Target API 的方式如下：

在所有平台上，網頁應用程式必須先安裝才能顯示為 接收共用資料的潛在目標

應用程式範例

• 紅衫
• 簽名簿 PWA

顯示對 API 的支援

您是否打算使用 Web Share Target API？你的公開支援能協助 Chromium 團隊 優先開發功能，並向其他瀏覽器廠商說明支援這些功能的重要性。

使用主題標記將推文傳送至 @ChromiumDev #WebShareTarget敬上 ，並說明你使用這項服務的位置和方式。