本程式碼研究室將說明如何使用 Workbox 打造彈性的搜尋體驗。此試用版應用程式內含的搜尋框會呼叫伺服器端點,並將使用者重新導向至基本 HTML 網頁。
測量
在新增最佳化功能之前,建議您先分析應用程式的目前狀態。
- 按一下「Remix to Edit」,讓專案可供編輯。
- 如要預覽網站,請按下「查看應用程式」,然後按下「全螢幕」圖示 。
在剛開啟的新分頁中查看網站離線時的行為:
- 按下 `Control+Shift+J 鍵 (在 Mac 上為 Command+Option+J 鍵) 開啟開發人員工具。
- 按一下 [網路] 分頁標籤。
- 開啟 Chrome 開發人員工具,然後選取「網路」面板。
- 在「Throttling」下拉式清單中選取「離線」。
- 在試用版應用程式中,輸入搜尋查詢,然後按一下「Search」按鈕。
標準瀏覽器錯誤頁面會顯示:
提供備用回應
Service Worker 內含可將離線網頁加入預載清單的程式碼,因此可以隨時在 Service Worker install
事件中快取該網頁。
您通常需要將程式庫與您選擇的建構工具 (例如 webpack 或 gulp) 整合,藉此指示 Workbox 在建構期間將這個檔案加入預先快取清單。
為了方便起見,我們已經完成這些程序。以下 public/sw.js
的程式碼執行該操作:
const FALLBACK_HTML_URL = '/index_offline.html';
…
workbox.precaching.precacheAndRoute([FALLBACK_HTML_URL]);
接著,請新增程式碼,以便使用離線網頁做為備用回應:
- 如要查看原始碼,請按下「檢視原始碼」。
- 請將下列程式碼加入
public/sw.js
底部:
workbox.routing.setDefaultHandler(new workbox.strategies.NetworkOnly());
workbox.routing.setCatchHandler(({event}) => {
switch (event.request.destination) {
case 'document':
return caches.match(FALLBACK_HTML_URL);
break;
default:
return Response.error();
}
});
該程式碼會執行以下作業:
- 定義適用於所有要求的預設「僅限聯播網」策略。
- 呼叫
workbox.routing.setCatchHandler()
以管理失敗的要求,藉此宣告全域錯誤處理常式。針對文件提出要求時,系統會傳回備用離線 HTML 網頁。
如要測試這項功能:
- 返回執行應用程式的另一個分頁。
- 將「Throttling」下拉式清單重設為「Online」。
- 按下 Chrome 的「返回」按鈕,即可返回搜尋頁面。
- 確認開發人員工具中的「停用快取」核取方塊已停用。
- 長按 Chrome 的「Reload」(重新載入) 按鈕,然後選取「Empty cache and 硬 load」(空白快取並強制重新載入),確保 Service Worker 已更新。
- 再次將「Throttling」下拉式清單重新設為「離線」。
- 輸入搜尋查詢,然後按一下「搜尋」按鈕。
備用 HTML 網頁會顯示:
要求通知權限
為求簡單起見,位於 views/index_offline.html
的離線網頁已含有在底部的指令碼區塊中要求通知權限的程式碼:
function requestNotificationPermission(event) {
event.preventDefault();
Notification.requestPermission().then(function (result) {
showOfflineText(result);
});
}
該程式碼會執行以下作業:
- 當使用者按一下「訂閱通知」時,系統會呼叫
requestNotificationPermission()
函式,並呼叫Notification.requestPermission()
來顯示預設的瀏覽器權限提示。這項承諾會透過使用者選取的權限解析,可以是granted
、denied
或default
。 - 將解析的權限傳遞至
showOfflineText()
,以便向使用者顯示適當文字。
保留離線查詢,並在恢復連線時重試
接下來,請執行 Workbox Background Sync 來保留離線查詢,讓瀏覽器偵測到傳回連線時能重試。
- 開啟
public/sw.js
進行編輯。 - 在檔案結尾加入以下程式碼:
const bgSyncPlugin = new workbox.backgroundSync.Plugin('offlineQueryQueue', {
maxRetentionTime: 60,
onSync: async ({queue}) => {
let entry;
while ((entry = await queue.shiftRequest())) {
try {
const response = await fetch(entry.request);
const cache = await caches.open('offline-search-responses');
const offlineUrl = `${entry.request.url}¬ification=true`;
cache.put(offlineUrl, response);
showNotification(offlineUrl);
} catch (error) {
await this.unshiftRequest(entry);
throw error;
}
}
},
});
該程式碼會執行以下作業:
workbox.backgroundSync.Plugin
包含將失敗的要求加入佇列的邏輯,以便稍後重試。這些要求會保存在 IndexedDB 中。maxRetentionTime
表示可以重試要求的時間長度。在這種情況下,我們選擇了 60 分鐘 (之後就會捨棄)。onSync
是此程式碼中最重要的部分。連線恢復時,系統會呼叫此回呼,以便擷取佇列中的要求,然後再從網路擷取。- 網路回應會新增至
offline-search-responses
快取中,並附加¬ification=true
查詢參數,如此一來,使用者點擊通知時,系統即可擷取此快取項目。
如要將背景同步處理與您的服務整合,請為搜尋網址 (/search_action
) 的要求定義 NetworkOnly 策略,並傳遞先前定義的 bgSyncPlugin
。請將下列程式碼加入 public/sw.js
底部:
const matchSearchUrl = ({url}) => {
const notificationParam = url.searchParams.get('notification');
return url.pathname === '/search_action' && !(notificationParam === 'true');
};
workbox.routing.registerRoute(
matchSearchUrl,
new workbox.strategies.NetworkOnly({
plugins: [bgSyncPlugin],
}),
);
這會指示 Workbox 一律連線至網路;若要求失敗,則使用背景同步處理邏輯。
接著,將下列程式碼加入 public/sw.js
底部,為來自通知的要求定義快取策略。請使用 CacheFirst 策略,這樣就可以從快取提供。
const matchNotificationUrl = ({url}) => {
const notificationParam = url.searchParams.get('notification');
return (url.pathname === '/search_action' && (notificationParam === 'true'));
};
workbox.routing.registerRoute(matchNotificationUrl,
new workbox.strategies.CacheFirst({
cacheName: 'offline-search-responses',
})
);
最後,加入用來顯示通知的程式碼:
function showNotification(notificationUrl) {
if (Notification.permission) {
self.registration.showNotification('Your search is ready!', {
body: 'Click to see you search result',
icon: '/img/workbox.jpg',
data: {
url: notificationUrl
}
});
}
}
self.addEventListener('notificationclick', function(event) {
event.notification.close();
event.waitUntil(
clients.openWindow(event.notification.data.url)
);
});
測試功能
- 返回執行應用程式的另一個分頁。
- 將「Throttling」下拉式清單重設為「Online」。
- 按下 Chrome 的「返回」按鈕,即可返回搜尋頁面。
- 長按 Chrome 的「Reload」(重新載入) 按鈕,然後選取「Empty cache and 硬 load」(空白快取並強制重新載入),確保 Service Worker 已更新。
- 再次將「Throttling」下拉式清單重新設為「離線」。
- 輸入搜尋查詢,然後按一下「搜尋」按鈕。
- 按一下「訂閱通知」。
- 當 Chrome 詢問您是否要授予應用程式傳送通知的權限時,請按一下「Allow」。
- 輸入其他搜尋查詢,然後再次按一下「搜尋」按鈕。
- 再次將「Throttling」下拉式清單重新設為「Online」。
連線恢復後,系統就會顯示通知:
結論
Workbox 提供許多內建功能,讓您的 PWA 更靈活、更具吸引力。在本程式碼研究室中,您已瞭解如何透過 Workbox 抽象層實作 Background Sync API,確保離線使用者查詢不會遺失,且可在連線恢復後重試。本示範內容是簡單的搜尋應用程式,但您可以採用類似的實作方式,處理更複雜的情境和用途,包括即時通訊應用程式,以及在社群網路上發布訊息等。