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

如何讓 PWA 在系統層級分享使用者介面的平台專屬應用程式旁顯示

Web Share Target API 可讓您 您的漸進式網頁應用程式 安裝完成後,系統層級就會顯示使用者系統層級共用工作表。雖然有伺服器 Google 日曆就會提供資料,如果不顯示,將較難處理。

本文將使用 Workbox,一組 JavaScript 用於為網頁應用程式新增離線支援的程式庫,可用於建立共用目標網址 是實際存在於 Service Worker 內部。如此一來 單頁應用程式可在沒有專用伺服器端點的情況下做為共用目標。

顯示「分享方式」的 Android 手機導覽匣已開啟。
使用已安裝 PWA 的系統層級共用目標挑選器 Share Target Test 選項,

在同一個網頁上

如果你不熟悉「網路共用目標」的運作原理,請透過網路分享接收共用資料 Target API 可讓您深入瞭解。 以下為您快速複習內容。

網路共用目標功能的實作方式分為兩個部分。首先 更新網頁應用程式資訊清單,指明您想將應用程式設為共用 目標安裝時。以下範例會將分享檔案導向至 /share 網址 或是透過 POST 要求傳送 ID該編碼為多部分形式,標題被呼叫 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 共用目標

通常由伺服器端點處理,但你可以對共享內容 是直接在您的 Service Worker 中註冊路徑,以處理 請求。讓應用程式成為沒有後端的共用目標。

請在 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
};

您可以視需要使用這些檔案。您可以快取這些圖片。個人中心 傳送擷取要求,即可將檔案傳送至任何地方。您甚至可以 可能為網頁另外提供部分查詢參數 共用項目,或將資料和指標儲存在「快取儲存空間」 APIIndexedDB

您可以在範例應用程式 Fugu 中試用 日誌,並查看其 Service Worker 原始碼的實作 程式碼

常見的做法是保留共用資源,直到網路訊號良好為止 可以使用這個連線Workbox 也支援定期背景 同步處理。

結論

Share Target API 可讓您輕鬆整合 Progressive Web 應用程式導入使用者的裝置上,與 在應用程式之間共用內容的重要工作但這麼做通常需要 接收要求的部分。利用 Workbox 來分享 目標路徑,因此應用程式不必 限制,共用目標功能可在離線或離線時運作應用程式 後端。

相片來源:Elaine CasapUnsplash 網站上