1. 환영합니다
이 실습에서는 클라이언트 데이터를 IndexedDB에 백업하고 복구합니다. 이 Codelab은 프로그레시브 웹 앱 워크숍의 동반 Codelab 시리즈의 세 번째입니다. 이전 Codelab은 Workbox 사용이었습니다. 이 시리즈에는 5개의 Codelab이 더 있습니다.
학습할 내용
idb를 사용하여 IndexedDB 데이터베이스 및 객체 스토어 만들기- 객체 스토어에 항목 추가 및 검색
유의해야 할 사항
- JavaScript 및 프로미스
필요한 항목
- IndexedDB를 지원하는 브라우저
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이라는 객체 저장소로 초기화됩니다. 가장 기본적인 종류의 객체 저장소인 단순한 키-값 쌍이지만 필요에 따라 더 복잡한 객체 저장소를 만들 수 있습니다. 객체 저장소를 초기화하지 않으면 데이터를 넣을 곳이 없으므로 여기에서 이를 생략하는 것은 테이블이 없는 데이터베이스를 만드는 것과 같습니다.
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 메서드를 사용하면 해당 데이터베이스의 객체 스토어에서 항목을 만들거나 업데이트할 수 있습니다. 첫 번째 인수는 사용할 데이터베이스의 객체 저장소이고, 두 번째 인수는 저장할 값이며, 세 번째 인수는 값에서 명확하지 않은 경우 값을 저장할 키입니다 (이 경우 데이터베이스에 지정된 키가 포함되지 않으므로 명확하지 않음). 비동기식이므로 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은 탭에서 작업 표시줄로입니다.