Vue Academy · บทเรียน

การรองรับออฟไลน์และการซิงค์เบื้องหลัง

การแคชการตอบกลับจาก API, IndexedDB สำหรับข้อมูลออฟไลน์ และการซิงค์เบื้องหลังสำหรับการดำเนินการที่เลื่อนออกไป

การรองรับออฟไลน์และการซิงค์เบื้องหลัง เป็นบทเรียน Vue Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 3 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน Vue Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส Vue Academy มีบทเรียนทั้งหมด 4 บทเรียน

แนวคิดออฟไลน์เป็นอันดับแรก

การรองรับออฟไลน์อย่างแท้จริงหมายความว่าแอปยังทำงานต่อได้โดยไม่ใช้เครือข่าย การอ่านข้อมูลมาจากที่จัดเก็บในเครื่อง ส่วนการเขียนข้อมูลจะถูกเข้าคิวไว้ แล้วซิงค์เมื่อการเชื่อมต่อกลับมา

IndexedDB สำหรับการจัดเก็บในเครื่อง

IndexedDB คือที่จัดเก็บข้อมูลขนาดใหญ่แบบมีโครงสร้างและทำงานแบบอะซิงโครนัสของเบราว์เซอร์ API ดิบของมันมีรายละเอียดมาก ดังนั้นแอปส่วนใหญ่จึงใช้ไลบรารีตัวห่อหุ้มขนาดเล็กอย่าง idb

npm install idb

เปิดฐานข้อมูลด้วย idb

openDB ส่งคืนตัวจัดการฐานข้อมูลที่ทำงานผ่านพรอมิส ให้กำหนดที่จัดเก็บออบเจ็กต์ในตัวเรียกกลับ upgrade

import { openDB } from "idb";

const db = await openDB("app-db", 1, {
  upgrade(db) {
    db.createObjectStore("todos", { keyPath: "id" });
    db.createObjectStore("outbox", { keyPath: "id", autoIncrement: true });
  }
});

อ่านและเขียนข้อมูล

ใช้ get, getAll และ put เพื่ออ่านและจัดเก็บระเบียน คำสั่งเหล่านี้ส่งคืนพรอมิสที่คุณสามารถรอผลได้

await db.put("todos", { id: 1, text: "Buy milk" });
const all = await db.getAll("todos");

ตรวจจับออฟไลน์ด้วย navigator.onLine

navigator.onLine เป็นค่าบูลีนที่ระบุสถานะการเชื่อมต่อ ให้อ่านค่านี้เพื่อเลือกการทำงานระหว่างเครือข่ายกับในเครื่อง

if (!navigator.onLine) {
  // work from IndexedDB only
}

ตอบสนองต่อเหตุการณ์การเชื่อมต่อ

หน้าต่างจะส่งเหตุการณ์ online และ offline ให้ผูกรีแอกทีฟรีฟเข้ากับเหตุการณ์เหล่านี้ เพื่อให้ส่วนติดต่อผู้ใช้สะท้อนสถานะได้แบบเรียลไทม์

import { ref, onMounted, onUnmounted } from "vue";

const online = ref(navigator.onLine);
const on = () => (online.value = true);
const off = () => (online.value = false);
onMounted(() => {
  window.addEventListener("online", on);
  window.addEventListener("offline", off);
});
onUnmounted(() => {
  window.removeEventListener("online", on);
  window.removeEventListener("offline", off);
});

เข้าคิวการเปลี่ยนแปลงเมื่อออฟไลน์

เมื่อมีการเขียนข้อมูลขณะออฟไลน์ ให้จัดเก็บข้อมูลนั้นไว้ในที่จัดเก็บกล่องขาออกแทนการส่งข้อมูล ส่วนส่วนติดต่อผู้ใช้จะอัปเดตเชิงคาดการณ์จากสถานะในเครื่อง

async function saveTodo(todo) {
  await db.put("todos", todo);
  if (!navigator.onLine) {
    await db.add("outbox", { type: "saveTodo", payload: todo });
  } else {
    await api.save(todo);
  }
}

ซิงค์เมื่อเชื่อมต่ออีกครั้ง

เมื่อเหตุการณ์ online ทำงาน ให้ระบายข้อมูลออกจากกล่องขาออก โดยเล่นการเปลี่ยนแปลงที่เข้าคิวไว้แต่ละรายการกับเซิร์ฟเวอร์ แล้วล้างรายการเหล่านั้น

async function flushOutbox() {
  const items = await db.getAll("outbox");
  for (const item of items) {
    await api.send(item);
    await db.delete("outbox", item.id);
  }
}
window.addEventListener("online", flushOutbox);

API การซิงค์เบื้องหลัง

หากต้องการซิงค์ต่อแม้ปิดแท็บแล้ว API การซิงค์เบื้องหลังของ service worker จะลงทะเบียนแท็กการซิงค์ ซึ่งเบราว์เซอร์จะเรียกใช้เมื่อการเชื่อมต่อกลับมา

const reg = await navigator.serviceWorker.ready;
await reg.sync.register("flush-outbox");

จัดการการซิงค์ใน Worker

service worker จะรับฟังเหตุการณ์ sync และเรียกใช้ตรรกะการระบายข้อมูลในเบื้องหลัง

// service worker
self.addEventListener("sync", (event) => {
  if (event.tag === "flush-outbox") {
    event.waitUntil(flushOutbox());
  }
});

ข้อควรพิจารณาเกี่ยวกับความขัดแย้ง

การเล่นรายการเขียนข้อมูลที่เข้าคิวซ้ำอาจขัดแย้งกับการเปลี่ยนแปลงบนเซิร์ฟเวอร์ได้ โปรดใช้หมายเลขรุ่น การประทับเวลา หรือกฎให้การเขียนครั้งล่าสุดมีผล และแจ้งความขัดแย้งที่ยังแก้ไขไม่ได้ให้ผู้ใช้ทราบ

ตรวจสอบอย่างรวดเร็ว

ควรจัดการการเขียนข้อมูลอย่างไรขณะที่แอปออฟไลน์

สรุปทบทวน

การรองรับการทำงานออฟไลน์จะจัดเก็บข้อมูลใน IndexedDB (ผ่านไลบรารี idb) ตรวจจับการเชื่อมต่อด้วย navigator.onLine และเหตุการณ์ online/offline เข้าคิวการเปลี่ยนแปลงข้อมูลไว้ในกล่องส่งออกขณะออฟไลน์ และซิงค์ข้อมูลเมื่อเชื่อมต่ออีกครั้ง โดยอาจใช้ API การซิงค์เบื้องหลังของตัวทำงานบริการเพิ่มเติมก็ได้ โปรดวางแผนรับมือความขัดแย้งเมื่อเล่นรายการเขียนข้อมูลที่เข้าคิวซ้ำ

คำถามที่พบบ่อย

บทเรียน “การรองรับออฟไลน์และการซิงค์เบื้องหลัง” ฟรีหรือไม่

ใช่ — ข้อความเต็มของ “การรองรับออฟไลน์และการซิงค์เบื้องหลัง” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส Vue Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส Vue Academy มีบทเรียนทั้งหมด 4 บทเรียน

คุณจะเรียนรู้อะไรในบทเรียน “การรองรับออฟไลน์และการซิงค์เบื้องหลัง”

การแคชการตอบกลับจาก API, IndexedDB สำหรับข้อมูลออฟไลน์ และการซิงค์เบื้องหลังสำหรับการดำเนินการที่เลื่อนออกไป คุณปฏิบัติ Vue Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน

คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน Vue Academy หรือไม่

ไม่จำเป็นต้องมีประสบการณ์มาก่อน Vue Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 3 จากทั้งหมด 4 บทเรียน

บทเรียน “การรองรับออฟไลน์และการซิงค์เบื้องหลัง” ใช้เวลานานแค่ไหน

บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย

ฉันเขียนและรันโค้ดในบทเรียน Vue Academy นี้ได้ไหม

ได้ บทเรียน Vue Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ

บทเรียนทั้งหมดในหลักสูตรนี้

การตั้งค่า vite-plugin-pwa
กลยุทธ์ Service Worker
การรองรับออฟไลน์และการซิงค์เบื้องหลัง
การแจ้งเตือนแบบพุชใน Vue PWA

← กลับไปที่ Vue Academy