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

如何讓系統層級分享 UI 中顯示 PWA 與特定平台的應用程式

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

在本文中,我們將使用 Workbox,這是一組 JavaScript 程式庫,可為網路應用程式新增離線支援功能,藉此建立完全位於 service worker 中的分享目標網址。這樣一來,靜態網站和單頁應用程式就能做為分享目標,而不需要專屬伺服器端點。

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

在同一頁面上

如果您不熟悉 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"]
      }
    ]
  }
}

Service worker 與 Workbox 共用目標

雖然通常由伺服器端點處理,但您可以為共用目標執行一個簡單的操作,直接在服務工作者中註冊路徑,以便處理要求。這樣一來,您的應用程式就能成為沒有後端的分享目標。

您可以在 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 APIIndexedDB 中。

您可以試用範例應用程式 Fugu Journal,並查看其原始碼中的服務工作架構實作。

您可以採取的常見做法之一,就是保留共用資源,直到有更佳的網路連線為止。Workbox 也支援定期背景同步處理

結論

Share Target API 是一種簡單的方法,可將漸進式網頁應用程式深度整合至使用者的裝置,讓這些應用程式與特定平台的應用程式一樣,可在應用程式之間共用內容。但這麼做通常需要伺服器可接收要求。只要利用 Workbox 直接在 Service Worker 中建立共用目標路徑,應用程式就不會受到這項限制,讓共用目標在離線時和沒有後端的情況下,也能為應用程式運作。

相片來源:Elaine Casap 提供,取自 Unsplash