將漸進式 Web 應用程式與 Windows Share 整合
本文說明如何將 Web 應用程式 (PWA) 和 Windows Share 功能整合。 此功能可讓使用者將內容從一個 Windows 應用程式共用到另一個應用程式。 PWA 會註冊為共用目標以接收及處理應用程式內的共用檔案。
什麼是「共用目標」？
「共用目標」是 Windows 8 中導入的功能，可讓應用程式接收來自另一個應用程式的資料。 「共用目標」的運作方式就像剪貼簿，但具有動態內容。
從 PWA 共用內容
為了共用內容，PWA 會產生內容 (例如文字、連結或檔案)，並將共用內容交給作業系統。 作業系統可讓使用者決定要用來接收該內容的應用程式。 PWA 可以使用 Web Share API 來觸發在 Windows 中顯示「共用工作表」。 Microsoft Edge 和其他以 Chromium 為基礎的瀏覽器支援 Web 共用 API。
如需如何從 PWA 共用內容的完整範例，請參閱 Microsoft Edge 文件中的共用內容。
在您的 PWA 中接收共用檔案
若要接收內容，PWA 會作為內容目標。 必須將 PWA 作為內容共用目標在作業系統註冊。
share_target 成員必須包含系統的必要資訊，才能將共用內容傳遞至您的應用程式。 請考慮下列範例資訊清單 share_target 設定：
"share_target": {
"action": "./share_target_path/?custom_param=foo",
"method": "POST",
"enctype": "multipart/form-data",
"params": {
"files": [
{
"name": "mapped_files",
"accept": ["image/jpeg"]
}
]
}
},
當使用者選取您的應用程式作為共用內容的目標時，就會啟動 PWA。 向 action 屬性指定的 URL 發出 GET HTTP 要求。 共用資料會以 title、text，和 url 查詢參數的形式傳遞。 提出下列要求：/handle-shared-content/?title=shared title&text=shared text&url=shared url。
下列範例說明如何註冊範圍服務背景工作角色：
navigator.serviceWorker.register('scoped-service-worker.js',
{ scope: "./share_target_path/" })
服務背景工作角色會視需要處理共用資料，然後滿足要求，也可以將要求重新導回自訂路徑。 下列範例說明如何將要求重新導回自訂路徑：
self.addEventListener('fetch', (event) => {
event.respondWith((async () => {
// Read the shared data here, then
// Redirect back out of the share_target_path to the actual site
return Response.redirect(event.request.url.replace("share_target_path/", ""));
})());
return;
});
如需詳細資訊，請參閱 Microsoft Edge 文件中的接收共用內容範例。
效能考量
如果只針對共用支援新增擷取處理程式，當服務背景工作角色中斷要求時，可能會發生延遲問題。 若要解決此問題，請考慮將 share_target 設定為虛擬子路徑，並註冊特別限定於該路徑的服務背景工作角色。 此方法可讓您針對共用目標使用擷取處理常式，而不針對其他呼叫註冊相同的擷取處理常式。
範例 PWA 應用程式
GitHub 上的 PWA 標誌印表機範例應用程式，示範如何將 PWA 與「Windows 共用工作表」整合。 應用程式可讓使用者將 PWA 標誌列印到印表機。 應用程式會使用「Windows 共用工作表」與其他應用程式共用標誌。
