プログレッシブ ウェブアプリ: IndexedDB

1. ようこそ

このラボでは、クライアント データをバックアップして IndexedDB に復元します。これは、プログレッシブ ウェブアプリ ワークショップのコンパニオン Codelab シリーズの 3 番目です。前の Codelab は Workbox の使用でした。このシリーズには、他に 5 つの Codelab があります。

学習内容

  • idb を使用して IndexedDB データベースとオブジェクト ストアを作成する
  • オブジェクト ストアにアイテムを追加して取得する

必要な予備知識

  • JavaScript と Promise

必要なもの

2. 準備

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

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

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

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

キーファイル

  • js/main.js - メイン アプリケーションの JavaScript ファイル

3. データベースを設定する

IndexedDB データベースを使用する前に、データベースを開いて設定する必要があります。これは直接行うことができますが、IndexedDB は Promise が普及する前に標準化されたため、コールバック ベースのインターフェースは使いにくい場合があります。代わりに、IndexedDB の非常に小さな Promise ラッパーである idb を使用します。まず、js/main.js にインポートします。

import { openDB } from 'idb';

次に、DOMContentLoaded イベント リスナーの先頭に次の設定コードを追加します。

// Set up the database
const db = await openDB('settings-store', 1, {
  upgrade(db) {
    db.createObjectStore('settings');
  },
});

説明

ここでは、settings-store という名前の IndexedDB データベースが作成されます。バージョンは 1 に初期化され、settings というオブジェクト ストアで初期化されます。これは最も基本的な種類のオブジェクト ストア（シンプルな Key-Value ペア）ですが、必要に応じてより複雑なオブジェクト ストアを作成することもできます。オブジェクト ストアを初期化しないと、データを格納する場所がなくなるため、テーブルのないデータベースを作成するようなものです。

4. 更新時にエディタの状態を保存する

データベースが初期化されたので、コンテンツを保存しましょう。エディタは、エディタでコンテンツが更新されるたびに呼び出す関数を渡すことができる onUpdate メソッドを公開します。タップしてデータベースに変更を追加するのに最適な場所です。これを行うには、js/main.js の defaultText 宣言の直前に次のコードを追加します。

// Save content to database on edit
editor.onUpdate(async (content) => {
  await db.put('settings', content, 'content');
});

説明

db は、以前に開いた IndexedDB データベースです。put メソッドを使用すると、そのデータベースのオブジェクト ストア内のエントリを作成または更新できます。最初の引数は使用するデータベース内のオブジェクト ストア、2 番目の引数は保存する値、3 番目の引数は値から明らかでない場合に値を保存するキーです（この例では、データベースに指定されたキーが含まれていないため、明らかではありません）。非同期であるため、async/await でラップされています。

5. 読み込み時に状態を取得する

最後に、ユーザーの進行中の作業を復元するには、エディタの読み込み時に読み込む必要があります。エディタには、コンテンツを設定するための setContent メソッドが用意されています。現在、defaultText の値に設定するために使用されています。代わりにユーザーの以前の作業を読み込むには、次のように更新します。

editor.setContent((await db.get('settings', 'content')) || defaultText);

説明

エディタを defaultText の値に設定するだけでなく、settings-store IndexedDB データベースの settings オブジェクト ストアから content キーを取得しようとします。その値が存在する場合は、その値が使用されます。そうでない場合は、デフォルトのテキストが使用されます。

6. 夜間モードの状態を設定および取得する

IndexedDB に慣れたら、次のコードを js/main.js の末尾に追加して更新し、ユーザーの夜間モードの設定が変更されたときに保存し、夜間モードの初期化時にその設定を読み込むようにします。

// Set up night mode toggle
const { NightMode } = await import('./app/night-mode.js');
new NightMode(
  document.querySelector('#mode'),
  async (mode) => {
    editor.setTheme(mode);
    // Save the night mode setting when changed
  },
  // Retrieve the night mode setting on initialization
);

7. 完了

IndexedDB のオブジェクト ストアからデータを保存して読み込む方法を学びました。

このシリーズの次の Codelab は、タブからタスクバーへです。