本程式碼研究室將說明如何使用 Workbox 實作彈性搜尋體驗。這個應用程式使用的示範應用程式包含一個搜尋方塊,可呼叫伺服器端點,並將使用者重新導向至基本 HTML 頁面。
測量
在新增最佳化項目之前,建議您先分析應用程式的目前狀態。
- 按一下「Remix to Edit」,即可編輯專案。
- 如要預覽網站,請按下「View App」。然後按下「Fullscreen」圖示 。
在剛開啟的新分頁中,檢查網站在離線時的行為:
- 按下 `Control+Shift+J` 鍵 (在 Mac 上為 `Command+Option+J` 鍵) 開啟開發人員工具。
- 按一下 [網路] 分頁標籤。
- 開啟 Chrome 開發人員工具,然後選取「Network」面板。
- 在「節流」下拉式清單中,選取「離線」。
- 在示範應用程式中輸入搜尋查詢,然後按一下「Search」按鈕。
系統會顯示標準瀏覽器錯誤頁面:
提供備用回應
服務工作者包含將離線頁面新增至預快取清單的程式碼,因此在服務工作者 install
事件中,系統一律會快取該頁面。
通常,您需要透過整合程式庫與所選建構工具 (例如 webpack 或 gulp),指示 Workbox 在建構期間將此檔案新增至預先快取清單。
為了簡化程序,我們已為您完成這項工作。public/sw.js
中的以下程式碼可執行這項操作:
const FALLBACK_HTML_URL = '/index_offline.html';
…
workbox.precaching.precacheAndRoute([FALLBACK_HTML_URL]);
接下來,請加入程式碼,將離線頁面做為備用回應:
- 如要查看來源,請按下「View Source」。
- 在
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 的「返回」按鈕,返回搜尋頁面。
- 確認開發人員工具中的「Disable cache」核取方塊已停用。
- 長按 Chrome 的「Reload」按鈕,然後選取「Empty cache and hard reload」,確保服務工作者已更新。
- 將「Throttling」下拉式清單再次設回「Offline」。
- 輸入搜尋查詢,然後再次點選「搜尋」按鈕。
系統會顯示備用 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 背景同步,以便保留離線查詢,在瀏覽器偵測到連線已恢復時,可重新嘗試執行這些查詢。
- 開啟
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 hard reload」,確保服務工作者已更新。
- 將「Throttling」下拉式清單再次設回「Offline」。
- 輸入搜尋查詢,然後再次點選「搜尋」按鈕。
- 按一下「訂閱通知」。
- 當 Chrome 詢問您是否要授予應用程式傳送通知的權限時,請按一下「允許」。
- 輸入其他搜尋查詢,然後再次按一下「搜尋」按鈕。
- 將「Throttling」(節流) 下拉式清單設回「Online」(線上)。
連線恢復後,系統會顯示通知:
結論
Workbox 提供許多內建功能,可讓您的 PWA 更具韌性和吸引力。在本程式碼研究室中,您已瞭解如何透過 Workbox 抽象概念實作 Background Sync API,確保不會遺失離線使用者查詢,並在連線恢復後重試。這個示範是簡單的搜尋應用程式,但您可以使用類似的實作方式,用於更複雜的情境和用途,包括即時通訊應用程式、在社群網路上發布訊息等。