Cara Mengintegrasikan Service Worker di Aplikasi Next.js

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.

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.

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.

Anda dapat menemukan kode proyek ini di dalamnya GitHub gudang.

Buat Proyek Next.js

Untuk memulai, jalankan perintah ini untuk merancang proyek Next.js secara lokal:

npx create-next-app next-project

Menambahkan pekerja layanan ke aplikasi Next.js melibatkan langkah-langkah berikut:

1. Daftarkan pekerja layanan di lingkungan lingkup global.
2. Buat file JavaScript pekerja layanan di direktori publik.

Menambahkan Pekerja Layanan

Pertama, daftarkan pekerja layanan. Perbarui src/pages/_app.js mengajukan sebagai berikut. Menyertakan kode dalam file ini memastikan bahwa pekerja layanan mendaftar ketika aplikasi dimuat dan memiliki akses ke semua aset aplikasi.

import { useEffect } from'react';
exportdefaultfunctionApp({ Component, pageProps }) {
 useEffect(() => {
if ('serviceWorker'in navigator) {
 navigator.serviceWorker
 .register('/service-worker.js', { scope: '/' })
 .then((registration) => {
console.log(
'Service worker registered successfully. Scope:',
 registration.scope
 );
 })
 .catch((error) => {
console.error('Service worker registration failed:', error);
 });
 }
 }, []);
return<Component {...pageProps} />;
} 

Itu gunakanEffect hook terpicu saat komponen dipasang. Seperti contoh sebelumnya, kode pertama-tama memeriksa apakah browser pengguna mendukung pekerja layanan.

Jika dukungan ada, ia akan mendaftarkan skrip pekerja layanan yang terletak di jalur file yang ditentukan, dan menentukan cakupannya sebagai “/”. Ini berarti pekerja layanan memiliki kendali atas semua sumber daya dalam aplikasi. Anda dapat memberikan cakupan yang lebih terperinci jika Anda mau, misalnya, “/products”.

Jika pendaftaran berhasil, ia akan mencatat pesan sukses, beserta cakupannya. Jika ada kesalahan selama proses registrasi, kode akan menangkapnya dan mencatat pesan kesalahan.

Instal dan Aktifkan Service Worker

Tambahkan kode berikut ke file baru, publik/pekerja layanan.js.

const installEvent = () => {
 self.addEventListener('install', () => {
console.log('service worker installed!!!');
 });
};
installEvent();

const activateEvent = () => {
 self.addEventListener('activate', () => {
console.log('service worker activated!!!');
 });
};
activateEvent();

Untuk menguji apakah pekerja layanan telah berhasil didaftarkan, diinstal, dan diaktifkan, mulai server pengembangan dan buka aplikasi Anda di browser.

npm run dev

Membuka Alat Pengembang Chrome jendela (atau browser Anda yang setara), dan navigasikan ke Aplikasi tab. Di bawah Pekerja Layanan bagian, Anda akan melihat pekerja layanan yang telah Anda daftarkan.

Setelah pekerja layanan berhasil didaftarkan, diinstal, dan diaktifkan, Anda dapat menerapkan beberapa fungsi seperti caching, sinkronisasi latar belakang, atau mengirimkan pemberitahuan push.

Caching Sumber Daya Dengan Service Worker

Menyimpan aset aplikasi dalam cache di perangkat pengguna dapat meningkatkan kinerja dengan memungkinkan akses lebih cepat, terutama dalam situasi dengan koneksi internet yang tidak dapat diandalkan.

Untuk menyimpan aset aplikasi dalam cache, sertakan kode berikut di pekerja layanan.js mengajukan.

const cacheName = 'test-cache';
self.addEventListener('fetch', (event) => {
 event.respondWith(
 caches.match(event.request).then((cachedResponse) => {
return cachedResponse || fetch(event.request).then((response) => {
return caches.open(cacheName).then((cache) => {
 cache.put(event.request, response.clone());
return response;
 });
 });
 })
 );
});

Saat pengguna pertama kali mengakses halaman beranda, kode ini memeriksa apakah ada respons cache untuk permintaan di cache. Jika ada respons yang di-cache, layanan akan mengembalikannya ke klien.

Jika tidak ada respons yang di-cache, pekerja layanan akan mengambil sumber daya dari server melalui jaringan. Ini melayani respons ke klien dan menyimpannya dalam cache untuk permintaan di masa mendatang.

Untuk melihat aset yang di-cache, buka tab Aplikasi di alat pengembang. Di bawah Penyimpanan Cache bagian, Anda akan melihat daftar aset yang di-cache. Anda juga dapat memeriksa Luring pilihan di bawah Pekerja Pelayanan bagian dan muat ulang halaman untuk menyimulasikan pengalaman offline.

Sekarang, setelah Anda mengunjungi beranda, browser akan menyajikan sumber daya yang disimpan di penyimpanan cache alih-alih mencoba membuat permintaan jaringan untuk mengambil data.

Menggunakan Service Worker untuk Meningkatkan Kinerja

Pekerja layanan adalah alat yang ampuh untuk meningkatkan kinerja aplikasi Next.js. Mereka dapat menyimpan sumber daya dalam cache, mencegat permintaan, dan memberikan dukungan offline, yang semuanya dapat meningkatkan pengalaman pengguna.

Namun, penting untuk diingat bahwa serviceworker juga bisa jadi rumit untuk diterapkan dan dikelola. Penting untuk mempertimbangkan dengan cermat potensi manfaat dan kelemahan pekerja layanan sebelum Anda menggunakannya.