Sådan kode en progressiv webapp Nyhedswebsted

I de sidste to uger arbejdede jeg på et personligt projekt kaldet The Global Upvote. Global Upvote samler topstemte historier fra hele internettet, opsummeret og opdateret hvert tres sekund.

Denne artikel fokuserer på, hvordan jeg var i stand til at implementere The Global Upvote til håbende udviklere. Jeg skrev en separat artikel om designprocessen bag dette. Disse to historier kan virke helt adskilte. Men design- og udviklingsprocessen var dybt sammenflettet i det virkelige liv.

Bemærk, at jeg har skrevet en søsterartikel om, hvordan man designer dette Progressive Web App-nyhedswebsted her.

Find data

I design er der et koncept af indhold-først. Content-First Design siger, at du skal designe omkring indholdet. For at jeg kunne gøre det, var jeg nødt til at sikre, at jeg kunne få fat i de korrekte data. Før jeg begyndte på noget af det egentlige front-end-arbejde, arbejdede jeg med Reddit API og min Node-server.

Jeg vidste, at der var to dele af indholdet, jeg ønskede at fange fra Reddit:

  1. De øverste stillinger i r / WorldNews for deres overskrifter
  2. En botbrugers kommentar, der opsummerede historien

Heldigvis var der en stor Node-indpakning til API kaldet Snoowrap. Det var let at bruge og fik mig til at få indhold på ingen tid.

En stor ting, jeg lærte om dette projekt, var anmodningsledelse. Tidligere havde jeg brugt min Node-server som API-anmodning hver gang en bruger besøgte min app. Men jeg havde en åbenbar åbenbaring.

Jeg kunne holde fast i den lille mængde data (historier) på min server og opdatere den en gang i minuttet med en simpel setInterval. Dette stoppede med at skubbe risikoen for at misbruge mine Reddit API-grænser og forkortede historikindlæsningstider, fordi jeg ikke skulle pinge Reddit API hver gang.

Holder det progressivt

Vil du kende den billige, beskidte hemmelighed om at lave en progressiv webapp i React? Brug bare Create-React-App. Bidragsydere til dette projekt har gjort et vidunderligt stykke arbejde med at tilføje servicearbejdere til næsten øjeblikkelige belastninger og en manifestfil til dine metadata og optimere Webpack, så det er bedst muligt. Tidligere var jeg nødt til at gøre en masse arbejde for PWA'er (Progressive Web Apps) og skrev endda en tutorial om perfektionering af dem.

Dette var første gang, jeg arbejdede på en offlinevenlig tilstand for Chrome og Firefox for at gøre ting som at læse artikler, før min computer sluttede til wifi.

Første halvdel var at gøre ting, når internetforbindelsen blev ændret ved hjælp af begivenhedslyttere. På den måde kunne en ny forbindelse til internettet udløse hentning af historier, og en mistet forbindelse kunne meddele brugeren, at de er offline.

Den anden halvdel af offline-tilstand gemte nye historier på brugerens enhed, hver gang de blev hentet. Dette var min første gang, jeg brugte LocalStorage, og jeg blev glædeligt overrasket over, hvor let det var.

En sidste del af PWA at få gjort var at forbedre det perceptuelle hastighedsindeks. Du kan se denne brugercentrerede metrik ved at åbne Chrome DevTools og køre en revision. For at forbedre denne score lavede jeg skeletter, der ville vises, når min apps tilstand hentede.

Tilslutning af et plugin

Jeg havde bestemt, at jeg ville have brugeren til at kunne gemme oplevelsen som deres nye fane til Chrome og Firefox. Browserne understøtter oprindeligt indstilling af en startside. Men det giver dig ikke kontrol over URL-linjen med det samme. Dette var en vigtig detalje, fordi en bruger ikke ønsker at skulle klikke på URL-linjen, hver gang de åbner en ny fane.

Jeg frygtede, at jeg var ved at dykke ned i dybden af ​​udviklingen af ​​browserudvidelser. Dette var noget, jeg ikke var bekendt med udover en gitterkontrol for at hjælpe mine visuelle færdigheder. Endnu en gang endte denne løsning med at blive afleveret til mig på et sølvfad. Google inkluderer en lignende udvidelse i deres eksempler på downloads. Jeg arbejdede på ingen tid med Global Upvote Tab Extension. Ingen ændringer var endda nødvendige for indsendelsen til Firefox's butik!

Det endelige resultat

Fra et udviklingsmæssigt synspunkt elskede jeg alle de forskellige løsninger, jeg kunne sammensætte til The Global Upvote. Disse løsninger fortæller mig, at websamfundet bliver bedre til at arbejde sammen for at gøre udviklingsoplevelsen mindre frustrerende. Acing Chrome DevTools Audit, tidligere Google Lighthouse Extension, har også fået det nemmeste, det nogensinde har været.

Al kildekode er open source, hvis du vil grave rundt eller få det til at fungere for dig.

Flere hurtige ting at bemærke:

  • Hvor er CSS-filerne ?!

    Der er ingen. Jeg bruger Styled Components til at fastgøre styles direkte til deres komponent!

    Tjek denne tale, jeg holdt på IBM om, hvorfor CSS-in-JS er sindssygt godt: //vimeo.com/230614037

  • Hvor er kildekoden til din faneudvidelse?

    Tjek det i den separate repo for fanen Global Upvote.

  • Hvordan kommer jeg i gang med at køre dette lokalt?

    Tjek dokumentationen til Create-React-App, hvis du ikke allerede har gjort det.

    Meget wow. Du har også brug for en fil kaldet keys.jsoni rodmappen med dine oplysninger til Snoowrap. Det skal se sådan ud:

{ "userAgent": "random-term", "clientId": "FromYourRedditAPISettings", "clientSecret": "FromYourRedditAPISettings", "username": "YourRedditUsername", "password": "YourRedditPassword" }

Jeg håber, at du nød denne sagskrivning!

Igen har jeg skrevet en søsterartikel om, hvordan man designer dette Progressive Web App-nyhedswebsted her.

For yderligere information: Du er velkommen til at kontakte mig via kommentarer, e-mail eller @seejamescode. Jeg arbejder i ATX for IBM Design og elsker altid samtale med webdesign-samfundet. Efterlad eventuelle spørgsmål, du måtte have, og jeg vil prøve at besvare dem for dig!