Share
De Service Worker API voor browsers stelt webontwerpers in staat om bezoekers iets te bieden wat ze nog nooit eerder hadden gehad: toegang tot sites of webapplicaties, zelfs wanneer offline, of het nu voor korte of lange tijd is.
Of u nu wilt zorgen dat een bezoeker uw site nog steeds kan lezen terwijl u door een treintunnel gaat of dat u apps wilt maken die geen internetverbinding vereisen, servicewerknemers bieden de perfecte oplossing.
Hoe goed servicemedewerkers ook zijn, wanneer je ze voor de eerste keer codeert, zijn er een paar nadelen die je voortgang kunnen vertragen, tenzij je je bewust bent van wat die problemen zijn. Deze zelfstudie geeft u vijf essentiële tips voor de ontwikkeling van servicewerknemers en we hopen dat ze u zullen helpen deze hapering te voorkomen en u te behoeden voor de bijbehorende problemen bij het oplossen van problemen.
Als u nog geen ervaring hebt met servicemedewerkers, bekijk dan onze beginnerscursus Simple Service Workers voor offline websites en het boek Going Offline van Jeremy Keith, beide beschikbaar op Envato Elements.
Het eerste probleem dat u zou kunnen struikelen wanneer u uw eerste servicemedewerker schrijft, is dat u waarschijnlijk zult doen wat u altijd doet en uw script in een submap met de naam js of scripts. Bij servicemedewerkers kan deze alledaagse actie echter problematisch zijn.
De reden is dat het bereik van uw servicemedewerker standaard wordt bepaald door de locatie. Wat betekent dat? Het betekent als je je script in een / JS directory is het bereik nu beperkt tot dat / JS directory. Als gevolg hiervan kan het alleen pagina-aanvragen verwerken die via komen www.yoursite.com/js/, en negeert andere verzoeken, zoals die door www.yoursite.com of www.yoursite.com/news/ bijvoorbeeld.
Dit beperkte bereik betekent op zijn beurt dat u voor het grootste deel van uw site geen offline fallbacks kunt bieden. Om uw servicemedewerker in staat te stellen alle verzoeken te behandelen die via een deel van uw site binnenkomen, moet de reikwijdte allesomvattend zijn.
Notitie: u kunt het standaardbereik van uw servicemedewerker feitelijk negeren wanneer u het registreert, bijvoorbeeld.
Accentsconagua
navigator.serviceWorker.register ('/ sw.js', scope: '/'); Met deze aanpak kunt u nog steeds al uw scripts in een submap huisvesten als dit erg belangrijk is voor uw project.
Maar over het algemeen is de eenvoudigste manier om uw servicemedewerker in de root-directory te plaatsen, waardoor het bereik automatisch wordt ingesteld op de hele site.
Hoewel servicemedewerkers in alle belangrijke browsers worden ondersteund, is Chrome of Chromium momenteel de beste browser om ze te ontwikkelen. Dit komt door het zeer nuttige toepassingsvenster, dat u vindt in de Developer Tools. Wanneer je het ontwikkelingsproces doorloopt, zul je vrijwel op dit tabblad gaan wonen:
Op dit tabblad vindt u een speciale sectie voor servicemedewerkers waarin u kunt controleren of uw script is geregistreerd, actief en actief is. U kunt dit tabblad ook gebruiken om het offline zijn te simuleren, tijdelijk uw servicemedewerkers te omzeilen en handmatig eerdere registraties ongedaan te maken die u niet meer nodig hebt.
Evenals het niet plaatsen van scripts in een submap, is een andere ontwikkelingstoepassing die je moet doorbreken bij het samenstellen van servicemedewerkers het gebruik van "Hard Reload" of "Empty Cache and Hard Reload". Je hebt dit waarschijnlijk duizenden keren gedaan bij het testen van sites, met behulp van de functionaliteit om je cache te zuiveren en ervoor te zorgen dat je een accurate weerspiegeling ziet van je ontwikkelingswijzigingen. Maar met servicemedewerkers krijgt dit niet het gewenste effect.
Wanneer u een servicemedewerker hebt geregistreerd en actief, zal elk gebruik van "Hard Reload" deze volledig omzeilen. Je kunt je site moeilijk opnieuw laden, zien dat je code niet is uitgevoerd zoals je verwacht en denken dat je een fout hebt gemaakt. Pas toen je je realiseerde dat het script nooit op de eerste plaats liep.
Het slechte nieuws is dus "Hard Reload" en "Empty Cache and Hard Reload" zijn niet meer beschikbaar tijdens de ontwikkeling van de service worker, wat ons leidt naar onze volgende vraag:
Hoe kunt u uw pagina op de juiste manier verversen en de wijzigingen in de code van uw servicemedewerker testen als u "Harde herladen" of "Lege cache en harde herladen" niet kunt gebruiken?
Het antwoord op deze vraag ligt in de volgende twee tips:
Wanneer u een pagina vernieuwt waarop u een servicemedewerker test, ziet u standaard niet de resultaten van eventuele wijzigingen in uw code. Dit komt omdat de versie van het script dat u in eerste instantie hebt geregistreerd, degene is die actief blijft in de browser, zelfs nadat de pagina opnieuw is geladen, tenzij u expliciete actie onderneemt om deze bij te werken..
Dus nogmaals, we hebben een situatie waarin u uw pagina kunt verfrissen en zich afvragen waarom uw codewijzigingen niet van kracht worden, tenzij u op de hoogte bent van de eigenaardigheden van servicemedewerkers.
Om ervoor te zorgen dat u altijd de laatste versie van uw script laadt, gaat u naar toepassingen tab en controleer de Update over Reload doos. Dit zorgt ervoor dat elke keer dat u de pagina opnieuw laadt (en onthoudt, alleen normale herladen gebruikt, niet hard herladen), de browser de servicewerknemer automatisch voor u zal updaten.
Notitie: er is de extra optie om op te klikken Bijwerken link weergegeven naast uw geregistreerde servicemedewerker, maar het gebruik van de geautomatiseerde methode voor reload is meestal eenvoudiger.
De laatste, erg handige functie van de toepassingen Het tabblad waar we het over hebben, is de mogelijkheid om binnen in de cache opgeslagen objecten te bekijken en deze handmatig te verwijderen. Gezien we niet willen gebruiken Lege cache en harde herladen, deze functionaliteit wordt een essentieel onderdeel van het ontwikkelingsproces van de servicewerknemer.
In de linkerkolom van de toepassingen tabblad, ziet u een gebied met het label Cache-opslag. Als u dit gebied uitvouwt, kunt u eventuele cache-objecten in de opslag die verband houden met de huidige URL bekijken.
Klik op een van deze items en u kunt de inhoud ervan controleren, wat zeer nuttig is om te controleren of bronnen die u offline wilt presenteren, correct door uw servicemedewerker aan de cache worden toegevoegd.
Om cache-objecten te verwijderen die u niet langer nodig heeft, klikt u met de rechtermuisknop op een object en kiest u Verwijder.
Tussen deze verwijderfunctie van het cache-object en de Update over Reload checkbox, je bent er helemaal klaar voor om de normale pagina opnieuw te laden terwijl je nog steeds zeker weet dat je de laatste wijzigingen in je werk goed test.
Voor meer informatie over servicemedewerkers, bekijk onze nieuwe cursus Eenvoudige servicemedewerkers voor offlinewebsites en het boek Going Offline van Jeremy Keith, nu beschikbaar op Envato Elements.
