Progressive Web App: IndexedDB

1. Selamat Datang

Di lab ini, Anda akan mencadangkan dan memulihkan data klien ke IndexedDB. Codelab ini adalah ketiga dalam serangkaian codelab pendamping untuk workshop Progressive Web App. Codelab sebelumnya adalah Bekerja dengan Workbox. Ada lima codelab lagi dalam seri ini.

Yang akan Anda pelajari

  • Membuat database dan penyimpanan objek IndexedDB menggunakan idb
  • Menambahkan dan mengambil item ke penyimpanan objek

Yang perlu Anda ketahui

  • JavaScript dan Promise

Yang akan Anda butuhkan

2. Memulai Persiapan

Mulai dengan meng-clone atau mendownload kode awal yang diperlukan untuk menyelesaikan codelab ini:

Jika Anda meng-clone repo, pastikan Anda berada di cabang pwa03--indexeddb. File ZIP juga berisi kode untuk cabang tersebut.

Basis kode ini memerlukan Node.js 14 atau yang lebih baru. Setelah kode tersedia, jalankan npm ci dari command line di folder kode untuk menginstal semua dependensi yang Anda perlukan. Kemudian, jalankan npm start untuk memulai server pengembangan codelab.

File README.md kode sumber memberikan penjelasan untuk semua file yang didistribusikan. Selain itu, berikut adalah file utama yang sudah ada dan akan Anda gunakan selama codelab ini:

File Utama

  • js/main.js - File JavaScript aplikasi utama

3. Menyiapkan Database

Sebelum database IndexedDB dapat digunakan, database tersebut harus dibuka dan disiapkan. Meskipun Anda dapat melakukannya secara langsung, karena IndexedDB distandardisasi sebelum Promises menjadi populer, antarmuka berbasis callback-nya dapat sulit digunakan. Sebagai gantinya, kita akan menggunakan idb, wrapper Promise yang sangat kecil untuk IndexedDB. Untuk memulai, impor terlebih dahulu ke js/main.js:

import { openDB } from 'idb';

Kemudian, tambahkan kode penyiapan berikut ke bagian atas pemroses peristiwa DOMContentLoaded:

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

Penjelasan

Di sini, database IndexedDB bernama settings-store dibuat. Versinya diinisialisasi ke 1 dan diinisialisasi dengan penyimpanan objek yang disebut settings. Ini adalah jenis penyimpanan objek yang paling dasar, pasangan nilai kunci sederhana, tetapi penyimpanan objek yang lebih kompleks dapat dibuat sesuai kebutuhan. Tanpa inisialisasi penyimpanan objek ini, tidak akan ada tempat untuk memasukkan data, jadi tidak memasukkan inisialisasi ini sama seperti membuat database tanpa tabel.

4. Menyimpan Status Editor saat Pembaruan

Setelah database diinisialisasi, saatnya menyimpan konten ke database tersebut. Editor menampilkan metode onUpdate yang memungkinkan Anda meneruskan fungsi yang akan dipanggil setiap kali konten diperbarui di editor. Ini adalah tempat yang tepat untuk mengetuk dan menambahkan perubahan ke database. Untuk melakukannya, tambahkan kode berikut tepat sebelum deklarasi defaultText di js/main.js:

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

Penjelasan

db adalah database IndexedDB yang dibuka sebelumnya. Metode put memungkinkan entri di penyimpanan objek dalam database tersebut dibuat atau diperbarui. Argumen pertama adalah penyimpanan objek dalam database yang akan digunakan, argumen kedua adalah nilai yang akan disimpan, dan argumen ketiga adalah kunci untuk menyimpan nilai jika tidak jelas dari nilai (dalam hal ini tidak karena database kita tidak menyertakan kunci yang ditentukan). Karena bersifat asinkron, fungsi ini disertakan dalam async/await.

5. Mengambil Status saat Pemuatan

Terakhir, untuk memulihkan pekerjaan pengguna yang sedang berlangsung, pekerjaan tersebut harus dimuat saat editor dimuat. Editor menyediakan metode setContent untuk melakukan hal tersebut, yaitu menyetel kontennya. Saat ini digunakan untuk menyetelnya ke nilai defaultText. Perbarui dengan kode berikut untuk memuat pekerjaan pengguna sebelumnya:

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

Penjelasan

Daripada hanya menyetel editor ke nilai defaultText, editor kini mencoba mendapatkan kunci content dari penyimpanan objek settings di database IndexedDB settings-store. Jika nilai tersebut ada, nilai tersebut akan digunakan. Jika tidak, teks default akan digunakan.

6. Menetapkan dan Mengambil Status Mode Malam

Setelah Anda memahami IndexedDB, tambahkan kode berikut ke bagian bawah js/main.js dan perbarui untuk menyimpan preferensi mode malam pengguna saat berubah, dan memuat preferensi tersebut saat mode malam diinisialisasi.

// 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. Selamat!

Anda telah mempelajari cara menyimpan dan memuat data dari penyimpanan objek di IndexedDB.

Codelab berikutnya dalam seri ini adalah Dari Tab ke Taskbar