Come integrare i Service Worker nelle applicazioni Next.js

I Service Worker sono script eseguiti in background per fornire potenti funzionalità di memorizzazione nella cache e altre funzionalità alle moderne applicazioni Web.

Queste funzionalità portano l'esperienza fluida e intuitiva delle app native nel browser web.

Gli addetti ai servizi sono una componente fondamentale nella creazione di Progressive Web App (PWA).

Comprendere i lavoratori dei servizi

Un lavoratore dei servizi è un tipo di Lavoratore Web JavaScript che viene eseguito in background, separato dal thread JavaScript principale, in modo che non sia bloccante. Ciò significa che non provoca ritardi o interruzioni nell'interfaccia utente dell'applicazione o nell'interazione dell'utente con essa.

Gli addetti ai servizi funzionano come server proxy, posizionandosi tra le applicazioni Web e la rete. Possono intercettare richieste e risposte, memorizzare nella cache risorse e fornire supporto offline. Ciò aiuta a garantire che le app Web siano più fluide e facili da usare, anche quando l'utente non è online.

Applicazioni chiave per i lavoratori dei servizi

Esistono diverse applicazioni per i lavoratori dei servizi. Loro includono:

• PWA: Gli addetti ai servizi forniscono grande potenza alle applicazioni Web progressive. Eseguono richieste di rete personalizzate, notifiche push, supporto offline e caricamento rapido.
• Memorizzazione nella cache: Gli addetti al servizio possono archiviare le risorse dell'applicazione (immagini, codice JavaScript e file CSS) nella memoria cache del browser. Ciò consente al browser di recuperarli dalla cache anziché recuperarli dal server remoto sulla rete. Di conseguenza, i contenuti vengono caricati più velocemente, il che è particolarmente utile per gli utenti con connessioni Internet lente o inaffidabili.
• Sincronizzazione in background: Gli operatori del servizio possono sincronizzare i dati ed eseguire altre attività in background, anche quando l'utente non interagisce attivamente con l'applicazione o quando l'applicazione non è aperta nel browser.

Integrazione dei Service Worker nelle applicazioni Next.js

Prima di immergersi nel codice, è utile capire come funzionano gli addetti ai servizi. Ci sono due fasi chiave nell’utilizzo dei lavoratori dei servizi: registrazione E Attivazione.

Durante la prima fase il browser registra l'operatore del servizio. Ecco un semplice esempio:

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

Il codice controlla innanzitutto se il browser supporta i service work, cosa che fanno tutti i browser Web moderni. Se questo supporto esiste, procede alla registrazione di un operatore del servizio situato nel percorso file specificato.

Nella fase di attivazione è necessario installare e attivare un service operator ascoltando il file installare E attivare eventi utilizzando Listener di eventi JavaScript. Ecco come puoi ottenere questo risultato:

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

Puoi includere questo codice subito dopo il processo di registrazione. Dovrebbe essere eseguito subito dopo che il processo di registrazione del lavoratore del servizio ha avuto esito positivo.

Puoi trovare il codice di questo progetto nel suo file GitHub deposito.

Crea un progetto Next.js

Per iniziare, esegui questo comando per impalcare localmente un progetto Next.js:

npx create-next-app next-project

L'aggiunta di un operatore del servizio a un'applicazione Next.js prevede i seguenti passaggi:

1. Registrare un operatore del servizio nell'ambiente con ambito globale.
2. Creare un file JavaScript del lavoratore del servizio nella directory pubblica.

Aggiunta di un addetto ai servizi

Innanzitutto, registra un addetto ai servizi. Aggiorna il src/pages/_app.js archiviare come segue. L'inclusione del codice in questo file garantisce che l'operatore del servizio si registri quando l'applicazione viene caricata e abbia accesso a tutte le risorse dell'applicazione.

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

IL useEffect il gancio si attiva quando il componente viene montato. Come nell'esempio precedente, il codice controlla innanzitutto se il browser dell'utente supporta i service operator.

Se il supporto esiste, registra lo script del lavoratore del servizio situato nel percorso del file specificato e ne specifica l'ambito come "/”. Ciò significa che l'operatore del servizio ha il controllo di tutte le risorse nell'applicazione. Se lo desideri, puoi fornire un ambito più granulare, ad esempio "/products”.

Se la registrazione ha esito positivo, viene registrato un messaggio di successo insieme al relativo ambito. Se si verifica un errore durante il processo di registrazione, il codice lo rileverà e registrerà un messaggio di errore.

Installa e attiva il Service Worker

Aggiungi il seguente codice a un nuovo file, 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();

Per verificare se il service lavoratore è stato registrato, installato e attivato correttamente, avvia il server di sviluppo e apri l'applicazione nel browser.

npm run dev

Aprire Strumenti per sviluppatori di Chrome (o l'equivalente del tuo browser) e vai a Applicazione scheda. Sotto il Lavoratori dei servizi sezione, dovresti vedere l'addetto ai servizi che hai registrato.

Con l'operatore del servizio registrato, installato e attivato correttamente, puoi implementare diverse funzioni come la memorizzazione nella cache, la sincronizzazione in background o invio di notifiche push.

Memorizzazione nella cache delle risorse con i lavoratori del servizio

La memorizzazione nella cache delle risorse dell'applicazione sul dispositivo dell'utente può migliorare le prestazioni consentendo un accesso più rapido, soprattutto in situazioni con connessioni Internet inaffidabili.

Per memorizzare nella cache le risorse dell'app, includi il seguente codice nel file service-worker.js file.

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

Quando un utente accede per la prima volta alla home page, questo codice controlla se è presente una risposta memorizzata nella cache per la richiesta. Se esiste una risposta memorizzata nella cache, il servizio la restituisce al client.

Se non esiste alcuna risposta memorizzata nella cache, l'operatore del servizio recupera la risorsa dal server attraverso la rete. Fornisce la risposta al client e la memorizza nella cache per richieste future.

Per visualizzare le risorse memorizzate nella cache, apri la scheda Applicazione negli strumenti per sviluppatori. Sotto il Archiviazione cache sezione, dovresti vedere un elenco delle risorse memorizzate nella cache. Puoi anche controllare il disconnesso opzione sotto il Operaio di servizio sezione e ricaricare la pagina per simulare un'esperienza offline.

Ora, una volta visitata la home page, il browser servirà le risorse archiviate nella memoria cache invece di tentare di effettuare richieste di rete per recuperare i dati.

Utilizzo degli addetti ai servizi per migliorare le prestazioni

I Service Worker sono uno strumento potente per migliorare le prestazioni delle app Next.js. Possono memorizzare nella cache risorse, intercettare richieste e fornire supporto offline, il tutto può migliorare l'esperienza dell'utente.

Tuttavia, è importante notare che i lavoratori dei servizi possono anche essere complessi da implementare e gestire. È importante considerare attentamente i potenziali vantaggi e svantaggi degli operatori dei servizi prima di utilizzarli.