透過 Workbox 打造彈性的搜尋體驗

本程式碼研究室將說明如何使用 Workbox 實作彈性搜尋體驗。這個應用程式使用的示範應用程式包含一個搜尋方塊,可呼叫伺服器端點,並將使用者重新導向至基本 HTML 頁面。

在新增最佳化項目之前,建議您先分析應用程式的目前狀態。

  • 按一下「Remix to Edit」,即可編輯專案。
  • 如要預覽網站,請按下「View App」。然後按下「Fullscreen」圖示 全螢幕

在剛開啟的新分頁中,檢查網站在離線時的行為:

  1. 按下 `Control+Shift+J` 鍵 (在 Mac 上為 `Command+Option+J` 鍵) 開啟開發人員工具。
  2. 按一下 [網路] 分頁標籤。
  3. 開啟 Chrome 開發人員工具,然後選取「Network」面板。
  4. 在「節流」下拉式清單中,選取「離線」
  5. 在示範應用程式中輸入搜尋查詢,然後按一下「Search」按鈕。

系統會顯示標準瀏覽器錯誤頁面:

瀏覽器中預設離線使用者體驗的螢幕截圖。

提供備用回應

服務工作者包含將離線頁面新增至預快取清單的程式碼,因此在服務工作者 install 事件中,系統一律會快取該頁面。

通常,您需要透過整合程式庫與所選建構工具 (例如 webpackgulp),指示 Workbox 在建構期間將此檔案新增至預先快取清單。

為了簡化程序,我們已為您完成這項工作。public/sw.js 中的以下程式碼可執行這項操作:

const FALLBACK_HTML_URL = '/index_offline.html';

workbox.precaching.precacheAndRoute([FALLBACK_HTML_URL]);

接下來,請加入程式碼,將離線頁面做為備用回應:

  1. 如要查看來源,請按下「View Source」
  2. 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 頁面。

如要測試這項功能,請按照下列步驟操作:

  1. 返回執行應用程式的其他分頁。
  2. 將「Throttling」(節流) 下拉式清單設回「Online」(線上)。
  3. 按下 Chrome 的「返回」按鈕,返回搜尋頁面。
  4. 確認開發人員工具中的「Disable cache」核取方塊已停用。
  5. 長按 Chrome 的「Reload」按鈕,然後選取「Empty cache and hard reload」,確保服務工作者已更新。
  6. 將「Throttling」下拉式清單再次設回「Offline」
  7. 輸入搜尋查詢,然後再次點選「搜尋」按鈕。

系統會顯示備用 HTML 頁面:

瀏覽器中自訂離線使用者體驗的螢幕截圖。

要求通知權限

為簡化操作,views/index_offline.html 中的離線頁面已在底部的程式碼區塊中加入要求通知權限的程式碼:

function requestNotificationPermission(event) {
  event.preventDefault();

  Notification.requestPermission().then(function (result) {
    showOfflineText(result);
  });
}

該程式碼會執行以下作業:

  • 當使用者點選「訂閱通知」時,系統會呼叫 requestNotificationPermission() 函式,並呼叫 Notification.requestPermission(),以顯示預設的瀏覽器權限提示。承諾會根據使用者選取的權限解析,該權限可以是 granteddenieddefault
  • 將已解析的權限傳遞至 showOfflineText(),向使用者顯示適當的文字。

儲存離線查詢,並在重新連上網路時重試

接下來,請實作 Workbox 背景同步,以便保留離線查詢,在瀏覽器偵測到連線已恢復時,可重新嘗試執行這些查詢。

  1. 開啟 public/sw.js 進行編輯。
  2. 在檔案結尾新增下列程式碼:
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}&notification=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 快取,並附加 &notification=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)
  );
});

測試功能

  1. 返回執行應用程式的其他分頁。
  2. 將「Throttling」(節流) 下拉式清單設回「Online」(線上)。
  3. 按下 Chrome 的「返回」按鈕,返回搜尋頁面。
  4. 長按 Chrome 的「Reload」按鈕,然後選取「Empty cache and hard reload」,確保服務工作者已更新。
  5. 將「Throttling」下拉式清單再次設回「Offline」
  6. 輸入搜尋查詢,然後再次點選「搜尋」按鈕。
  7. 按一下「訂閱通知」
  8. 當 Chrome 詢問您是否要授予應用程式傳送通知的權限時,請按一下「允許」
  9. 輸入其他搜尋查詢,然後再次按一下「搜尋」按鈕。
  10. 將「Throttling」(節流) 下拉式清單設回「Online」(線上)

連線恢復後,系統會顯示通知:

完整離線流程的螢幕截圖。

結論

Workbox 提供許多內建功能,可讓您的 PWA 更具韌性和吸引力。在本程式碼研究室中,您已瞭解如何透過 Workbox 抽象概念實作 Background Sync API,確保不會遺失離線使用者查詢,並在連線恢復後重試。這個示範是簡單的搜尋應用程式,但您可以使用類似的實作方式,用於更複雜的情境和用途,包括即時通訊應用程式、在社群網路上發布訊息等。