Progresif Web Uygulamaları: IndexedDB

1. Hoş geldiniz

Bu laboratuvarda, istemci verilerini IndexedDB'ye yedekleyip geri yükleyeceksiniz. Bu codelab, Progresif Web Uygulaması atölyesi ile ilgili bir dizi yardımcı codelab'in üçüncüsüdür. Önceki codelab'in başlığı Working with Workbox (Workbox ile Çalışma) idi. Bu seride beş codelab daha var.

Neler öğreneceksiniz?

  • idb kullanarak IndexedDB veritabanı ve nesne deposu oluşturma
  • Nesne deposuna öğe ekleme ve öğe alma

Bilmeniz gerekenler

  • JavaScript ve Promises

İhtiyacınız olanlar

2. Hazırlanın

Bu codelab'i tamamlamak için gereken başlangıç kodunu klonlayarak veya indirerek başlayın:

Depoyu klonlarsanız pwa03--indexeddb dalında olduğunuzdan emin olun. Zip dosyası, söz konusu şubenin kodunu da içerir.

Bu kod tabanı için Node.js 14 veya sonraki bir sürümü gerekir. Kod kullanılabilir hale geldiğinde, ihtiyacınız olan tüm bağımlılıkları yüklemek için komut satırından kodun klasöründe npm ci komutunu çalıştırın. Ardından, kod laboratuvarı için geliştirme sunucusunu başlatmak üzere npm start komutunu çalıştırın.

Kaynak kodunun README.md dosyası, dağıtılan tüm dosyalarla ilgili açıklama sağlar. Ayrıca, bu codelab boyunca kullanacağınız mevcut temel dosyalar şunlardır:

Önemli Dosyalar

  • js/main.js - Ana uygulama JavaScript dosyası

3. Veritabanı oluşturma

IndexedDB veritabanının kullanılabilmesi için açılıp ayarlanması gerekir. Bu işlemi doğrudan yapabilirsiniz ancak IndexedDB, Promises'in öne çıkmasından önce standartlaştırıldığı için geri çağırmaya dayalı arayüzünün kullanımı zor olabilir. Bunun yerine, IndexedDB için çok küçük bir Promise sarmalayıcısı olan idb'yi kullanacağız. Başlamak için önce js/main.js'ya aktarın:

import { openDB } from 'idb';

Ardından, aşağıdaki kurulum kodunu DOMContentLoaded etkinlik işleyicisinin en üstüne ekleyin:

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

Açıklama

Burada, settings-store adlı bir IndexedDB veritabanı oluşturulur. Sürümü 1 olarak başlatılır ve settings adlı bir nesne deposuyla başlatılır. Bu, en temel nesne deposu türüdür ve basit anahtar/değer çiftlerinden oluşur. Ancak gerektiğinde daha karmaşık nesne depoları oluşturulabilir. Nesne deposunun bu şekilde başlatılmaması durumunda verilerin yerleştirileceği bir yer olmaz. Bu nedenle, bu kısmı atlamak tablosuz bir veritabanı oluşturmaya benzer.

4. Güncellemede Düzenleyici Durumunu Kaydet

Veritabanı başlatıldıktan sonra artık içeriği veritabanına kaydedebilirsiniz. Düzenleyici, içerik düzenleyicide güncellendiğinde çağrılacak bir işlevi iletmenize olanak tanıyan bir onUpdate yöntemi sunar. Değişiklikleri veritabanına eklemek için mükemmel bir yerdir. Bunu yapmak için js/main.js içinde defaultText bildiriminden hemen önce aşağıdaki kodu ekleyin:

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

Açıklama

db daha önce açılmış IndexedDB veritabanıdır. put yöntemi, söz konusu veritabanındaki bir nesne deposunda girişlerin oluşturulmasına veya güncellenmesine olanak tanır. İlk bağımsız değişken, kullanılacak veritabanındaki nesne deposu, ikinci bağımsız değişken depolanacak değer ve üçüncü bağımsız değişken, değerden net bir şekilde anlaşılmıyorsa (bu durumda veritabanımız belirtilen anahtarları içermediğinden anlaşılmıyor) değeri kaydetmek için kullanılacak anahtardır. Asenkron olduğu için async/await içine alınır.

5. Yüklemede Durumu Alma

Son olarak, kullanıcının devam eden çalışmasını kurtarmak için düzenleyici yüklendiğinde çalışmanın da yüklenmesi gerekir. Düzenleyici, tam da bunu yapmak için bir setContent yöntemi sunar: içeriğini ayarlamak. Şu anda defaultText değerine ayarlamak için kullanılmaktadır. Kullanıcının önceki çalışmalarını yüklemek için aşağıdakiyle güncelleyin:

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

Açıklama

Düzenleyiciyi yalnızca defaultText değerine ayarlamak yerine, artık settings-store IndexedDB veritabanındaki settings nesne deposundan content anahtarını almaya çalışıyor. Bu değer varsa kullanılır. Aksi takdirde varsayılan metin kullanılır.

6. Gece Modu Durumunu Ayarlama ve Alma

IndexedDB'yi kullanmaya alıştığınıza göre js/main.js dosyasının en altına aşağıdaki kodu ekleyin ve gece modu tercihi değiştiğinde kullanıcının bu tercihini kaydedecek, gece modu başlatıldığında ise bu tercihi yükleyecek şekilde güncelleyin.

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

IndexedDB'deki bir nesne deposundan verileri nasıl kaydedeceğinizi ve yükleyeceğinizi öğrendiniz.

Serideki bir sonraki codelab From Tab to Taskbar'dır.