使用 Workbox 將 PWA 整合至內建分享使用者介面

如何在系統層級的分享 UI 中，讓 PWA 顯示在平台專屬應用程式旁

Jeff Posnick
Joe Medley
Joe Medley
GitHub
Sam Richard

Web Share Target API 可讓您在使用者安裝漸進式網頁應用程式後，在系統層級的分享功能表中顯示該應用程式。如果您有可接收要求的伺服器，這項功能就非常實用，但如果沒有，就難以運作。

本文將使用 Workbox (一組 JavaScript 程式庫，用於為網頁應用程式新增離線支援功能)，在Service Worker 內建立分享目標網址。這樣一來，靜態網站和單頁應用程式就能做為分享目標，不必使用專用伺服器端點。

開啟「分享方式」導覽匣的 Android 手機。
系統層級的分享目標挑選器，其中包含名為「Share Target Test」的已安裝 PWA 選項。

在同一頁面上

如果您不熟悉 Web Share Target 的運作方式，請參閱「使用 Web Share Target API 接收共用資料」一文，瞭解詳細介紹。以下是快速回顧。

導入網頁分享目標功能分為兩個部分。首先，請更新網頁應用程式資訊清單，指出您希望應用程式在安裝後成為分享目標。以下範例會透過 POST 要求，將分享內容導向 /share 網址。這會編碼為多部分表單，其中標題稱為 name，文字稱為 description，JPEG 圖片稱為 photos。

…
"share_target": {
  "action": "/share",
  "method": "POST",
  "enctype": "multipart/form-data",
  "params": {
    "title": "name",
    "text": "description",
    "files": [
      {
        "name": "photos",
        "accept": ["image/jpeg", ".jpg"]
      }
    ]
  }
}
…

使用 Workbox 的 Service Worker 分享目標

雖然通常是由伺服器端點處理，但您可以對分享目標執行一項簡單的技巧，直接在 Service Worker 中註冊路徑來處理要求。這樣一來，應用程式就能成為分享目標，不必有後端。

您可以在 Workbox 中註冊由 Service Worker 處理的路徑，首先，請從 'workbox-routing' 匯入 registerRoute。請注意，這個路徑已註冊為 /share 路由，與範例網頁應用程式資訊清單中列出的路徑相同。並呼叫 shareTargetHandler() 做為回應。

import { registerRoute } from 'workbox-routing';

registerRoute(
  '/share',
  shareTargetHandler,
  'POST'
);

shareTargetHandler() 函式為非同步，會接收事件、等待表單資料，然後從中擷取媒體檔案。

async function shareTargetHandler ({event}) {
  const formData = await event.request.formData();
  const mediaFiles = formData.getAll('media');

  for (const mediaFile of mediaFiles) {
    // Do something with mediaFile
    // Maybe cache it or post it back to a server
  });

  // Do something with the rest of formData as you need
  // Maybe save it to IndexedDB
};

接著，您就可以隨意使用這些檔案。你可以快取這些檔案。您可以透過擷取要求將這些資料傳送到某個位置。您甚至可以使用其他資訊清單選項，例如為其他共用項目提供含有某些查詢參數的網頁，或是在 Cache Storage API 或 IndexedDB 中儲存資料和媒體指標。

您可以在 Fugu Journal 範例應用程式中試用，並在原始碼中查看 Service Worker 的實作方式。

您可能會採取的一項常見做法是保留共用資源，直到網路連線品質提升為止。Workbox 也支援定期背景同步。

結論

Share Target API 可讓您輕鬆將漸進式網頁應用程式深入整合至使用者的裝置，讓應用程式在應用程式間分享內容這項重要工作上，與平台專屬應用程式並駕齊驅。但這麼做通常需要伺服器接收要求。只要運用 Workbox 在 Service Worker 中直接建立分享目標路徑，應用程式就不會受到這項限制，讓分享目標在離線和沒有後端的情況下也能運作。