Utilizza il service worker Angular per rendere la tua app più veloce e affidabile sulle reti con connettività scadente.
Gestire la connettività limitata
Se gli utenti hanno un accesso alla rete limitato o nessuno, la funzionalità dell'app web può ridursi notevolmente e spesso non funziona. L'utilizzo di un service worker per la memorizzazione nella cache ti consente di intercettare le richieste di rete e inviare le risposte direttamente da una cache locale anziché recuperarle dalla rete. Una volta che gli asset dell'app sono stati memorizzati nella cache, questo approccio può davvero velocizzare l'app e farla funzionare quando l'utente è offline.
Questo post illustra come configurare la pre-memorizzazione nella cache in un'app Angular. Si presume che tu abbia già familiarità con la memorizzazione nella cache e i service worker in generale. Se hai bisogno di un ripasso, consulta il post Service worker e API Cache Storage.
Introduzione al service worker Angular
Il team di Angular offre un modulo dei service worker con funzionalità di pre-memorizzazione nella cache ben integrato con il framework e l'interfaccia a riga di comando (CLI) di Angular.
Per aggiungere il service worker, esegui questo comando nell'interfaccia a riga di comando:
ng add @angular/pwa
Ora @angular/service-worker e @angular/pwa dovrebbero essere installate nell'app e dovrebbero essere visualizzate in package.json. Lo schema di ng-add aggiunge al progetto anche un file denominato ngsw-config.json, che puoi utilizzare per configurare il service worker. Il file include una configurazione predefinita che potrai personalizzare in seguito.
Ora crea il progetto per la produzione:
ng build --prod
Nella directory dist/service-worker-web-dev troverai un file denominato ngsw.json. Questo file indica al service worker Angular come memorizzare nella cache gli asset nell'app. Il file viene generato durante il processo di compilazione in base alla configurazione (ngsw-config.json) e agli asset prodotti al momento della creazione.
Ora avvia un server HTTP nella directory contenente gli asset di produzione dell'app, apri l'URL pubblico ed esamina le relative richieste di rete in Chrome DevTools:
- Premi "Control+Maiusc+J" (o "Comando+Opzione+J" su Mac) per aprire DevTools.
- Fai clic sulla scheda Rete.
Tieni presente che la scheda Rete contiene diversi asset statici scaricati direttamente in background dallo script ngsw-worker.js:
Questo è il service worker Angular che memorizza nella cache le risorse statiche specificate nel file manifest ngsw.json generato.
Tuttavia, manca un asset importante: nyan.png. Per pre-memorizzare questa immagine nella cache, devi aggiungere un pattern che la includa in ngsw-config.json, che si trova nella directory principale dell'area di lavoro:
{
"$schema": "./node_modules/@angular/service-worker/config/schema.json",
"index": "/index.html",
"assetGroups": [
{
"name": "app",
"installMode": "prefetch",
"resources": {
"files": [
"/favicon.ico",
"/index.html",
"/*.css",
"/*.js",
"/assets/*.png"
]
}
},
...
}
Questa modifica aggiunge tutte le immagini PNG nella cartella /assets al gruppo di asset di risorsa app. Poiché l'installMode per questo gruppo di asset è impostato su prefetch, il service worker memorizzerà nella cache tutti gli asset specificati, che ora includono le immagini PNG.
Specificare altri asset da pre-cache è altrettanto semplice: aggiornare i pattern nel gruppo di asset di risorse app.
Conclusione
L'utilizzo di un service worker per la memorizzazione nella cache può migliorare le prestazioni delle app salvando gli asset in una cache locale, che le rende più affidabili sulle reti deboli. Per utilizzare il precaching con Angular e l'interfaccia a riga di comando Angular:
- Aggiungi il pacchetto
@angular/pwaal progetto. - Controlla ciò che il service worker memorizza nella cache modificando
ngsw-config.json.