Share
API for servicearbeideren for nettlesere gjør at webdesignere kan tilby besøkende noe de aldri hadde før: tilgang til nettsteder eller webapplikasjoner, selv når de er offline, enten det er kort eller lang tid.
Enten du vil sikre en besøkende, kan du fortsatt lese nettstedet ditt mens du går gjennom en togtunnel, eller du vil opprette apper som ikke krever internettforbindelse, gir tjenestearbeidere den perfekte løsningen.
Så godt som servicearbeidere er, når du begynner å kode dem for første gang, er det noen snags som kan bremse fremgangen din, med mindre du er klar over hva disse snags er foran. Denne opplæringen vil gi deg fem viktige tips for utviklingen av servicearbeiderne, og vi håper de hjelper deg med å unngå disse hikke og redder deg fra de tilhørende feilsøkingshodet.
Hvis du er ny for å betjene arbeidere, sjekk ut vår nybegynners kurs Enkle servicearbeidere for offline nettsteder, og Jeremy Keiths bok Going Offline, begge tilgjengelige på Envato Elements.
Det tidligste problemet som kan gi deg opp når du skriver din første servicearbeider, er at du sannsynligvis vil gjøre det du alltid gjør og sette skriptet inn i en underkatalog som heter js eller skript. Imidlertid, med servicearbeidere, kan denne løpende virkningen være problematisk.
Årsaken er at omfanget av servicearbeideren din som standard er definert av sin plassering. Hva betyr det? Det betyr at hvis du setter skriptet ditt i en / js katalogets omfang er nå begrenset til det / js katalogen. Som et resultat kan det bare håndtere sideforespørsler som kommer via www.yoursite.com/js/, og vil helt ignorere andre forespørsler, for eksempel de gjennom www.yoursite.com eller www.yoursite.com/news/ for eksempel.
Dette begrensede omfanget betyr igjen at du ikke vil kunne tilby offline nedlasting for det meste av nettstedet ditt. For at din tjenestepersonell skal kunne håndtere eventuelle forespørsler som kommer gjennom en hvilken som helst del av nettstedet ditt, må omfanget være altomfattende.
Merk: Du kan faktisk overstyre tjenestearbeiderens standardområde når du registrerer det, f.eks.
Accentsconagua
navigator.serviceWorker.register ('/ sw.js', scope: '/'); Med denne tilnærmingen kan du fremdeles huske alle skriptene dine i en underkatalog dersom det er svært viktig for prosjektet ditt.
Men generelt sett er den enkleste tilnærmingen å sette tjenestearbeideren i rotkatalogen, og dermed automatisk innstillingsområdet for å dekke hele nettstedet.
Selv om servicearbeidere støttes i alle de store nettleserne, er Chrome og Chromium for øyeblikket uten tvil den beste nettleseren for å utvikle dem. Dette skyldes det meget nyttige applikasjonspanelet som finnes i utviklerverktøyene. Når du går gjennom utviklingsprosessen, kommer du ganske mye til å leve i denne kategorien:
I denne kategorien er det en dedikert seksjon for servicearbeidere der du kan bekrefte at skriptet ditt er registrert, aktivt og kjører. Du kan også bruke denne fanen til å simulere å være offline, midlertidig omgå tjenestepersonellene dine, og manuelt avregistrere tidligere skript du ikke lenger trenger.
I tillegg til å ikke sette skript i en underkatalog, må en annen utviklingsvaner du må bryte når du setter sammen tjenestearbeidere, bruke "Hard Reload" eller "Empty Cache and Hard Reload". Du har sikkert gjort dette tusenvis av ganger når du tester nettsteder, ved hjelp av funksjonaliteten for å rense cachen din og sikre at du ser en nøyaktig refleksjon av utviklingsendringene. Men med servicearbeidere får dette ikke den ønskede effekten.
Når du har en tjenestearbeider registrert og aktiv, vil enhver bruk av "Hard Reload" helt omgå den. Du kan hardt laste inn nettstedet ditt igjen, se at koden din ikke har utført den måten du forventer, og tror du har gjort en feil, bare for å innse at senere skriptet aldri kjørte i første omgang.
Så de dårlige nyhetene er "Hard Reload" og "Empty Cache and Hard Reload" er ute av grensene under utviklingen av tjenestearbeider, noe som fører oss til vårt neste spørsmål:
Hvordan kan du oppdatere siden din på riktig måte og teste endringene i servicearbeiderens kode hvis du ikke kan bruke "Hard Reload" eller "Empty Cache and Hard Reload"?
Svaret på dette spørsmålet ligger i følgende to tips:
Som standard, når du oppdaterer en side der du tester en servicemedarbeider, ser du ikke resultatene av noen av kodendringene dine. Dette skyldes at versjonen av skriptet du opprinnelig registrerte er den som forblir aktiv i nettleseren, selv etter at siden lades opp, med mindre du tar eksplisitte tiltak for å oppdatere det.
Så igjen her har vi en situasjon der du kan forfriskende siden din og lure på hvorfor kodendringene dine ikke trer i kraft, med mindre du er klar over kjennskapene til servicearbeidere.
For å være sikker på at du alltid laster inn den nyeste versjonen av skriptet ditt, gå inn i applikasjoner fanen og sjekk Oppdater på Oppdater eske. Dette sikrer at hver gang du laster på siden, (og husk, bruk bare normal reload, ikke hardt lasting), vil nettleseren automatisk oppdatere servicearbeideren for deg.
Merk: Det er det ekstra alternativet å klikke på Oppdater lenke vises ved siden av din registrerte tjenestepersonell, men det er vanligvis enklere å bruke den automatiske tilnærmingen på nytt.
Den endelige, veldig praktiske, funksjonen av applikasjoner fanen vi skal berøre er evnen til å kikke inn i objekter som er lagret i hurtigbufferen, og slette dem manuelt etter behov. Gitt vi ikke vil bruke Tom cache og hardt lasting, Denne funksjonaliteten blir en viktig del av utviklingsprosessen for tjenestearbeider.
I venstre kolonne av applikasjoner fanen, ser du et område merket Cache Storage. Hvis du utvider dette området, kan du se hvilke hurtigobjekter som er lagret som er relatert til den aktuelle nettadressen.
Klikk på noen av disse elementene, og du kan inspisere innholdet, noe som er svært nyttig for å verifisere at ressurser du vil tjene frakoblet, blir korrekt lagt til i hurtigbufferen av tjenestearbeideren din.
For å kvitte seg med cacheobjekter trenger du ikke lenger, bare høyreklikk på et objekt og velg Slett.
Mellom denne slettingsfunksjonen for cache-objektet, og Oppdater på Oppdater avkrysningsboks, er du klar til å holde fast ved å bruke den normale siden på nytt, samtidig som du sørger for at du tester de nyeste endringene i arbeidet ditt på riktig måte..
For mer om servicearbeidere, sjekk ut vårt nye kurs Simple Service Workers for offline nettsteder, og Jeremy Keiths bok Going Offline, nå tilgjengelig på Envato Elements.
