1. ยินดีต้อนรับ
ในแล็บนี้ คุณจะได้สำรองและกู้คืนข้อมูลไคลเอ็นต์ไปยัง IndexedDB นี่คือ Codelab ที่สามในชุด Codelab ประกอบสำหรับเวิร์กชอป Progressive Web App Codelab ก่อนหน้านี้คือการทำงานกับ Workbox ยังมี Codelab อีก 5 รายการในชุดนี้
สิ่งที่คุณจะได้เรียนรู้
- สร้างฐานข้อมูล IndexedDB และที่เก็บออบเจ็กต์โดยใช้
idb - เพิ่มและดึงข้อมูลรายการไปยังที่เก็บข้อมูลออบเจ็กต์
สิ่งที่ควรทราบ
- JavaScript และ Promise
สิ่งที่คุณจะต้องมี
- เบราว์เซอร์ที่รองรับ IndexedDB
2. เตรียมตัว
เริ่มต้นด้วยการโคลนหรือดาวน์โหลดโค้ดเริ่มต้นที่จำเป็นต่อการทำ Codelab นี้ให้เสร็จสมบูรณ์
หากโคลนที่เก็บ โปรดตรวจสอบว่าคุณอยู่ในสาขา pwa03--indexeddb ไฟล์ ZIP มีโค้ดสำหรับสาขานั้นด้วย
โค้ดเบสนี้ต้องใช้ Node.js 14 ขึ้นไป เมื่อมีโค้ดแล้ว ให้เรียกใช้ npm ci จากบรรทัดคำสั่งในโฟลเดอร์ของโค้ดเพื่อติดตั้งการอ้างอิงทั้งหมดที่คุณต้องใช้ จากนั้นเรียกใช้ npm start เพื่อเริ่มเซิร์ฟเวอร์สำหรับพัฒนาสำหรับโค้ดแล็บ
ไฟล์ README.md ของซอร์สโค้ดจะอธิบายไฟล์ที่เผยแพร่ทั้งหมด นอกจากนี้ ไฟล์สำคัญที่มีอยู่ซึ่งคุณจะต้องใช้ตลอดทั้งโค้ดแล็บนี้มีดังนี้
ไฟล์สำคัญ
js/main.js- ไฟล์ JavaScript ของแอปพลิเคชันหลัก
3. ตั้งค่าฐานข้อมูล
คุณต้องเปิดและตั้งค่าฐานข้อมูล IndexedDB ก่อนจึงจะใช้งานได้ แม้ว่าคุณจะทำเช่นนี้ได้โดยตรง แต่เนื่องจาก IndexedDB ได้รับการกำหนดมาตรฐานก่อนที่ Promise จะโดดเด่น อินเทอร์เฟซที่อิงตามการเรียกกลับจึงอาจใช้งานได้ยาก แต่เราจะใช้ idb ซึ่งเป็น Wrapper ของ Promise ขนาดเล็กมากสำหรับ IndexedDB หากต้องการเริ่มต้น ให้นำเข้าไฟล์ไปยัง js/main.js ก่อนโดยทำดังนี้
import { openDB } from 'idb';
จากนั้นเพิ่มโค้ดการตั้งค่าต่อไปนี้ที่ด้านบนของ DOMContentLoaded Listener เหตุการณ์
// Set up the database
const db = await openDB('settings-store', 1, {
upgrade(db) {
db.createObjectStore('settings');
},
});
คำอธิบาย
ในที่นี้ ระบบจะสร้างฐานข้อมูล IndexedDB ชื่อ settings-store ระบบจะเริ่มต้นเวอร์ชันเป็น 1 และเริ่มต้นด้วยที่เก็บออบเจ็กต์ที่ชื่อ settings ที่เก็บออบเจ็กต์ประเภทนี้เป็นประเภทพื้นฐานที่สุด ซึ่งก็คือคู่คีย์-ค่าแบบง่ายๆ แต่คุณก็สร้างที่เก็บออบเจ็กต์ที่ซับซ้อนกว่านี้ได้ตามต้องการ หากไม่มีการเริ่มต้นที่เก็บออบเจ็กต์นี้ จะไม่มีที่เก็บข้อมูล ดังนั้นการละเว้นขั้นตอนนี้จึงเหมือนกับการสร้างฐานข้อมูลที่ไม่มีตาราง
4. บันทึกสถานะเอดิเตอร์เมื่ออัปเดต
เมื่อเริ่มต้นฐานข้อมูลแล้ว ก็ถึงเวลาบันทึกเนื้อหาลงในฐานข้อมูล เอดิเตอร์จะแสดงเมธอด onUpdate ที่ช่วยให้คุณส่งฟังก์ชันที่จะเรียกใช้เมื่อใดก็ตามที่มีการอัปเดตเนื้อหาในเอดิเตอร์ ซึ่งเป็นที่ที่เหมาะแก่การแตะเพื่อเพิ่มการเปลี่ยนแปลงลงในฐานข้อมูล โดยให้เพิ่มโค้ดต่อไปนี้ก่อนประกาศ defaultText ใน js/main.js
// 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 ตอนนี้ระบบจะพยายามรับคีย์ content จากที่เก็บออบเจ็กต์ settings ในฐานข้อมูล settings-store IndexedDB หากมีค่าดังกล่าว ระบบจะใช้ค่านั้น หากไม่มี ระบบจะใช้ข้อความเริ่มต้น
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 ถัดไปในชุดนี้คือ From Tab to Taskbar