本頁面由 Cloud Translation API 翻譯而成。

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

Demián Renzulli

Jeff Posnick

本程式碼研究室將說明如何使用 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();
  }
});

注意： Glitch UI 指出 workbox is not defined，因為不知道第 1 行的 importScripts() 呼叫正在匯入程式庫。

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

定義適用於所有要求的預設「僅限聯播網」策略。
呼叫 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}&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)
  );
});

測試功能

返回執行應用程式的另一個分頁。
將「Throttling」下拉式清單重設為「Online」。
按下 Chrome 的「返回」按鈕，即可返回搜尋頁面。
長按 Chrome 的「Reload」(重新載入) 按鈕，然後選取「Empty cache and 硬 load」(空白快取並強制重新載入)，確保 Service Worker 已更新。
再次將「Throttling」下拉式清單重新設為「離線」。
輸入搜尋查詢，然後按一下「搜尋」按鈕。
按一下「訂閱通知」。
當 Chrome 詢問您是否要授予應用程式傳送通知的權限時，請按一下「Allow」。
輸入其他搜尋查詢，然後再次按一下「搜尋」按鈕。
再次將「Throttling」下拉式清單重新設為「Online」。

連線恢復後，系統就會顯示通知：

結論

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