Service Worker یه JavaScript که در Background اجرا میشه و به سایت شما قدرت‌های خاصی میده: کار Offline، Push Notification، Background Sync.

Register

if ('serviceWorker' in navigator) {
  navigator.serviceWorker.register('/sw.js');
}

Lifecycle

Install → Activate → Idle → Fetch/Message

Install Event

self.addEventListener('install', event => {
  event.waitUntil(
    caches.open('v1').then(cache => cache.addAll(['/index.html']))
  );
});

Fetch Event

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

Cache Strategies

Cache First: static files
Network First: dynamic
Stale While Revalidate: تعادل

Update

Service Worker خودکار Update میشه.

Push Notification

self.addEventListener('push', event => {
  const options = { body: event.data.text() };
  event.waitUntil(self.registration.showNotification('Title', options));
});

Background Sync

Sync وقتی Online.

Debug

Chrome DevTools → Application → Service Workers

Scope

Service Worker فقط تو Scope خودش کار میکنه.

HTTPS اجباری

در localhost و HTTPS.

Workbox

کتابخانه Google. راحت‌تر.

Cache Management

Cache قدیمی رو حذف کنید.

Offline Fallback

صفحه Offline نشون بدید اگه لود نشد.

Web Push

Push Notification در وب.

سباهاست

هاست‌های سباهاست HTTPS دارن. برای Service Worker آماده.

جمع‌بندی

Service Worker پایه PWA و ابزار قدرتمند وب مدرن هست.