Sådan indstilles din Progressive Web App for at få en perfekt revisionsscore

Progressive Web Apps (PWA'er) blev hurtigt den hotteste udviklingsplatform i løbet af det sidste år. Lad os se på, hvad du skal gøre for at overholde PWA-standarderne.

Artikler om PWA-konceptet er overalt. Jeg vil fokusere på de faktiske trin, der skal gøres for at få PWA fuldt ud tilpasset specifikationen. Jeg giver et GitHub-link med listen over ændringer for hvert trin, jeg udførte, så du nemt kan prøve det selv.

Forudsætninger

  • node.js v8 +
  • Google Chrome browser v60 +

Jeg vil starte med den enkle vinkelformede applikation, jeg brugte til at fremvise kombinationen af ​​vinkelformet og PWA-tilgang i min tidligere artikel. Jeg har opgraderet den til Angular v6 og Kentico Cloud SDK v4.

Opgrader ændringer

Denne applikation er en enkel liste over interessante steder, der er gemt i en hovedløs CMS indlæst af SDK. Appen har allerede disse to frynsegoder, der gør den til en PWA-app:

  • manifest.json med et sæt ikoner, der bruges, når appen er installeret i systemet.
  • implementering af servicemedarbejder, der bruges til cache af applikationsskelettet (kaldet app-shell) og dataene fra det hovedløse CMS.

Selvom appen er klar til at blive installeret og brugt, har den stadig brug for et par berøringer for at imødekomme PWA-specifikationen.

Sådan kommer du igennem PWA-checklisten

For at kontrollere, om appen opfylder alle kriterier, der er defineret af Google-checklisten, kan man bruge forskellige værktøjer i disse dage. Den mest populære kaldes Fyrtårn.

Google-tjekliste

Lighthouse er allerede indlejret i Google Chrome browserudviklerværktøjer på kontrolfanen. For at køre den anbefaler jeg, at du offentliggør produktionsvarianten af ​​appen på internettet og udfører revisionen derfra.

For at opnå dette, skal du blot downloade appen i "starttilstand" og derefter køre følgende kommandoer.

Til implementering bruger jeg bølge. Du skal bare registrere og installere CLI-værktøjerne. Derefter kan du distribuere mappen i et * .source.sh-underdomæne.

Første app-tilstand
  • npm installation
  • npm run build for at opbygge applikationen i produktionsfunktion i mappen / dist
  • npm installere -g bølge for at installere bølge CLI globalt
  • surge / dist your-own-subdomain.surge.sh implementere “dist” -mappen til den specificerede URL. Dette kræver, at du enten logger ind eller indstiller overspændingsmiljøvariablerne med login og token.

Derefter skal du bare navigere til appen i Chrome-browseren. Gå til "Udviklerværktøjer"> "Audits"> "Udfør en revision"> vælg "Progressive Web App"> "Kør revision". De følgende resultater vises.

Som du kunne se, var der allerede bestået otte kontroller.

Lad os nu inspicere PWA-checklisten.

PWA-checkliste

Fallback, når der ikke er nogen JavaScript tilgængelig

Alt hvad du skal gøre for at fjerne denne meddelelse er at give en besked til browsere, der ikke er JavaScript. Noscript-tagget er en ideel måde at gøre det på. Bare tilføj følgende HTML-kode til kroppen af ​​index.html.

...
Tilføj indhold uden script

Adresselinjen matcher ikke mærkefarver

Denne advarsel fortæller dig, at du skal specificere den grundlæggende tematiske farve til adresselinjen. Alt hvad du behøver, er bare et HTML-metatag i hovedafsnittet på siden. Jeg har valgt den samme farve, der bruges til den øverste værktøjslinje.



...

...

...
Tilføj metafag for temafarve

HTTP-trafik omdirigeres ikke automatisk til HTTPS

Dette handler kun om distributionskonfiguration. For at opnå automatisk https-håndhævelse skal du bare bruge "https: //" inden det domæne, du vil distribuere appen til.

  • bølge / dist https://your-own-subdomain.surge.sh

Nu er du klar til at udføre revisionen igen.

  • npm run build
  • bølge / dist https://your-own-subdomain.surge.sh

Juhuu!

Du har bestået alle de automatiske kontroller. Nu har du måske bemærket, at der var manuelle trin beskrevet i rapporten:

  • Webstedet fungerer på tværs af browseren
  • Sideovergange føles ikke som om de blokeres på netværket. Hver gang du trykker på et link / knap, skal appen straks skifte eller vise en indlæsningsindikator, mens appen venter på et svar fra netværket.
  • Hver side skal have en URL - vi skal være i stand til at oprette URL'er til deling. Dette er hovedsageligt beregnet til at blive anvendt til apps på en side for at sikre, at klientsiden router er i stand til at ombygge app-tilstanden fra en given URL.

Bonus - hurtigere første belastning i Angular

Har du planer om at gøre din app virkelig stor? Vil du have, at det skal gengive sin app-shell med det samme, mens alle vinkelkomponenter er indlæst i baggrunden? Faktisk med større apps kan du muligvis få en advarsel i rapporten, der siger, at den første belastning tager for meget tid.

For at gøre tingene hurtigt, skal du bare tilføje en statisk HTML-kode i rodvinkelformkomponentfilen. Denne HTML vises under initialisering. I forbindelseslinket nedenfor kan du se, at jeg også har kastet nogle få statiske stilarter for at få tingene til at gengives på én gang.

..

    
        

Pack and Go

         
...

Nedenfor kan du se resultatet, når det testes med "Slow 3G" -forbindelsesindstillingen på plads.

Tilføj statisk app-shell

Lukker linjer

Okay, vi er færdige! Hvis du stræber efter en ultra-moderne PWA-app bygget oven på en robust ramme, har du den nu.

Appen kører på den nyeste version af Angular og understøttes af en hurtig og hovedløs Kentico Cloud CMS. Det opfylder alle kravene i Lighthouse-revisionsværktøjet, der er foretaget af Google.

Hvis du er interesseret i at se, hvordan man indarbejder Fyrtjekchecks i dit kontinuerlige integrationsøkosystem, skal du bare kontakte mig via Twitter!