Next.js Uygulamalarına Hizmet Çalışanları Nasıl Entegre Edilir?

Hizmet çalışanları, modern web uygulamalarına güçlü önbellekleme yetenekleri ve diğer özellikler sağlamak için arka planda çalışan komut dosyalarıdır.

Bu özellikler, yerel uygulamaların kusursuz ve kullanıcı dostu deneyimini web tarayıcısına getirir.

Hizmet çalışanları, Aşamalı Web Uygulamalarının (PWA'lar) oluşturulmasında temel bir bileşendir.

Hizmet Çalışanlarını Anlamak

Hizmet çalışanı bir tür JavaScript web çalışanı arka planda ana JavaScript iş parçacığından ayrı olarak çalışır, böylece engellenmez. Bu, uygulamanın kullanıcı arayüzünde veya kullanıcının uygulamayla etkileşiminde gecikmelere veya kesintilere neden olmadığı anlamına gelir.

Hizmet çalışanları, web uygulamaları ile ağ arasında oturan proxy sunucuları olarak işlev görür. İstekleri ve yanıtları yakalayabilir, kaynakları önbelleğe alabilir ve çevrimdışı destek sağlayabilirler. Bu, kullanıcı çevrimiçi olmadığında bile web uygulamalarının daha kusursuz ve kullanıcı dostu olmasını sağlamaya yardımcı olur.

Hizmet Çalışanları için Temel Uygulamalar

Servis çalışanları için çeşitli uygulamalar vardır. Onlar içerir:

• PWA'lar: Hizmet çalışanları, Progressive Web Apps'e büyük güç sağlar. Özel ağ isteklerini, anlık bildirimleri, çevrimdışı desteği ve hızlı yüklemeyi gerçekleştirirler.
• Önbelleğe almak: Servis çalışanları uygulamanın varlıklarını (resimler, JavaScript kodu ve CSS dosyaları) tarayıcının önbellek deposunda saklayabilir. Bu, tarayıcının bunları ağ üzerinden uzak sunucudan almak yerine önbelleğinden almasına olanak tanır. Sonuç olarak içerik daha hızlı yüklenir; bu da özellikle yavaş veya güvenilmez internet bağlantısı olan kullanıcılar için faydalıdır.
• Arka planda senkronizasyon: Servis çalışanları, kullanıcı uygulamayla aktif olarak etkileşimde olmadığında veya uygulama tarayıcıda açık olmadığında bile verileri senkronize edebilir ve diğer arka plan görevlerini çalıştırabilir.

Next.js Uygulamalarına Hizmet Çalışanlarını Entegre Etme

Kodun ayrıntılarına girmeden önce hizmet çalışanlarının nasıl çalıştığını anlamak yardımcı olur. Hizmet çalışanlarını kullanmanın iki temel aşaması vardır: kayıt Ve aktivasyon.

İlk aşamada tarayıcı servis çalışanını kaydeder. İşte basit bir örnek:

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

Kod ilk olarak tarayıcının tüm modern web tarayıcılarının yaptığı gibi hizmet çalışanlarını destekleyip desteklemediğini kontrol eder. Bu destek mevcutsa belirtilen dosya yolunda bulunan bir hizmet çalışanını kaydetmeye devam eder.

Etkinleştirme aşamasında, bir servis çalışanını dinleyerek kurup etkinleştirmeniz gerekir. düzenlemek Ve etkinleştir kullanarak olaylar JavaScript olay dinleyicileri. Bunu şu şekilde başarabilirsiniz:

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

Bu kodu kayıt işleminin hemen ardından ekleyebilirsiniz. Hizmet çalışanı kayıt işlemi başarılı olduktan hemen sonra çalıştırılmalıdır.

Bu projenin kodunu kendi içinde bulabilirsiniz. GitHub depo.

Next.js Projesi Oluşturma

Başlamak için bir Next.js projesinin yerel olarak iskelesini oluşturmak üzere bu komutu çalıştırın:

npx create-next-app next-project

Next.js uygulamasına hizmet çalışanı eklemek aşağıdaki adımları içerir:

1. Bir hizmet çalışanını küresel kapsam ortamına kaydedin.
2. Genel dizinde bir hizmet çalışanı JavaScript dosyası oluşturun.

Hizmet Çalışanı Ekleme

Öncelikle bir servis çalışanını kaydedin. Güncelleme src/pages/_app.js aşağıdaki gibi dosyalayın. Kodun bu dosyaya dahil edilmesi, hizmet çalışanının uygulama yüklendiğinde kaydolmasını ve uygulamanın tüm varlıklarına erişebilmesini sağlar.

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} />;
} 

kullanımEtkisi bileşen takıldığında kanca tetiklenir. Önceki örnekte olduğu gibi, kod öncelikle kullanıcının tarayıcısının hizmet çalışanlarını destekleyip desteklemediğini kontrol eder.

Destek mevcutsa, belirtilen dosya yolunda bulunan hizmet çalışanı komut dosyasını kaydeder ve kapsamını “/”. Bu, hizmet çalışanının uygulamadaki tüm kaynakların denetimine sahip olduğu anlamına gelir. İsterseniz daha ayrıntılı bir kapsam sağlayabilirsiniz, örneğin: "/products”.

Kayıt başarılı olursa kapsamıyla birlikte bir başarı mesajı kaydeder. Kayıt işlemi sırasında bir hata varsa kod bunu yakalayacak ve bir hata mesajı kaydedecektir.

Service Worker'ı Kurun ve Etkinleştirin

Aşağıdaki kodu yeni bir dosyaya ekleyin, public/service-worker.js.

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

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

Service Worker'ın başarıyla kaydedildiğini, yüklendiğini ve etkinleştirildiğini test etmek için geliştirme sunucusunu başlatın ve uygulamanızı tarayıcıda açın.

npm run dev

Açık Chrome'un Geliştirici Araçları penceresine (veya tarayıcınızın eşdeğerine) gidin ve Başvuru sekmesi. Altında Hizmet Çalışanları bölümünde kaydettiğiniz servis çalışanını görmelisiniz.

Hizmet çalışanı başarıyla kaydolduktan, yüklendikten ve etkinleştirildikten sonra önbelleğe alma, arka planda senkronizasyon gibi çeşitli işlevleri uygulayabilirsiniz. push bildirimleri gönderme.

Kaynakları Hizmet Çalışanlarıyla Önbelleğe Alma

Uygulama varlıklarının kullanıcının cihazında önbelleğe alınması, özellikle güvenilmez internet bağlantılarının olduğu durumlarda daha hızlı erişime izin vererek performansı artırabilir.

Uygulamanın varlıklarını önbelleğe almak için aşağıdaki kodu ekleyin. service-worker.js dosya.

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;
 });
 });
 })
 );
});

Bir kullanıcı ana sayfaya ilk kez eriştiğinde, bu kod, önbellekte isteğe yönelik önbelleğe alınmış bir yanıt olup olmadığını kontrol eder. Önbelleğe alınmış bir yanıt varsa, hizmet bunu istemciye döndürür.

Önbelleğe alınmış bir yanıt yoksa, hizmet çalışanı kaynağı ağ üzerinden sunucudan alır. Yanıtı müşteriye sunar ve gelecekteki istekler için önbelleğe alır.

Önbelleğe alınan varlıkları görüntülemek için geliştirici araçlarında Uygulama sekmesini açın. Altında Önbellek Depolama bölümünde, önbelleğe alınan varlıkların bir listesini görmelisiniz. Ayrıca şunları da kontrol edebilirsiniz: Çevrimdışı altındaki seçenek Servis Çalışanı bölümünü açın ve çevrimdışı bir deneyimi simüle etmek için sayfayı yeniden yükleyin.

Artık ana sayfayı ziyaret ettiğinizde tarayıcı, veri almak için ağ isteklerinde bulunmaya çalışmak yerine önbellek deposunda depolanan kaynaklara hizmet edecektir.

Performansı Artırmak İçin Hizmet Çalışanlarını Kullanma

Hizmet çalışanları Next.js uygulamalarının performansını artırmaya yönelik güçlü bir araçtır. Kaynakları önbelleğe alabilir, istekleri engelleyebilir ve çevrimdışı destek sağlayabilirler; bunların tümü kullanıcı deneyimini geliştirebilir.

Ancak hizmet çalışanlarının uygulanması ve yönetilmesinin de karmaşık olabileceğini unutmamak önemlidir. Servis çalışanlarını kullanmadan önce onların potansiyel faydalarını ve dezavantajlarını dikkatlice değerlendirmek önemlidir.