In deze documentatie is eerder sprake geweest van precaching , maar niet genoeg over hoe u dit op de juiste manier kunt doen. Dit is belangrijk, want ongeacht of u Workbox gebruikt, kunt u gemakkelijk te veel precaches maken en mogelijk gegevens en bandbreedte verspillen. U moet voorzichtig zijn met de manier waarop uw precaching-payload de gebruikerservaring beïnvloedt.
Terwijl u dit document leest, moet u begrijpen dat dit algemene richtlijnen zijn. Uw applicatiearchitectuur en vereisten vereisen mogelijk dat u dingen anders doet dan hier wordt voorgesteld, maar deze richtlijnen dienen als goede standaarden.
Doen: kritieke statische assets vooraf in cache plaatsen
De beste kandidaten voor precaching zijn kritische statische assets, maar wat telt als een 'kritieke' asset? Vanuit het perspectief van een ontwikkelaar kan het verleidelijk zijn om een hele applicatie als 'kritiek' te beschouwen, maar het perspectief van de gebruiker is het allerbelangrijkste. Beschouw kritische assets als zaken die absoluut noodzakelijk zijn om een gebruikerservaring te bieden:
- Globale stijlbladen.
- JavaScript-bestanden die globale functionaliteit bieden.
- Applicatieshell HTML, als dat van toepassing is op uw architectuur.
Let op: dit zijn algemene richtlijnen, geen harde aanbevelingen. Bij het vooraf cachen van assets kunt u het beste kiezen voor minder in plaats van meer.
Doen: precache een offline fallback voor websites met meerdere pagina's
Voor typische websites met meerdere pagina's vertrouwt u mogelijk op een netwerk-eerst of netwerk-alleen caching-strategie om navigatieverzoeken af te handelen.
In dergelijke gevallen wilt u er zeker van zijn dat uw servicemedewerker de cache vooraf in de cache plaatst en reageert met een offline reservepagina wanneer de gebruiker offline een navigatieverzoek indient. Een manier om dit in Workbox te doen is door een netwerkstrategie te gebruiken met een offline fallback, waarbij ook gebruik wordt gemaakt van de vooraf geladen navigatie :
import {PrecacheFallbackPlugin, precacheAndRoute} from 'workbox-precaching';
import {registerRoute