如何在系統層級分享 UI 中讓 PWA 顯示在平台專用應用程式旁邊
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 網站上