วิธีใช้ Service Worker ทำ Offline Web App

Sharing is caring!

บทนำ

การสร้าง Web App ที่สามารถใช้งานได้แม้ไม่มีอินเทอร์เน็ตถือเป็นหนึ่งในคุณสมบัติสำคัญของ Progressive Web App (PWA) ซึ่งทำได้โดยใช้ Service Worker บทความนี้จะพาคุณเข้าใจพื้นฐานของ Service Worker พร้อมตัวอย่างการทำ Offline Web App ด้วย JavaScript อย่างง่าย

Service Worker คืออะไร?

Service Worker เป็น JavaScript ที่ทำงานแยกจาก main thread ของเว็บแอป และสามารถ intercept network request, เก็บ cache และควบคุมการโหลด asset ได้

คุณสมบัติหลัก:

• Intercept และจัดการ request (เช่น เปลี่ยนจาก fetch online → cache)
• ทำงานแม้ไม่มีหน้าเว็บเปิดอยู่ (background sync, push notification)
• เปิดทางให้เว็บทำงานแบบ offline ได้

โครงสร้างการทำงานของ Service Worker

1. ลงทะเบียน (register)
2. ติดตั้ง (install)
3. เปิดใช้งาน (activate)
4. จัดการ fetch request และ cache

เริ่มต้นใช้งาน

1. ตรวจสอบว่า browser รองรับหรือไม่

if ('serviceWorker' in navigator) {
  navigator.serviceWorker.register('/sw.js')
    .then(reg => console.log('SW registered', reg))
    .catch(err => console.error('SW registration failed:', err));
}

2. สร้างไฟล์ sw.js (Service Worker)

const CACHE_NAME = 'offline-cache-v1';
const urlsToCache = ['/', '/index.html', '/styles.css', '/app.js'];

self.addEventListener('install', event => {
  event.waitUntil(
    caches.open(CACHE_NAME).then(cache => cache.addAll(urlsToCache))
  );
});

self.addEventListener('fetch', event => {
  event.respondWith(
    fetch(event.request).catch(() => caches.match(event.request))
  );
});

3. ตรวจสอบว่าไฟล์ถูก cache และดึงออกมาใช้เวลา offline

หลังจากโหลดเว็บครั้งแรก (online) และ Service Worker ติดตั้งแล้ว ครั้งถัดไปจะสามารถโหลดไฟล์จาก cache ได้แม้ไม่มีเน็ต

การจัดการ Cache อย่างมืออาชีพ

• ตั้งชื่อ cache พร้อมเวอร์ชัน: 'offline-cache-v1'
• ใน event activate ควรลบ cache เก่า

self.addEventListener('activate', event => {
  const cacheWhitelist = [CACHE_NAME];
  event.waitUntil(
    caches.keys().then(cacheNames => {
      return Promise.all(
        cacheNames.map(name => {
          if (!cacheWhitelist.includes(name)) {
            return caches.delete(name);
          }
        })
      );
    })
  );
});

ทดสอบ Offline Mode

1. เปิดเว็บบน Chrome
2. ไปที่ DevTools → Application → Service Workers
3. เช็ค “Offline” และลอง reload หน้า
4. ถ้าแสดงผลได้แปลว่าใช้ cache สำเร็จ

ข้อดีของการใช้ Service Worker

• ทำให้เว็บโหลดเร็วขึ้นจาก cache
• รองรับการใช้งานแบบ offline
• เป็นพื้นฐานของ PWA
• สามารถใช้ push notification และ background sync

ข้อควรระวัง

• Service Worker ทำงาน async เท่านั้น
• ใช้ HTTPS เท่านั้น (ยกเว้น localhost)
• ต้องจัดการ cache version เอง

สรุป

Service Worker เป็นเทคโนโลยีที่ทรงพลังในการพัฒนาเว็บให้สามารถทำงานแบบ offline, cache ได้, และมีประสิทธิภาพสูงขึ้น โดยสามารถเริ่มต้นใช้งานได้ด้วย JavaScript ไม่กี่บรรทัด และเป็นหนึ่งในองค์ประกอบสำคัญของ Progressive Web App (PWA)

บทความนี้ใช้เวลาอ่านประมาณ 10 – 15 นาที เขียนโดยทีมงาน poolsawat.com