如何讓系統層級分享 UI 中顯示 PWA 與特定平台的應用程式
Web Share Target API 可讓您在使用者安裝漸進式網頁應用程式後,在系統層級的分享工作表中顯示該應用程式。如果您有可接收要求的伺服器,這項功能就會運作良好,但如果沒有,就會很難運作。
在本文中,我們將使用 Workbox,這是一組 JavaScript 程式庫,可為網路應用程式新增離線支援功能,藉此建立完全位於 service worker 中的分享目標網址。這樣一來,靜態網站和單頁應用程式就能做為分享目標,而不需要專屬伺服器端點。
在同一頁面上
如果您不熟悉 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 API 或 IndexedDB 中。
您可以試用範例應用程式 Fugu Journal,並查看其原始碼中的服務工作架構實作。
您可以採取的常見做法之一,就是保留共用資源,直到有更佳的網路連線為止。Workbox 也支援定期背景同步處理。
結論
Share Target API 是一種簡單的方法,可將漸進式網頁應用程式深度整合至使用者的裝置,讓這些應用程式與特定平台的應用程式一樣,可在應用程式之間共用內容。但這麼做通常需要伺服器可接收要求。只要利用 Workbox 直接在 Service Worker 中建立共用目標路徑,應用程式就不會受到這項限制,讓共用目標在離線時和沒有後端的情況下,也能為應用程式運作。
相片來源:Elaine Casap 提供,取自 Unsplash