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

Demián Renzulli
Demián Renzulli
X GitHub 毛刺
Jeff Posnick

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

測量

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

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

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

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

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

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

提供備用回應

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

通常，您需要透過整合程式庫與所選建構工具 (例如 webpack 或 gulp)，指示 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()，以顯示預設的瀏覽器權限提示。承諾會根據使用者選取的權限解析，該權限可以是 granted、denied 或 default。
  • 將已解析的權限傳遞至 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，確保不會遺失離線使用者查詢，並在連線恢復後重試。這個示範是簡單的搜尋應用程式，但您可以使用類似的實作方式，用於更複雜的情境和用途，包括即時通訊應用程式、在社群網路上發布訊息等。