このページは Cloud Translation API によって翻訳されました。

Workbox を使用した復元性に優れた検索エクスペリエンスの構築

Demián Renzulli

Jeff Posnick

この Codelab では、Workbox を使用して復元力のある検索エクスペリエンスを実装する方法について説明します。このデモアプリには、サーバーエンドポイントを呼び出してユーザーを基本的な HTML ページにリダイレクトする検索ボックスが含まれています。

測定

最適化を追加する前に、まずアプリの現在の状態を分析することをおすすめします。

[Remix to Edit] をクリックして、プロジェクトを編集可能にします。
サイトをプレビューするには、[アプリを表示] を押してから、[全画面表示] を押します。

開いたばかりの新しいタブで、オフラインになったときのウェブサイトの動作を確認します。

Ctrl+Shift+J（Mac の場合は Command+Option+J）キーを押して DevTools を開きます。
[ネットワーク] タブをクリックします。
Chrome DevTools を開き、[ネットワーク] パネルを選択します。
[スロットリング] プルダウンリストで、[オフライン] を選択します。
デモアプリで検索キーワードを入力し、[検索] ボタンをクリックします。

標準のブラウザのエラーページが表示されます。

フォールバックレスポンスを提供する

サービスワーカーには、オフラインページをプリキャッシュリストに追加するコードが含まれているため、サービスワーカーの 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 ページが返されます。

この機能をテストするには:

アプリを実行している他のタブに戻ります。
[スロットリング] プルダウンリストを [オンライン] に戻します。
Chrome の [戻る] ボタンを押して、検索ページに戻ります。
DevTools の [Disable cache] チェックボックスが無効になっていることを確認します。
Chrome の [再読み込み] ボタンを長押しし、[キャッシュを空にしてハードリロード] を選択して、サービスワーカーが更新されていることを確認します。
[スロットリング] プルダウンリストを [オフライン] に戻します。
検索キーワードを入力し、[検索] ボタンをもう一度クリックします。

フォールバック HTML ページが表示されます。

通知権限をリクエストする

わかりやすくするため、views/index_offline.html のオフラインページの下部にあるスクリプトブロックに、通知の権限をリクエストするコードがすでに含まれています。

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

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

コードは次の処理を行います。

ユーザーが [通知を購読する] をクリックすると、requestNotificationPermission() 関数が呼び出され、Notification.requestPermission() が呼び出されて、既定のブラウザの権限プロンプトが表示されます。Promise は、ユーザーが選択した権限（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}&notification=true`;
        cache.put(offlineUrl, response);
        showNotification(offlineUrl);
      } catch (error) {
        await this.unshiftRequest(entry);
        throw error;
      }
    }
  },
});

コードは次の処理を行います。

workbox.backgroundSync.Plugin には、失敗したリクエストをキューに追加して後で再試行できるようにするロジックが含まれています。これらのリクエストは IndexedDB に保持されます。
maxRetentionTime は、リクエストを再試行できる時間を示します。この例では 60 分を選択しています（60 分経過すると破棄されます）。
onSync は、このコードの最も重要な部分です。このコールバックは、接続が復元されたときに呼び出され、キューに登録されたリクエストが取得され、ネットワークから取得されます。
ネットワークレスポンスは offline-search-responses キャッシュに追加され、&notification=true クエリパラメータが追加されます。これにより、ユーザーが通知をクリックしたときにこのキャッシュエントリを取得できます。

バックグラウンド同期をサービスと統合するには、検索 URL（/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)
  );
});

機能をテストする

アプリを実行している他のタブに戻ります。
[スロットリング] プルダウンリストを [オンライン] に戻します。
Chrome の [戻る] ボタンを押して、検索ページに戻ります。
Chrome の [再読み込み] ボタンを長押しし、[キャッシュを空にしてハードリロード] を選択して、サービスワーカーが更新されていることを確認します。
[スロットリング] プルダウンリストを [オフライン] に戻します。
検索キーワードを入力し、[検索] ボタンをもう一度クリックします。
[通知を設定] をクリックします。
通知を送信する権限をアプリに付与するかどうかを Chrome から尋ねられたら、[許可] をクリックします。
別の検索キーワードを入力し、[検索] ボタンをもう一度クリックします。
[スロットリング] プルダウンリストを [オンライン] に戻します。

接続が復元されると、次のような通知が表示されます。

まとめ

Workbox には、PWA の復元力とエンゲージメントを高めるための多くの組み込み機能が用意されています。この Codelab では、Workbox 抽象化を使用して Background Sync API を実装し、オフラインユーザークエリが失われないようにし、接続が復元されたら再試行できるようにする方法を学習しました。このデモはシンプルな検索アプリですが、チャットアプリやソーシャルネットワークへのメッセージの投稿など、より複雑なシナリオやユースケースにも同様の実装を使用できます。

Workbox を使用した復元性に優れた検索エクスペリエンスの構築

測定

フォールバック レスポンスを提供する

通知権限をリクエストする

オフライン クエリを保持し、オンラインに戻ったら再試行する

機能をテストする

まとめ

フォールバックレスポンスを提供する

オフラインクエリを保持し、オンラインに戻ったら再試行する