プログレッシブ ウェブアプリ: Service Worker のインクルード

1. ようこそ

このラボでは、既存のウェブ アプリケーションにストリーミング ルート レスポンスを追加して、パフォーマンスを改善します。これは、プログレッシブ ウェブアプリ ワークショップのコンパニオン Codelab シリーズの 7 番目です。前回の Codelab は PWA の強化でした。このシリーズには、もう 1 つの Codelab があります。

学習内容

  • サービス ワーカーにストリーミング レスポンスを追加する

必要な予備知識

  • JavaScript

必要なもの

2. 準備

まず、この Codelab を完了するために必要なスターター コードをクローンするかダウンロードします。

リポジトリのクローンを作成する場合は、pwa06--service-worker-includes ブランチにいることを確認してください。zip ファイルには、そのブランチのコードも含まれています。

このコードベースには Node.js 14 以降が必要です。コードが用意できたら、コードのフォルダのコマンドラインから npm ci を実行して、必要なすべての依存関係をインストールします。次に、npm start を実行して、Codelab の開発用サーバーを起動します。

ソースコードの README.md ファイルには、すべての配布ファイルの説明が記載されています。また、この Codelab 全体を通して使用する主な既存のファイルは次のとおりです。

キーファイル

  • js/preview.js - ページの JavaScript ファイルをプレビューする
  • service-worker.js - PWA のサービス ワーカー ファイル

3. ストリーミング プレビュー

プレビュー ページは、ヘッド、コンパイルされたボディ、フッターの 3 つの部分に分けることができます。現在、コンパイルされた本文はクライアントサイドでレンダリングされていますが、その必要はありません。Service Worker に移動しましょう。

本文をコンパイルするために、非同期コンテンツ ルックアップがあります。ナビゲーション レスポンスでの非同期処理はコストが高いため、既知のコンテンツを最初にブラウザにストリーミングする絶好の機会となります。

そのためには、まず js/preview.js のコンテンツをクリアして、コンパイルが実行されないようにします。次に、service-worker.js で次の操作を行います。

  • workbox-streams から名前付きエクスポート strategy を streamsStrategy としてインポートする
  • 名前付きエクスポート openDB を idb からインポートし、名前付きエクスポート marked を marked からインポートします。
  • ナビゲーションのルート登録の前に、新しいルート登録
    • URL の pathname が /preview であることを確認する必要があります。
      1. main タグのコンテンツ領域を介して preview/index.html のコンテンツで応答する
      2. settings-store IndexedDB を開き、settings オブジェクト ストアからコンテンツを取得し、そのコンテンツのマークダウン レンダリング バージョンを返す関数で応答します。
      3. 終了タグ main、body、html を使用して応答します。

ストリーミング レスポンスを配置したら、ブラウザに戻ってサイトのプレビューを開きます。ページ コンテンツがサービス ワーカーから直接レンダリングされるようになり、クライアントサイドのコードは不要になったことがわかります。

4. 完了

サービス ワーカーとキャッシュ ストレージ API を使用してウェブアプリをオフラインにする方法について学習しました。

このシリーズの次の Codelab は、ワーカーの操作です。