Utilizza il service worker Angular per rendere la tua app più veloce e più affidabile sulle reti con connettività scarsa.
Gestire la connettività limitata
Se gli utenti hanno un accesso alla rete limitato (o nessun accesso alla rete), la funzionalità dell'app web può peggiorare in modo significativo e spesso non funzionare. L'utilizzo di un service worker per fornire la pre-memorizzazione nella cache ti consente di intercettare le richieste di rete e fornire risposte direttamente da una cache locale invece di recuperarle dalla rete. Una volta che le risorse dell'app sono state memorizzate 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 presuppone 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 su Service worker e API Cache Storage.
Introduzione al service worker Angular
Il team di Angular offre un modulo per i service worker con funzionalità di pre-memorizzazione nella cache ben integrata nel framework e con 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
@angular/service-worker e @angular/pwa dovrebbero essere installati nell'app e dovrebbero essere visualizzati in package.json. Inoltre, lo schematico di ng-add aggiunge al progetto un file denominato ngsw-config.json, che puoi utilizzare per configurare il service worker. Il file include una configurazione predefinita che personalizzerai in seguito.
Ora crea il progetto per la produzione:
ng build --prod
Nella directory dist/service-worker-web-dev troverai un file chiamato 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 della tua app, apri l'URL pubblico ed esamina le relative richieste di rete in Chrome DevTools:
- Premi "Ctrl+Maiusc+J" (o "Comando+Opzione+J" su Mac) per aprire DevTools.
- Fai clic sulla scheda Rete.
Tieni presente che la scheda Network presenta una serie di asset statici scaricati direttamente in background dallo script ngsw-worker.js:
Questo è il service worker Angular che prememorizza nella cache gli asset statici specificati nel file manifest ngsw.json generato.
Tuttavia, manca un asset importante: nyan.png. Per prememorizzare nella cache questa immagine devi aggiungere un pattern che la includa in ngsw-config.json, che si trova nella radice 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 delle risorse app. Poiché il valore installMode per questo gruppo di asset è impostato su prefetch, il service worker prememorizzerà nella cache tutti gli asset specificati, che ora includono immagini PNG.
Specificare altri asset da pre-memorizzare nella cache è altrettanto semplice: aggiorna i pattern nel gruppo di asset di risorse app.
Conclusione
L'utilizzo di un service worker per la pre-memorizzazione nella cache può migliorare le prestazioni delle app salvando gli asset in una cache locale, il che le rende più affidabili sulle reti di scarsa qualità. Per utilizzare la pre-memorizzazione nella cache 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.