如何讓 PWA 在系統層級分享使用者介面的平台專屬應用程式旁顯示
Web Share Target API 可讓您 您的漸進式網頁應用程式 安裝完成後,系統層級就會顯示使用者系統層級共用工作表。雖然有伺服器 Google 日曆就會提供資料,如果不顯示,將較難處理。
本文將使用 Workbox,一組 JavaScript 用於為網頁應用程式新增離線支援的程式庫,可用於建立共用目標網址 是實際存在於 Service Worker 內部。如此一來 單頁應用程式可在沒有專用伺服器端點的情況下做為共用目標。
在同一個網頁上
如果你不熟悉「網路共用目標」的運作原理,請透過網路分享接收共用資料 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
};
您可以視需要使用這些檔案。您可以快取這些圖片。個人中心 傳送擷取要求,即可將檔案傳送至任何地方。您甚至可以 可能為網頁另外提供部分查詢參數 共用項目,或將資料和指標儲存在「快取儲存空間」 API 或 IndexedDB。
您可以在範例應用程式 Fugu 中試用 日誌,並查看其 Service Worker 原始碼的實作 程式碼。
常見的做法是保留共用資源,直到網路訊號良好為止 可以使用這個連線Workbox 也支援定期背景 同步處理。
結論
Share Target API 可讓您輕鬆整合 Progressive Web 應用程式導入使用者的裝置上,與 在應用程式之間共用內容的重要工作但這麼做通常需要 接收要求的部分。利用 Workbox 來分享 目標路徑,因此應用程式不必 限制,共用目標功能可在離線或離線時運作應用程式 後端。
相片來源:Elaine Casap 於 Unsplash 網站上