透過 Web Share Target API 簡化行動裝置與電腦的分享流程
透過行動裝置或電腦分享資料應該非常簡單,只要按一下「分享」按鈕, 並選擇應用程式的分享對象。舉例來說 透過電子郵件或 Twitter 分享有趣的文章, 也讓整個世界變得更加美好
過去,在作業系統中,只有特定平台的應用程式可以註冊 接收其他已安裝應用程式的分享。但有了 Web Share Target API 已安裝的網頁應用程式可以透過基礎作業系統註冊 做為共用目標,接收共用內容。
![顯示「分享方式」的 Android 手機導覽匣已開啟。](https://developer.chrome.google.cn/static/docs/capabilities/web-apis/web-share-target/image/android-phone-the-share-e651a6cf19688.png?authuser=19&hl=zh-tw)
瞭解網路分享目標的實際運作情形
- 使用 Chrome 76 以上版本 (Android) 或 Chrome 89 以上版本 桌面版,開啟 Web Share Target 示範。
- 當系統提示時,按一下「安裝」將應用程式新增到主畫面。 請透過 Chrome 選單將小工具新增到主畫面
- 開啟任何支援分享功能的應用程式,或使用「分享」按鈕 。
- 在目標選擇器中,選擇「Web Share Test」。
分享完成後,您應該會看到 網路分享目標網頁應用程式
將應用程式註冊為共用目標
如要將應用程式註冊為共用目標,應用程式必須符合 Chrome 的 安裝條件此外,使用者必須先 新增到您的應用程式,就必須將他們新增到應用程式主畫面。這樣做可防止網站 將自己隨機加入使用者的共用意圖選擇工具 就是希望使用者喜歡您應用程式上的某些功能
更新網頁應用程式資訊清單
如要將應用程式註冊為共用目標,請在應用程式的 網路中加入 share_target
項目
資訊清單。指示作業系統將您的應用程式納入
使用單一選項您在資訊清單中加入的內容會控制
應用程式接受哪些參數有兩種常見的 share_target
情境。
項目:
- 正在接受基本資訊
- 接受應用程式變更
- 正在接受檔案
正在接受基本資訊
如果您的目標應用程式只是接受基本資訊,例如資料、連結、
然後將下列指令新增至 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 手機。](https://developer.chrome.google.cn/static/docs/capabilities/web-apis/web-share-target/image/an-android-phone-displayi-000d1b109b71e.png?authuser=19&hl=zh-tw)
請務必驗證傳入的資料。很遺憾, 應用程式會透過正確的參數分享適當內容。
舉例來說,在 Android 裝置上,url
欄位會留空,因為
不適用於 Android 的分享系統相反地,網址通常會顯示在
text
欄位,有時則在 title
欄位中。
瀏覽器支援
支援 Web Share Target API 的方式如下:
在所有平台上,網頁應用程式必須先安裝才能顯示為 接收共用資料的潛在目標
應用程式範例
顯示對 API 的支援
您是否打算使用 Web Share Target API?你的公開支援能協助 Chromium 團隊 優先開發功能,並向其他瀏覽器廠商說明支援這些功能的重要性。
使用主題標記將推文傳送至 @ChromiumDev
#WebShareTarget
敬上
,並說明你使用這項服務的位置和方式。