Quando un service worker gestisce gli eventi fetch, il browser attende che il service worker fornisca una risposta. Sebbene la latenza della richiesta di rete sia una parte importante dell'attesa, il browser potrebbe anche dover attendere che il service worker si avvii e attivi i callback di eventi fetch.
Il tempo di avvio varia in base al dispositivo e alle sue funzionalità, ma può essere notevole, a volte fino a mezzo secondo, quando la CPU è lenta o funziona in uno stato limitato a causa delle condizioni ambientali. È probabile che l'aumento delle prestazioni derivante dall'evitare la rete superi questo tempo di avvio quando le risposte di navigazione vengono fornite da un'istanza Cache. Per le richieste di navigazione che passano alla rete, l'introduzione di un service worker può creare un ritardo percepibile.
Inserisci precaricamento di navigazione
Il precaricamento della navigazione è una funzionalità dei service worker che risolve il ritardo causato dal tempo di avvio del service worker. Senza il precaricamento della navigazione abilitato, l'avvio del service worker e la richiesta di navigazione che gestisce verranno eseguiti consecutivamente:
Non si tratta dell'ideale, ma puoi correggerlo abilitando il precaricamento della navigazione, che garantisce l'avvio del service worker e la richiesta di navigazione si verifica contemporaneamente:
Sebbene il precaricamento della navigazione rappresenti un'ottima ottimizzazione delle prestazioni per i siti che utilizzano i service worker, non è una funzionalità da attivare in tutte le situazioni. In particolare, i siti che utilizzano una shell dell'app prememorizzata non hanno bisogno del precaricamento di navigazione, poiché la cache gestisce la richiesta di navigazione per il markup della shell dell'app senza latenza di navigazione. In questi casi, la risposta precaricata andrà a sprecare, il che non è ottimo.
Il momento migliore per utilizzare il precaricamento della navigazione è quando un sito web non può pre-memorizzare nella cache il codice HTML. Pensa a siti web in cui le risposte del markup sono dinamiche e variano con elementi come lo stato dell'autenticazione. Per queste richieste di navigazione potrebbe essere utilizzata una strategia incentrata sulla rete (o anche solo per la rete), ed è qui che il precaricamento della navigazione può fare una grande differenza.
Utilizzo del precaricamento della navigazione in Workbox
Utilizzare il precaricamento della navigazione direttamente in un service worker non basato su Workbox è complicato. Innanzitutto, non è supportato in tutti i browser. In secondo luogo, può essere difficile fare la scelta giusta. Puoi scoprire come utilizzarla direttamente in questa fantastica spiegazione di Jake Archibald.
Workbox semplifica l'utilizzo del precaricamento della navigazione, perché il metodo enable del modulo workbox-navigation-preload esegue i controlli di supporto delle funzionalità necessari e crea il listener di eventi activate per abilitarlo automaticamente.
Da qui, i vantaggi del precaricamento della navigazione si realizzano nel supporto dei browser utilizzando Workbox per gestire le richieste di navigazione con un gestore di strategia incentrato sulla rete:
import * as navigationPreload from 'workbox-navigation-preload';
import {NetworkFirst, StaleWhileRevalidate} from 'workbox-strategies';
import {registerRoute, NavigationRoute, Route} from 'workbox-routing';
import {precacheAndRoute} from 'workbox-precaching';
// Precache the manifest
precacheAndRoute(self.__WB_MANIFEST);
// Enable navigation preload
navigationPreload.enable();
// Create a new navigation route that uses the Network-first, falling back to
// cache strategy for navigation requests with its own cache. This route will be
// handled by navigation preload. The NetworkOnly strategy will work as well.
const navigationRoute = new NavigationRoute(new NetworkFirst({
cacheName: 'navigations'
}));
// Register the navigation route
registerRoute(navigationRoute);
// Create a route for image, script, or style requests that use a
// stale-while-revalidate strategy. This route will be unaffected
// by navigation preload.
const staticAssetsRoute = new Route(({request}) => {
return ['image', 'script', 'style'].includes(request.destination);
}, new StaleWhileRevalidate({
cacheName: 'static-assets'
}));
// Register the route handling static assets
registerRoute(staticAssetsRoute);
Quando il precaricamento della navigazione è attivato, Workbox risponderà con la risposta precaricata alle richieste di navigazione che utilizzano le strategie NetworkFirst o NetworkOnly.
Come faccio a capire se il precaricamento della navigazione funziona?
Nelle build di sviluppo, Workbox registra molto delle sue funzioni. Se vuoi verificare se il precaricamento della navigazione funziona in Workbox, apri la console in un browser di supporto durante una richiesta di navigazione. Verrà visualizzato un messaggio di log con scritto "Così":
Per impostazione predefinita, questo logging non è visibile nelle build di produzione, quindi non lo vedrai quando esegui il deployment del Service worker in produzione, ma è un ottimo modo per verificare che il precaricamento della navigazione funzioni (tra le altre cose).
Personalizzazione delle risposte precaricate
Quando utilizzi il precaricamento della navigazione, in alcuni casi potrebbe essere necessario personalizzare le risposte precaricate nel backend di un'applicazione. Uno scenario in cui potrebbe essere utile sono i service worker che trasmettono contenuti parziali dalla rete.
In casi come questi, è utile sapere che le richieste di precaricamento vengono inviate con un'intestazione Service-Worker-Navigation-Preload impostata con il valore predefinito di true:
Service-Worker-Navigation-Preload: true
Quindi, nel backend dell'applicazione preferito, puoi controllare questa intestazione e modificare la risposta in base alle tue esigenze. Se il valore predefinito dell'intestazione è per qualsiasi motivo un problema, puoi modificarlo nel contesto della finestra. Tieni presente che qualsiasi attività svolta sul server per leggere l'intestazione dipende da te e non rientra nell'ambito di Workbox.
Conclusione
Il precaricamento della navigazione è difficile da eseguire correttamente se viene utilizzato direttamente, ma questo duro lavoro vale la pena di assicurarsi che un service worker non impedisce al browser di effettuare richieste di navigazione. Grazie a Workbox, puoi trarre vantaggio dal precaricamento della navigazione con molto meno lavoro. Per ulteriori dettagli sul modulo workbox-navigation-preload, consulta la relativa documentazione di riferimento.