Scripturile denumite lucrători de servicii rulează în fundal și oferă funcționalități avansate de memorare în cache, alături de alte caracteristici esențiale pentru aplicațiile web moderne.
Aceste facilități transpune experiența ușoară și intuitivă a aplicațiilor native în mediul browserelor web.
Lucrătorii de servicii constituie o componentă vitală în dezvoltarea Aplicațiilor Web Progresive (PWA).
Înțelegerea funcționării lucrătorilor de servicii
Un lucrător de servicii este un tip special de script JavaScript, care operează în fundal, independent de firul principal al JavaScript. Această separare previne blocarea firului principal, asigurând că interacțiunea utilizatorului cu aplicația rămâne fluidă și fără întreruperi.
Lucrătorii de servicii acționează ca un fel de servere proxy, funcționând ca intermediari între aplicațiile web și rețea. Aceștia pot intercepta cereri și răspunsuri, pot stoca resursele în cache, oferind astfel suport offline. Această funcționalitate contribuie la o experiență mai lină și mai prietenoasă pentru utilizator, chiar și atunci când acesta nu dispune de o conexiune la internet.
Aplicații principale ale lucrătorilor de servicii
Lucrătorii de servicii au diverse aplicații, printre care se numără:
- PWA: Aceștia oferă putere mare Aplicațiilor Web Progresive, gestionând solicitările de rețea personalizate, notificările push, suportul offline și încărcarea rapidă.
- Memorarea în cache: Lucrătorii de servicii pot păstra activele aplicației, cum ar fi imagini, cod JavaScript și fișiere CSS, în memoria cache a browserului. Această stocare locală permite browserului să acceseze aceste resurse mai repede, fără a le prelua de la server, mai ales util în cazul conexiunilor lente sau instabile.
- Sincronizare în fundal: Aceștia pot sincroniza datele și executa alte sarcini în fundal, chiar și atunci când utilizatorul nu interacționează activ cu aplicația sau când aceasta nu este deschisă în browser.
Integrarea lucrătorilor de servicii în aplicațiile Next.js
Înainte de a intra în detalii de cod, este important să înțelegem modul de funcționare al lucrătorilor de servicii. Procesul constă în două etape majore: înregistrarea și activarea.
În prima etapă, browserul înregistrează lucrătorul de servicii. Un exemplu simplu este:
const registerServiceWorker = async () => {
if ("serviceWorker" in navigator) {
registration = await navigator.serviceWorker.register("/sw.js");
}
};registerServiceWorker();
Acest cod verifică inițial dacă browserul oferă suport pentru lucrătorii de servicii, o caracteristică comună în browserele web moderne. Dacă suportul este prezent, un lucrător de servicii este înregistrat utilizând calea specificată către fișier.
În etapa de activare, lucrătorul de servicii trebuie instalat și activat prin intermediul ascultătorilor de evenimente JavaScript, care urmăresc evenimentele de instalare și activare. Exemplu:
registration.addEventListener("install", () => {
console.log("Service worker installed");
});registration.addEventListener("activate", () => {
console.log("Service worker activated");
});
Acest cod ar trebui să fie inclus imediat după procesul de înregistrare și se va executa odată ce înregistrarea lucrătorului de servicii a fost finalizată cu succes.
Codul complet al acestui proiect este disponibil în depozitul GitHub corespunzător.
Crearea unui proiect Next.js
Pentru a începe, utilizați această comandă pentru a crea un nou proiect Next.js:
npx create-next-app next-project
Integrarea unui lucrător de servicii într-o aplicație Next.js implică acești pași:
- Înregistrarea lucrătorului de servicii în mediul global.
- Crearea unui fișier JavaScript dedicat lucrătorului de servicii în directorul public.
Adăugarea unui lucrător de servicii
Primul pas este înregistrarea lucrătorului de servicii. Actualizați fișierul `src/pages/_app.js` cu următorul cod. Includerea codului în acest fișier asigură înregistrarea lucrătorului de servicii la încărcarea aplicației și accesul la toate resursele acesteia.
import { useEffect } from 'react';export default function App({ Component, pageProps }) {
useEffect(() => {
if ('serviceWorker' in navigator) {
navigator.serviceWorker
.register('/service-worker.js', { scope: "https://www.makeuseof.com/" })
.then((registration) => {
console.log(
'Service worker registered successfully. Scope:',
registration.scope
);
})
.catch((error) => {
console.error('Service worker registration failed:', error);
});
}
}, []);return <Component {...pageProps} />;
}
Cârligul `useEffect` se activează la montarea componentei. Similar cu exemplul anterior, codul verifică dacă browserul utilizatorului are suport pentru lucrătorii de servicii.
În cazul în care suportul există, scriptul lucrătorului de servicii este înregistrat prin calea specificată, iar domeniul său este setat la `/`. Aceasta înseamnă că lucrătorul de servicii va avea control asupra tuturor resurselor din cadrul aplicației. Puteți defini un domeniu mai specific, de exemplu, `/produse` dacă doriți.
În cazul în care înregistrarea are succes, un mesaj corespunzător va fi înregistrat, împreună cu domeniul său. În caz contrar, codul va prelua eroarea și va înregistra un mesaj de eroare.
Instalarea și activarea lucrătorului de servicii
Adăugați următorul cod într-un fișier nou, `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();
Pentru a confirma că lucrătorul de servicii a fost înregistrat, instalat și activat cu succes, porniți serverul de dezvoltare și deschideți aplicația în browser.
npm run dev
Accesați Instrumentele de dezvoltator din Chrome (sau echivalentul din browserul dvs.) și navigați la secțiunea Aplicație. În cadrul secțiunii Lucrători de servicii, veți putea vedea lucrătorul de servicii pe care l-ați înregistrat.
Cu lucrătorul de servicii înregistrat, instalat și activat cu succes, puteți implementa diverse funcționalități precum memorarea în cache, sincronizarea în fundal sau transmiterea de notificări push.
Memorarea în cache a resurselor cu ajutorul lucrătorilor de servicii
Memorarea în cache a resurselor aplicației direct pe dispozitivul utilizatorului poate contribui la îmbunătățirea performanțelor, permițând accesul rapid la resurse, mai ales în condiții de conexiune la internet instabilă.
Pentru a stoca resursele în cache, adăugați următorul cod în fișierul `service-worker.js`.
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;
});
});
})
);
});
Când un utilizator accesează prima dată pagina principală, acest cod va verifica dacă există o copie a răspunsului în memoria cache. Dacă un răspuns în cache este disponibil, acesta va fi returnat clientului.
În cazul în care nu există niciun răspuns în cache, lucrătorul de servicii va prelua resursa de pe server prin intermediul rețelei. Apoi, răspunsul va fi trimis către client și va fi stocat în cache pentru solicitări ulterioare.
Pentru a vedea resursele stocate în cache, accesați secțiunea Aplicație din instrumentele de dezvoltator. În zona de stocare în cache, veți găsi o listă a resurselor memorate în cache. Puteți, de asemenea, să bifați opțiunea Offline din secțiunea Lucrător de servicii și să reîncărcați pagina pentru a simula o experiență offline.
Acum, după vizitarea paginii principale, browserul va accesa resursele din memoria cache locală, fără a mai iniția cereri de rețea pentru a le prelua.
Utilizarea lucrătorilor de servicii pentru îmbunătățirea performanțelor
Lucrătorii de servicii sunt un instrument puternic pentru a optimiza performanțele aplicațiilor Next.js. Funcțiile lor de stocare în cache, interceptare a cererilor și suport offline îmbunătățesc în mod semnificativ experiența utilizatorului.
Este important să rețineți, totuși, că implementarea și gestionarea lucrătorilor de servicii pot fi complexe. Prin urmare, este important să se analizeze cu atenție beneficiile și dezavantajele potențiale înainte de a decide utilizarea lor.