PWA Web Share 與 Target 實作 完整指南：如何讓 Web App 呼叫系統分享選單並接收來自其他 App 的內容？

什麼是 Web Share API？

Web Share API 是一組讓 Web 應用程式能與作業系統原生分享機制互動的介面。它包含兩個面向：Web Share（主動分享），允許網頁透過 navigator.share() 呼叫系統分享選單，將文字、連結或檔案傳送給其他 App（如 Line、Messenger）；以及 Web Share Target（接收分享），允許已安裝的 PWA 在 Web App Manifest 中註冊為「分享目標」，讓使用者能將其他 App 的內容直接「分享」到您的 PWA 中進行處理。這項技術打破了網頁與原生 App 的藩籬，實現了真正的雙向內容流動。

什麼是 Web Share API

Web App 透過 Web Share API 就能夠使用系統提供的分享功能，將連結、內容和文件分享給安裝在裝置上的其他應用 App。另外一方面只要透過將 App 配置 Web Share Target 相關設定也能夠接收其他 App 分享的內容。

怎麼使用 Web Share API

用法上也是很簡單，也是只要瀏覽器有支援 navigator.share 這個 API 就可以使用。使用上需注意

• 只能在 HTTPS 環境
• 只能透過用戶動作觸發
• 支援 URLs、text、files.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

// 一般分享
if (navigator.share) {
  navigator
    .share({
      title: "標題",
      text: "內文",
      url: "https://hello.share/",
    })
    .then(() => console.log("成功"))
    .catch((error) => console.log("失敗", error));
}

// 分享檔案
if (navigator.canShare && navigator.canShare({ files: filesArray })) {
  navigator
    .share({
      files: filesArray,
      title: "標題",
      text: "內文",
    })
    .then(() => console.log("成功"))
    .catch((error) => console.log("失敗", error));
} else {
  console.log(`不支援檔案分享`);
}

配置 Web Share Target

前面說明了怎麼把內容透過 Web Share API 分享到其他的 App，現在則是透過 Web Share Target 相關配置來讓 Progressive Web App 能接收其他 App 分享的內容。

實作上也不困難，我們需要多實作一個頁面用來接收分享的內容，並且在 manifest 中加入相關配置，以下的例子就是 target.html，method 預設會是 GET 內容預設編碼是 application/x-www-form-urlencoded。

1
2
3
4
5
6
7
8
9
10
11
12
13
14

{
  "short_name": "Share",
  "name": "Share Target Test",
  "share_target": {
    "action": "target.html",
    "method": "GET",
    "params": {
      "title": "title",
      "text": "text",
      "url": "url"
    }
  }
  // 其他省略
}

在接收到分享後，瀏覽器會透過 URL-encoded 將相關參數編碼並帶入 action URL 中 ?title=hello&text=world，接著我們在 target.html 就可以透過相關程式進行處理。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

<div>
  <b><code>window.location</code>:</b> <code id="href"></code><br />
  <b>Title:</b> <code id="title"></code><br />
  <b>Text:</b> <code id="text"></code><br />
  <b>URL:</b> <code id="url"></code>
</div>

<script>
  window.addEventListener("DOMContentLoaded", () => {
    document.getElementById("href").textContent = window.location.href;
    const parsedUrl = new URL(window.location);
    document.getElementById("title").textContent =
      parsedUrl.searchParams.get("title");
    document.getElementById("text").textContent =
      parsedUrl.searchParams.get("text");
    document.getElementById("url").textContent =
      parsedUrl.searchParams.get("url");
  });
</script>

Google 的教學文件中，提供了下面這個 Demo 站台，使用上:

1. 安裝
2. 按分享並選擇剛剛安裝的 App

   圖片來源: https://web-dev
   

3. 會開啟 App 中的 target.html 頁面並顯示相關分享內容

   圖片來源: https://web-dev
   

站台連結: https://web-share.glitch.me/

FAQ：Web Share API 常見問題

Q1：為什麼我呼叫 navigator.share 時會報錯？

A：除了瀏覽器不支援外，最常見的原因是「非用戶觸發」。為了防止惡意廣告彈窗，Web Share API 必須由使用者的點擊事件 (click event) 或其他互動行為直接觸發。如果您嘗試在頁面載入時自動呼叫，瀏覽器會拒絕執行。

Q2：Web Share Target 可以接收檔案嗎？

A：可以。您需要在 manifest.json 的 share_target 中將 method 設為 POST，並將 enctype 設為 multipart/form-data。這樣當其他 App 分享圖片或文件時，您的 PWA 就能像接收表單上傳一樣處理這些檔案。

Q3：電腦版的瀏覽器支援這項功能嗎？

A：支援度越來越高。Web Share (主動分享) 目前在 Windows/macOS 的 Edge 與 Safari 上已有不錯支援（呼叫系統原生分享選單）。Web Share Target (接收分享) 則主要在已安裝的 PWA 環境下運作，桌面版 Chrome/Edge 安裝後同樣能出現在系統的分享清單中。

• ← 上一篇
• 下一篇 →