Service Worker: Membangun Aplikasi Web Offline-First

Di dunia saat ini, pengguna mengharapkan aplikasi web yang cepat, andal, dan dapat diakses, bahkan ketika konektivitas jaringan terbatas atau tidak tersedia. Di sinilah konsep desain "offline-first" berperan. Service worker adalah teknologi canggih yang memungkinkan pengembang membangun aplikasi web yang berfungsi dengan lancar secara offline, memberikan pengalaman pengguna yang unggul.

Apa itu Service Worker?

Service worker adalah file JavaScript yang berjalan di latar belakang, terpisah dari utas browser utama. Ia bertindak sebagai proksi antara aplikasi web dan jaringan, mencegat permintaan jaringan dan mengelola caching. Service worker dapat menangani tugas-tugas seperti:

Caching aset statis (HTML, CSS, JavaScript, gambar)
Menyajikan konten yang di-cache saat offline
Notifikasi push
Sinkronisasi latar belakang

Pentingnya, service worker dikendalikan oleh browser, bukan oleh halaman web. Hal ini memungkinkan mereka untuk berfungsi bahkan ketika pengguna telah menutup tab atau jendela browser.

Mengapa Offline-First?

Membangun aplikasi web offline-first menawarkan banyak manfaat:

Peningkatan Performa: Dengan melakukan caching pada aset statis dan menyajikannya langsung dari cache, service worker secara signifikan mengurangi waktu muat, menghasilkan pengalaman pengguna yang lebih cepat dan responsif.
Keandalan yang Ditingkatkan: Bahkan ketika jaringan tidak tersedia, pengguna masih dapat mengakses konten yang di-cache, memastikan bahwa aplikasi tetap fungsional.
Peningkatan Keterlibatan: Fungsionalitas offline membuat aplikasi lebih berguna dan dapat diakses, yang mengarah pada peningkatan keterlibatan dan retensi pengguna.
Pengurangan Konsumsi Data: Dengan melakukan caching aset, service worker mengurangi jumlah data yang perlu diunduh melalui jaringan, yang sangat bermanfaat bagi pengguna dengan paket data terbatas atau koneksi internet lambat di area dengan infrastruktur yang kurang berkembang. Sebagai contoh, di banyak bagian Afrika dan Amerika Selatan, biaya data bisa menjadi penghalang signifikan bagi pengguna internet. Desain offline-first membantu mengurangi hal ini.
Peningkatan SEO: Mesin pencari menyukai situs web yang cepat dan andal, jadi membangun aplikasi offline-first dapat meningkatkan peringkat mesin pencari Anda.

Cara Kerja Service Worker

Siklus hidup service worker terdiri dari beberapa tahap:

Registrasi: Service worker didaftarkan ke browser, menentukan cakupan aplikasi yang akan dikontrolnya.
Instalasi: Service worker diinstal, di mana biasanya ia melakukan caching aset statis.
Aktivasi: Service worker diaktifkan dan mengambil alih kendali aplikasi web. Ini mungkin melibatkan pembatalan pendaftaran service worker lama dan membersihkan cache lama.
Idle: Service worker tetap dalam keadaan diam (idle), menunggu permintaan jaringan atau peristiwa lainnya.
Fetch: Ketika permintaan jaringan dibuat, service worker mencegatnya dan dapat menyajikan konten yang di-cache atau mengambil sumber daya dari jaringan.

Menerapkan Offline-First dengan Service Worker: Panduan Langkah-demi-Langkah

Berikut adalah contoh dasar cara menerapkan fungsionalitas offline-first menggunakan service worker:

Langkah 1: Daftarkan Service Worker

Di file JavaScript utama Anda (misalnya, `app.js`):


if ('serviceWorker' in navigator) {
  navigator.serviceWorker.register('/service-worker.js')
    .then(function(registration) {
      console.log('Service Worker terdaftar dengan cakupan:', registration.scope);
    })
    .catch(function(error) {
      console.log('Pendaftaran Service Worker gagal:', error);
    });
}

Kode ini memeriksa apakah browser mendukung service worker dan mendaftarkan file `service-worker.js`. Cakupan menentukan URL mana yang akan dikendalikan oleh service worker.

Langkah 2: Buat File Service Worker (service-worker.js)

Buat file bernama `service-worker.js` dengan kode berikut:


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

self.addEventListener('install', function(event) {
  // Lakukan langkah-langkah instalasi
  event.waitUntil(
    caches.open(CACHE_NAME)
      .then(function(cache) {
        console.log('Cache dibuka');
        return cache.addAll(urlsToCache);
      })
  );
});

self.addEventListener('fetch', function(event) {
  event.respondWith(
    caches.match(event.request)
      .then(function(response) {
        // Cache ditemukan - kembalikan respons
        if (response) {
          return response;
        }

        // PENTING: Gandakan permintaan (request).
        // Sebuah permintaan adalah stream dan hanya dapat digunakan sekali. Karena kita menggunakannya
        // sekali oleh cache dan sekali oleh browser untuk fetch, kita perlu menggandakan respons.
        var fetchRequest = event.request.clone();

        return fetch(fetchRequest).then(
          function(response) {
            // Periksa apakah kita menerima respons yang valid
            if(!response || response.status !== 200 || response.type !== 'basic') {
              return response;
            }

            // PENTING: Gandakan respons.
            // Sebuah respons adalah stream dan perlu digunakan hanya sekali.
            var responseToCache = response.clone();

            caches.open(CACHE_NAME)
              .then(function(cache) {
                cache.put(event.request, responseToCache);
              });

            return response;
          }
        );
      })
    );
});

self.addEventListener('activate', function(event) {

  var cacheWhitelist = [CACHE_NAME];

  event.waitUntil(
    caches.keys().then(function(cacheNames) {
      return Promise.all(
        cacheNames.map(function(cacheName) {
          if (cacheWhitelist.indexOf(cacheName) === -1) {
            return caches.delete(cacheName);
          }
        })
      );
    })
  );
});

Kode ini melakukan hal berikut:

Mendefinisikan `CACHE_NAME` dan sebuah array `urlsToCache`.
Selama event `install`, ia membuka cache dan menambahkan URL yang ditentukan ke dalamnya.
Selama event `fetch`, ia mencegat permintaan jaringan. Jika sumber daya yang diminta ada di dalam cache, ia mengembalikan versi yang di-cache. Jika tidak, ia mengambil sumber daya dari jaringan, menyimpannya di cache, dan mengembalikan responsnya.
Selama event `activate`, ia menghapus cache lama untuk menjaga agar ukuran cache tetap terkendali.

Langkah 3: Uji Fungsionalitas Offline Anda

Untuk menguji fungsionalitas offline Anda, Anda dapat menggunakan alat pengembang browser. Di Chrome, buka DevTools, buka tab "Application", dan pilih "Service Workers." Anda kemudian dapat menyimulasikan mode offline dengan mencentang kotak "Offline".

Teknik Service Worker Tingkat Lanjut

Setelah Anda memiliki pemahaman dasar tentang service worker, Anda dapat menjelajahi teknik yang lebih canggih untuk menyempurnakan aplikasi offline-first Anda:

Strategi Caching

Ada beberapa strategi caching yang dapat Anda gunakan, tergantung pada jenis sumber daya dan kebutuhan aplikasi Anda:

Cache First: Selalu sajikan konten dari cache, dan hanya ambil dari jaringan jika sumber daya tidak ditemukan di cache.
Network First: Selalu coba ambil konten dari jaringan terlebih dahulu, dan hanya gunakan cache sebagai cadangan.
Cache then Network: Sajikan konten dari cache segera, lalu perbarui cache dengan versi terbaru dari jaringan. Ini memberikan pemuatan awal yang cepat dan memastikan bahwa pengguna pada akhirnya selalu memiliki konten yang paling mutakhir.
Stale-while-revalidate: Mirip dengan Cache then Network, tetapi memperbarui cache di latar belakang tanpa memblokir pemuatan awal.
Network Only: Memaksa aplikasi untuk selalu mengambil konten dari jaringan.
Cache Only: Memaksa aplikasi untuk hanya menggunakan konten yang disimpan di cache.

Memilih strategi caching yang tepat tergantung pada sumber daya spesifik dan kebutuhan aplikasi Anda. Misalnya, aset statis seperti gambar dan file CSS seringkali paling baik disajikan menggunakan strategi Cache First, sementara konten dinamis mungkin mendapat manfaat dari strategi Network First atau Cache then Network.

Sinkronisasi Latar Belakang

Sinkronisasi latar belakang memungkinkan Anda untuk menunda tugas hingga pengguna memiliki koneksi jaringan yang stabil. Ini berguna untuk tugas-tugas seperti mengirimkan formulir atau mengunggah file. Misalnya, seorang pengguna di daerah terpencil di Indonesia mungkin mengisi formulir saat offline. Service worker kemudian dapat menunggu hingga koneksi tersedia sebelum mengirimkan data.

Notifikasi Push

Service worker dapat digunakan untuk mengirim notifikasi push kepada pengguna, bahkan ketika aplikasi tidak terbuka. Ini dapat digunakan untuk melibatkan kembali pengguna dan memberikan pembaruan tepat waktu. Bayangkan sebuah aplikasi berita yang memberikan peringatan berita terkini kepada pengguna secara real-time, terlepas dari apakah aplikasi sedang berjalan secara aktif.

Workbox

Workbox adalah kumpulan pustaka JavaScript yang mempermudah pembuatan service worker. Ini menyediakan abstraksi untuk tugas-tugas umum seperti caching, routing, dan sinkronisasi latar belakang. Menggunakan Workbox dapat menyederhanakan kode service worker Anda dan membuatnya lebih mudah dikelola. Banyak perusahaan sekarang menggunakan Workbox sebagai komponen standar saat mengembangkan PWA dan pengalaman offline-first.

Pertimbangan untuk Audiens Global

Saat membangun aplikasi web offline-first untuk audiens global, penting untuk mempertimbangkan faktor-faktor berikut:

Kondisi Jaringan yang Bervariasi: Konektivitas jaringan dapat sangat bervariasi di berbagai wilayah. Beberapa pengguna mungkin memiliki akses ke internet berkecepatan tinggi, sementara yang lain mungkin bergantung pada koneksi yang lambat atau terputus-putus. Rancang aplikasi Anda untuk menangani berbagai kondisi jaringan dengan baik.
Biaya Data: Biaya data bisa menjadi penghalang signifikan bagi pengguna internet di beberapa bagian dunia. Minimalkan konsumsi data dengan melakukan caching aset secara agresif dan mengoptimalkan gambar.
Dukungan Bahasa: Pastikan aplikasi Anda mendukung berbagai bahasa dan bahwa pengguna dapat mengakses konten dalam bahasa pilihan mereka, bahkan saat offline. Simpan konten yang dilokalkan di dalam cache dan sajikan berdasarkan pengaturan bahasa pengguna.
Aksesibilitas: Pastikan aplikasi web Anda dapat diakses oleh pengguna dengan disabilitas, terlepas dari koneksi jaringan mereka. Ikuti praktik terbaik aksesibilitas dan uji aplikasi Anda dengan teknologi bantu.
Pembaruan Konten: Rencanakan cara menangani pembaruan konten secara efektif. Strategi seperti `stale-while-revalidate` dapat memberikan pengguna pengalaman awal yang cepat sambil memastikan mereka pada akhirnya melihat konten terbaru. Pertimbangkan untuk menggunakan versioning untuk aset yang di-cache sehingga pembaruan dapat diterapkan dengan lancar.
Keterbatasan Local Storage: Meskipun local storage berguna untuk sejumlah kecil data, service worker memiliki akses ke Cache API, yang memungkinkan penyimpanan file yang lebih besar dan struktur data yang lebih kompleks, yang sangat penting untuk pengalaman offline.

Contoh Aplikasi Offline-First

Beberapa aplikasi web populer telah berhasil menerapkan fungsionalitas offline-first menggunakan service worker:

Google Maps: Memungkinkan pengguna mengunduh peta untuk penggunaan offline, memungkinkan mereka untuk bernavigasi bahkan tanpa koneksi internet.
Google Docs: Memungkinkan pengguna untuk membuat dan mengedit dokumen secara offline, menyinkronkan perubahan ketika koneksi jaringan tersedia.
Starbucks: Memungkinkan pengguna untuk menelusuri menu, memesan, dan mengelola akun hadiah mereka secara offline.
AliExpress: Memungkinkan pengguna untuk menelusuri produk, menambahkan item ke keranjang mereka, dan melihat detail pesanan secara offline.
Wikipedia: Menawarkan akses offline ke artikel dan konten, membuat pengetahuan dapat diakses bahkan tanpa internet.

Kesimpulan

Service worker adalah alat yang ampuh untuk membangun aplikasi web offline-first yang cepat, andal, dan menarik. Dengan melakukan caching aset, mencegat permintaan jaringan, dan menangani tugas latar belakang, service worker dapat memberikan pengalaman pengguna yang unggul, bahkan ketika konektivitas jaringan terbatas atau tidak tersedia. Karena akses jaringan tetap tidak konsisten di seluruh dunia, berfokus pada desain offline-first sangat penting untuk memastikan akses yang adil terhadap informasi dan layanan di web.

Dengan mengikuti langkah-langkah yang diuraikan dalam panduan ini dan mempertimbangkan faktor-faktor yang disebutkan di atas, Anda dapat membuat aplikasi web yang berfungsi mulus secara offline dan memberikan pengalaman yang menyenangkan bagi pengguna di seluruh dunia. Manfaatkan kekuatan service worker dan bangun masa depan web – masa depan di mana web dapat diakses oleh semua orang, di mana saja, terlepas dari koneksi jaringan mereka.