JavaScript Academy · บทเรียน

การซิงค์และการอัปเดตเบื้องหลัง

อัปเดตแคชและซิงค์เมื่อกลับมาออนไลน์

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

ทำให้ cache เป็นข้อมูลล่าสุด

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

ชื่อ cache ที่มีเวอร์ชัน

กลไกการอัปเดตที่ง่ายที่สุดคือการใช้ชื่อ cache ที่มีเวอร์ชัน การเพิ่มหมายเลขเวอร์ชันจะสร้าง cache ใหม่ โดยปล่อย cache เก่าไว้ให้ล้างตอนเปิดใช้งาน

const CACHE = 'app-v2'; // was 'app-v1'
self.addEventListener('install', (e) => {
  e.waitUntil(
    caches.open(CACHE).then(c => c.addAll(ASSETS))
  );
});

การล้าง cache เก่า

ในเหตุการณ์ activate ให้แสดงชื่อ cache ทั้งหมด แล้วลบชื่อที่ไม่ใช่เวอร์ชันปัจจุบัน การทำเช่นนี้ช่วยคืนพื้นที่จัดเก็บและลบทรัพยากรเก่า

self.addEventListener('activate', (e) => {
  e.waitUntil(
    caches.keys().then(names =>
      Promise.all(
        names.filter(n => n !== CACHE)
             .map(n => caches.delete(n))
      )
    )
  );
});

เวิร์กเกอร์ที่กำลังรอ

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

skipWaiting

self.skipWaiting() สั่งให้เวิร์กเกอร์ที่กำลังรอเปิดใช้งานทันทีและเข้าควบคุมโดยไม่ต้องรอให้แท็บปิด เรียกใช้ใน install เมื่อคุณต้องการให้การอัปเดตมีผลทันที

self.addEventListener('install', (event) => {
  self.skipWaiting(); // activate as soon as installed
});

clients.claim

หลังจากเปิดใช้งานแล้ว self.clients.claim() ช่วยให้เวิร์กเกอร์ใหม่เข้าควบคุมหน้าที่เปิดอยู่แล้วได้ทันที แทนที่จะควบคุมได้เฉพาะการนำทางครั้งต่อไป

self.addEventListener('activate', (event) => {
  event.waitUntil(self.clients.claim());
});

การตรวจหาการอัปเดตจากหน้าเว็บ

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

reg.addEventListener('updatefound', () => {
  const sw = reg.installing;
  sw.addEventListener('statechange', () => {
    if (sw.state === 'installed') {
      console.log('new version available - reload to update');
    }
  });
});

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

API ซิงก์เบื้องหลัง ช่วยเลื่อนการดำเนินการ เช่น การส่งแบบฟอร์ม จนกว่าอุปกรณ์จะเชื่อมต่อได้ คุณลงทะเบียนแท็กการซิงก์ แล้วเบราว์เซอร์จะส่งเหตุการณ์ sync เมื่อเชื่อมต่ออินเทอร์เน็ต

// In the page, after queuing data:
reg.sync.register('send-messages')
  .then(() => console.log('sync scheduled'));

การจัดการเหตุการณ์ sync

ในเซอร์วิสเวิร์กเกอร์ ให้ฟังเหตุการณ์ sync และตรวจสอบแท็กให้ตรงกัน ใช้ waitUntil เพื่อให้เบราว์เซอร์คงเวิร์กเกอร์ไว้จนกว่าการลองใหม่จะเสร็จสิ้น

self.addEventListener('sync', (event) => {
  if (event.tag === 'send-messages') {
    event.waitUntil(sendQueuedMessages());
  }
});

รูปแบบเข้าคิวแล้วซิงก์

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

async function sendQueuedMessages() {
  const items = await readQueueFromIndexedDB();
  for (const item of items) {
    await fetch('/api/messages', {
      method: 'POST',
      body: JSON.stringify(item)
    });
  }
  await clearQueue();
}

ทบทวนการอัปเดตและการซิงก์

เมื่อนำคุณสมบัติเหล่านี้มาใช้ร่วมกัน แอปจะรับมือปัญหาได้ดีขึ้น: cache ที่มีเวอร์ชันและการล้างข้อมูลช่วยให้ทรัพยากรเป็นข้อมูลล่าสุด skipWaiting/clients.claim ควบคุมจังหวะการเผยแพร่ และการซิงก์เบื้องหลังช่วยให้ดำเนินการต่าง ๆ สำเร็จได้อย่างน่าเชื่อถือเมื่อผู้ใช้กลับมาออนไลน์

ตรวจสอบความเข้าใจ

ตรวจสอบความเข้าใจเกี่ยวกับการอัปเดตและการซิงก์เบื้องหลัง

สรุป

คุณได้เรียนรู้การซิงก์เบื้องหลังและการอัปเดตดังนี้:

ใช้ชื่อ cache ที่มีเวอร์ชัน และล้าง cache เก่าใน activate
skipWaiting และ clients.claim ควบคุมจังหวะการอัปเดต
ตรวจหาเวอร์ชันใหม่ผ่าน updatefound
การซิงก์เบื้องหลังจะเลื่อนการดำเนินการจนกว่าจะออนไลน์ผ่านเหตุการณ์ sync
เข้าคิวใน IndexedDB แล้วส่งรายการที่ค้างอยู่เมื่อซิงก์

คุณเรียนจบเรื่องเซอร์วิสเวิร์กเกอร์และการเก็บ cache แบบออฟไลน์แล้ว

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

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

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

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

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

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

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

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

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

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

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

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

การลงทะเบียน Service Worker
Cache API
กลยุทธ์การแคช
การซิงค์และการอัปเดตเบื้องหลัง

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