Cara Mengintegrasikan Service Worker di Aplikasi Next.js

Cara Mengintegrasikan Service Worker di Aplikasi Next.js
Pembaca seperti Anda membantu mendukung MUO. Saat Anda melakukan pembelian menggunakan tautan di situs kami, kami dapat memperoleh komisi afiliasi. Baca selengkapnya.

Pekerja layanan adalah skrip yang berjalan di latar belakang untuk memberikan kemampuan caching yang kuat dan fitur lainnya untuk aplikasi web modern.





Fitur-fitur ini menghadirkan pengalaman aplikasi asli yang mulus dan ramah pengguna ke browser web.



saluran tv online gratis dari seluruh dunia

Pekerja layanan adalah komponen mendasar dalam pembuatan Aplikasi Web Progresif (PWA).





Memahami Pekerja Layanan

Pekerja layanan adalah tipe Pekerja web JavaScript yang berjalan di latar belakang, terpisah dari thread JavaScript utama, sehingga tidak memblokir. Artinya tidak menyebabkan penundaan atau gangguan pada antarmuka pengguna aplikasi atau interaksi pengguna dengannya.

Tampilan laptop dengan kode di layar dan tempat pena dengan pena di samping.

Pekerja layanan berfungsi sebagai server proksi—berada di antara aplikasi web dan jaringan. Mereka dapat mencegat permintaan dan tanggapan, menyimpan sumber daya dalam cache, dan memberikan dukungan offline. Hal ini membantu memastikan aplikasi web terasa lebih lancar dan ramah pengguna, bahkan saat pengguna tidak sedang online.



Aplikasi Utama untuk Service Worker

Ada beberapa aplikasi untuk pekerja layanan. Mereka termasuk:

  • PWA: Pekerja layanan memberikan kekuatan besar pada Aplikasi Web Progresif. Mereka melakukan permintaan jaringan khusus, pemberitahuan push, dukungan offline, dan pemuatan cepat.
  • Penyimpanan dalam cache: Pekerja layanan dapat menyimpan aset aplikasi—gambar, kode JavaScript, dan file CSS—di penyimpanan cache browser. Hal ini memungkinkan browser mengambilnya dari cache daripada mengambilnya dari server jarak jauh melalui jaringan. Hasilnya, konten dimuat lebih cepat, yang sangat berguna bagi pengguna dengan koneksi internet yang lambat atau tidak dapat diandalkan.
  • Sinkronisasi latar belakang: Pekerja layanan dapat menyinkronkan data dan menjalankan tugas latar belakang lainnya, bahkan saat pengguna tidak berinteraksi aktif dengan aplikasi atau saat aplikasi tidak dibuka di browser.

Mengintegrasikan Service Worker di Aplikasi Next.js

Sebelum mendalami kodenya, ada baiknya Anda memahami cara kerja pekerja layanan. Ada dua fase utama dalam menggunakan pekerja layanan: Registrasi Dan pengaktifan .



Selama fase pertama, browser mendaftarkan pekerja layanan. Berikut ini contoh sederhananya:

const registerServiceWorker = async () => { 
  if ("serviceWorker" in navigator) { 
    registration = await navigator.serviceWorker.register("/sw.js"); 
  } 
}; 
 
registerServiceWorker();

Kode ini pertama-tama memeriksa apakah browser mendukung pekerja layanan, seperti yang dilakukan semua browser web modern. Jika dukungan ini ada, maka akan dilanjutkan dengan mendaftarkan pekerja layanan yang terletak di jalur file yang ditentukan.



Pada tahap aktivasi, Anda perlu menginstal dan mengaktifkan pekerja layanan dengan mendengarkan Install Dan mengaktifkan acara menggunakan Pemroses acara JavaScript . Inilah cara Anda dapat mencapainya:

registration.addEventListener("install", () => { 
    console.log("Service worker installed"); 
}); 
 
registration.addEventListener("activate", () => { 
    console.log("Service worker activated"); 
});

Anda dapat memasukkan kode ini segera setelah proses pendaftaran. Ini harus dijalankan segera setelah proses pendaftaran pekerja layanan berhasil.