Implementasi Service Worker di JavaScript

Implementasi Service Worker di JavaScript

Service Worker adalah skrip JavaScript yang berjalan di background browser, terpisah dari halaman web utama. Service Worker memungkinkan fitur modern seperti:

  • Offline support
  • Caching resource
  • Push notifications
  • Background sync

Dengan Service Worker, web app bisa bekerja lebih cepat, responsif, dan dapat diakses bahkan tanpa koneksi internet.

1. Konsep Dasar Service Worker

1.1 Cara Kerja

  • Service Worker berjalan di luar main thread.
  • Tidak memiliki akses langsung ke DOM.
  • Berfungsi sebagai proxy antara jaringan dan aplikasi.
  • Lifecycle terdiri dari install → activate → fetch → sync.

1.2 Lifecycle Service Worker

  1. Register: Browser mendeteksi dan mendaftarkan service worker.
  2. Install: Service worker menginstal resource yang akan dicache.
  3. Activate: Service worker aktif, mengontrol halaman.
  4. Fetch: Menangani request jaringan, bisa intercept dan serve cached response.
  5. Update: Browser mengecek versi terbaru service worker.

2. Mendaftarkan Service Worker

File utama JavaScript, misal app.js:

if ('serviceWorker' in navigator) {
  window.addEventListener('load', () => {
    navigator.serviceWorker.register('/sw.js')
      .then(registration => {
        console.log('Service Worker terdaftar dengan scope:', registration.scope);
      })
      .catch(err => {
        console.log('Pendaftaran Service Worker gagal:', err);
      });
  });
}
  • sw.js adalah file Service Worker.
  • Scope default adalah folder tempat sw.js berada dan semua subfolder.

3. File Service Worker Dasar (sw.js)

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

// Install event
self.addEventListener('install', event => {
  console.log('[Service Worker] Install');
  event.waitUntil(
    caches.open(CACHE_NAME)
      .then(cache => {
        console.log('[Service Worker] Caching all files');
        return cache.addAll(urlsToCache);
      })
  );
});

// Activate event
self.addEventListener('activate', event => {
  console.log('[Service Worker] Activate');
  event.waitUntil(
    caches.keys().then(cacheNames => {
      return Promise.all(
        cacheNames.map(cacheName => {
          if (cacheName !== CACHE_NAME) {
            console.log('[Service Worker] Clearing old cache:', cacheName);
            return caches.delete(cacheName);
          }
        })
      );
    })
  );
});

// Fetch event
self.addEventListener('fetch', event => {
  console.log('[Service Worker] Fetching:', event.request.url);
  event.respondWith(
    caches.match(event.request)
      .then(response => {
        return response || fetch(event.request);
      })
  );
});

Penjelasan:

  1. Install: Mencache file penting agar aplikasi bisa diakses offline.
  2. Activate: Menghapus cache lama.
  3. Fetch: Intercept request; jika ada di cache → serve cached file, jika tidak → fetch dari jaringan.

4. Strategi Caching

4.1 Cache First (Static Assets)

  • File statis (CSS, JS, gambar) diambil dari cache terlebih dahulu.
  • Cocok untuk file jarang berubah.
event.respondWith(
  caches.match(event.request)
    .then(response => response || fetch(event.request))
);

4.2 Network First (Dynamic Content)

  • Untuk data API atau konten dinamis, coba ambil dari jaringan terlebih dahulu.
  • Jika gagal (offline), fallback ke cache.
event.respondWith(
  fetch(event.request)
    .then(response => {
      return caches.open(CACHE_NAME).then(cache => {
        cache.put(event.request, response.clone());
        return response;
      });
    })
    .catch(() => caches.match(event.request))
);

5. Contoh Kasus Nyata: Offline Web App

  • File penting dicache saat install (index.html, CSS, JS, logo).
  • Pengguna membuka web tanpa internet → halaman tetap tampil dari cache.
  • API data bisa menggunakan network first → selalu up-to-date, tapi fallback ke cache saat offline.

6. Update Service Worker

  1. Jika ada perubahan sw.js, browser akan mendeteksi versi baru.
  2. Service worker baru akan install → activate → replace service worker lama setelah tab web ditutup.

Tips: Tambahkan versi cache untuk menghindari cache lama:

const CACHE_NAME = 'my-site-cache-v2'; // ganti versi setiap update

7. Debugging dan Tools

  • Chrome DevTools → Application → Service Workers
    Bisa melihat status, unregister, update service worker.
  • Cache Storage: melihat file yang dicache.
  • Network → Offline mode: testing offline support.

8. Best Practices

  1. Selalu gunakan versioning untuk cache agar update file bisa dikenali.
  2. Batasi ukuran cache → jangan cache file terlalu besar.
  3. Gunakan network-first untuk API, cache-first untuk static assets.
  4. Hati-hati dengan fetch → jangan cache request sensitive (misal login atau data pribadi).
  5. Testing offline → gunakan DevTools Offline mode.
  6. Kombinasikan dengan Push Notification dan Background Sync untuk PWA lebih canggih.

9. Kesimpulan

Service Worker memungkinkan:

  • Offline-first experience
  • Faster load times
  • Control terhadap caching
  • Background sync dan push notification

Dengan implementasi yang tepat, web app menjadi lebih responsif, stabil, dan PWA-ready.

Related Posts