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

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

Jeff Posnick

Joe Medley

Sam Richard

Web Share Target API 可讓您在安裝後，於使用者的系統層級分享工作表中顯示漸進式網頁應用程式。如果您有伺服器可以接收要求，這個方法就非常實用，但如果不是的話，會更難運作。

在本文中，我們將使用 Workbox 這個 JavaScript 程式庫，可為網頁應用程式新增離線支援，建立完全位於服務工作站內部的共用目標網址。如此一來，靜態網站和單頁應用程式就會做為共用目標，無須使用專屬的伺服器端點。

在同一個頁面上

如果您不熟悉「網路共用目標」的運作方式，請參閱「透過 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"]
      }
    ]
  }
}
…

Service Worker 與 Workbox 共用目標

雖然通常是由伺服器端點處理，但針對共用目標，您可以採取一個簡單的技巧，就是直接在服務工作站中註冊路徑來處理要求。如此一來，您的應用程式在沒有後端的情況下可成為共用目標。

您可以在 Workbox 中註冊由服務工作站處理的路徑。首先，請從 '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 直接在服務工作站中建立共用目標路徑，應用程式就沒有任何限制，因此即使應用程式離線或沒有後端，共用目標也能正常運作。

相片來源：Elaine Casap 於 Unsplash 網站上