Hoe bouw je een progressieve WEB-applicatie (PWA) helemaal opnieuw met basisprogrammeerkennis? Stap voor stap handleiding

Forbes, Twitter, Uber, Le Equipe, Telegram of Instagram zijn enkele van de reuzen die naar voren zijn getreden en hun eigen PWA's hebben gemaakt, of progressieve apps zoals ze gewoonlijk worden genoemd. Dit scenario suggereert de mogelijkheid dat conventionele websites worden vergeten .

Het is normaal dat websites zoals we ze kennen, zich steeds meer hebben ontwikkeld tot minder krachtige replica's dan native apps. Een PWA is in wezen het product van deze evolutie , die nu een manier heeft gevonden om een ​​mobiele app-achtige ervaring te bieden vanuit elke browser.

Als je niet meegesleurd wilt worden door het weer, daar is het belangrijk dat u begint na te denken over het vooruitstrevend maken van uw website, of in ieder geval zo dicht mogelijk in de buurt , want dat gaat zo snel mogelijk op de ranglijst wegen.

Wat is een progressieve web-app en waarin verschilt deze van een native app?

Een schaalbare applicatie is: een tool die is geprogrammeerd en geschreven in webtalen zoals zoals HTML5, JavaScript en CSS, maar die zich gedraagt ​​als een mobiele applicatie , met behoud van de kenmerken hiervan, zoals het hebben van een opslagruimte op het apparaat, waardoor het kan worden gebruikt zonder verbinding met internet.

Er zijn niet veel verschillen tussen progressief en autochtoon, aangezien de eerste op de tweede probeert te lijken , maar we kunnen er verschillende identificeren waardoor we de een boven de ander verkiezen:

• Multi platform: la principale différence entre l'un et l'autre est le fait que l'application native ne peut être utilisée que sur l'appareil sur lequel elle est installée, donc pour l'utiliser sur un autre, vous devrez la télécharger à partir de nul. De webtoepassing van zijn kant is multiplatform, omdat u deze vanuit elke browser kunt openen alsof het een website is.
• Gewicht: momenteel kun je native applicaties vinden die zo zwaar zijn als een computerprogramma, dus het hangt af van het vermogen. Aan de andere kant zijn progressieve websites zelden groter dan 1 MB.
• Snelle updates: als een toepassing erg groot is, duurt elke update enkele minuten. Een progressieve app is in deze zin veelzijdiger omdat, omdat hij zo licht is, de updates binnen enkele seconden worden uitgevoerd.

Onderdelen van een PWA Wat is er nodig om er een te maken?

Een progressieve aanvraag bestaat in principe uit vier delen; manifest, servicetechnici, icoon en server. Elk van hen heeft een fundamentele rol in de structuur van de hele tool .

Aanmeldingsmanifest

Het manifest van a PWA-toepassing is een JSON-bestand waarin alle meta-informatie van de applicatie is gespecificeerd . Hier worden de themakleur, naam, achtergrondkleur, pictogram en die details weergegeven.

Service medewerker

Dit is misschien wel het belangrijkste element. Zoals we eerder vermeldden, is dit een programmatisch element dat oplossingen biedt voor de uitwisseling van informatie tussen het netwerk en de browsercache. . Daarnaast registreren ze ook informatie die moet worden geladen wanneer er een verbinding is, waardoor de applicatie zonder internet kan worden uitgevoerd.

icon

Het pictogram is niets meer dan de afbeelding die uw toepassing identificeert tussen andere webtoepassingen op de markt, je moet het zelf ontwerpen, want het zal de eigenaardigheid van het web zijn .

HTTPS

Ten slotte heeft u een beveiligde server nodig met het bijbehorende SSL-certificaat. Browsers zullen nooit een door HTPP gehoste PWA gebruiken zoals veel websites tegenwoordig. Het belangrijkste van een progressieve app is de beveiliging, en browsers zullen dat garanderen. .

Wat hebben we nodig om deze vooruitstrevende webapplicatie te programmeren?

We komen op het moment van de waarheid dat we aan de slag moeten om onze schaalbare webapplicatie te maken. Het zal niets meer zijn dan een eenvoudige weersvoorspeller die u de temperatuur, vochtigheid en atmosferische druk zal vertellen. .

Om het te maken, zullen we eerst moeten voldoen aan een paar belangrijke eisen waaraan we zullen moeten voldoen voordat we gaan programmeren. Dit zijn de volgende:

• Een Dark Sky API-sleutel : De gegevens voor onze weerapplicatie komen rechtstreeks van deze API, dus je moet er een sleutel van krijgen. Deze zijn volledig gratis voor kleine non-profitprojecten zoals het project dat we gaan maken.
• Kennis van programmeren : we gaan je niet voor de gek houden, om te begrijpen wat we je gaan vertellen, moet je op zijn minst webprogrammering en de meest essentiële HTML5-, CSS- en JavaScript-talen begrijpen.

Stappen om een ​​progressieve webtoepassing te maken die met en zonder internet werkt

We kwamen waar we heen wilden. Het is tijd voor u om uw eerste progressieve toepassing te programmeren progressive Een toepassing heel eenvoudig dat je de kennis geeft om in de toekomst een completere en krachtigere te maken. Let goed op en volg alle stappen zorgvuldig:

Download de Dark Sky API

Zoals we eerder vermeldden, is het eerste wat u moet doen: ontvang een Dark Sky API-sleutel , die degene zal zijn die de weergegevens aan onze progressieve app levert. Om dit te doen, moet u rechtstreeks naar https://darksky.net/dev U registreer en vraag de sleutel aan.

Als je het eenmaal hebt, moet je controleren of het perfect werkt. Om dit te doen, moet je de volgende link nemen en de plaats vervangen waar staat: "ClaveAqui" door de API-sleutel die u zojuist hebt gekocht. Als alles goed gaat, zou je de voorspelling van New York zonder problemen moeten kunnen zien.

https://api.darksky.net/forecast/ClaveAqui/40.7720232,-73.9732319

Download de app-code

Dit is eigenlijk een testlab, dus we hebben een repository rechtstreeks van Google Developers opgehaald om deze begeleide test uit te voeren. Om deze repository te krijgen, moet je Glitch gebruiken, een zeer nuttig platform waarmee ontwikkelaars soepel informatie kunnen uitwisselen.

Wat u moet doen is het volgende:

• gaan naar Glitch.com en klik in de rechterbovenhoek van het scherm op "Nieuw project" dan waar het zegt "Kloon van Git-repo ".
• Dit opent een klein venster waarin u het volgende adres moet plakken: https://github.com/googlecodelabs/your-first-pwapp.giten klik op "OKE".

• In deze repository staat alle informatie die je nodig hebt. Nu moet je naar het .env-bestand gaan en veranderen waar het staat DARKSKY_API_KEY = "Sleutel hier" en zet je Dark Sky API-sleutel waar het zegt "Sleutel hier".

• U moet nu op klikken "Bekijk uw aanvraag" om de app in actie te zien.

Audit met Lighthouse

In principe is met deze code de PWA klaar, maar er zijn nog enkele bugs die we zelf moeten corrigeren en die we dankzij deze audit zullen ontdekken . Deze tool heeft een sectie die speciaal is ontworpen om progressieve website-audits uit te voeren zoals degene die we aan het maken zijn en daarvoor moeten we het volgende doen:

• Open uw project in een nieuw tabblad in uw Chrome-browser.
• Open dan Chrome DevTools en ga naar het tabblad Audits. Hier toont het platform een ​​lijst met auditcategorieën die u allemaal ingeschakeld moet laten.
• Het volgende dat u moet doen, is klikken op Audits uitvoeren en na een paar seconden geeft Lighthouse je een rapport van de pagina.

In dit geval zullen we ons alleen concentreren op de resultaten van de PWA-sectie, waarin we geïnteresseerd zijn. Dit zal zeker de volgende problemen veroorzaken:

• ❗ MISLUKT: De huidige pagina reageert niet met een 200 wanneer offline.
• FAILED:start_url reageert niet met een 200 wanneer offline.
• ❗ MISLUKT: neemt geen op technicus service die de pagina beheert enstart_url
• FOUT: het manifest van de webtoepassing voldoet niet aan de installatievereisten.
• FOUT: niet geconfigureerd voor een persoonlijk welkomstscherm.
• EEN MISLUKKING: stelt geen themakleur in voor de adresbalk.

Nu is onze missie in de volgende tutorial om dit allemaal goedgekeurd te krijgen, zodat we onze Progressief web met en zonder internetverbinding, installeerbaar zijn en een fatsoenlijk app-manifest hebben .

Een app-manifest maken

De reden dat de app faalde in het manifest is dat hij er eigenlijk geen heeft, dus we zullen hem moeten maken, hoewel u in uw geval alleen de basiscode van een manifest moet wijzigen dat we voor u hebben opgesteld .

{
 "name": "Clima",
 "short_name": "Clima",
 "icons": [{
  "src": "/images/icons/icon-128x128.png",
   "sizes": "128x128",
   "type": "image/png"
  }, {
   "src": "/images/icons/icon-144x144.png",
   "sizes": "144x144",
   "type": "image/png"
  }, {
   "src": "/images/icons/icon-152x152.png",
   "sizes": "152x152",
   "type": "image/png"
  }, {
   "src": "/images/icons/icon-192x192.png",
   "sizes": "192x192",
   "type": "image/png"
  }, {
   "src": "/images/icons/icon-256x256.png",
   "sizes": "256x256",
   "type": "image/png"
  }, {
   "src": "/images/icons/icon-512x512.png",
   "sizes": "512x512",
   "type": "image/png"
  }],
 "start_url": "/index.html",
 "display": "standalone",
 "background_color": "#3E4EB8",
 "theme_color": "#2F3BA2"
}

Om dit manifest aan je app toe te voegen. dan we moeten de browser op de hoogte stellen van ons manifest door toe te voegen <link rel="manifest"... op elke pagina van onze app. Voeg nu de volgende regel toe aan het element <head>in het bestand index.html.

 
  rel = "manifesteren"  href = "/manifest.json" >

Later moet je een metabeschrijving aan onze app toevoegen . Daarvoor is het gewoon nodig voeg de volgende regel code toe aan de toepassingsheader:

  naam = "Beschrijving"  content = "Een eenvoudige weerapplicatie" >

Ten slotte stellen we de kleur van de adresbalk van onze progressieve app in , waarvoor u de volgende regel code moet kopiëren naar de van uw aanvraag.

 
  naam = "thema-kleur"  content = "# 2F3BA2"  />

Haal het internet offline

Nu komt een van de meer gecompliceerde delen van de hele gids, omdat we wat moeilijke en snelle programmering gaan doen om onze servicemedewerker correct te maken , iets dat we eerder noemden als essentieel voor elke progressieve toepassing.

Wat alle gebruikers van een applicatie verwachten, is dat deze zonder internetverbinding kan worden gebruikt, zodat het voor ons gemakkelijk is om toegang te krijgen tot inhoud zonder op een netwerk te zijn . Dit is net zo belangrijk in een progressieve toepassing, dus het is absoluut noodzakelijk dat de Chrome-dinosaurus nooit opgeeft.

Wat we hier gaan doen, is een aangepaste offline pagina. Dus wanneer iemand de app binnengaat en geen verbinding heeft, is het degene die verschijnt in plaats van de vervelende dinosaurus. Hiervoor zullen we onze eerste servicemedewerker creëren .

Als je ze niet zo goed kent, raden we je aan dat te doen. Het is een hele nieuwe wereld in de programmeerwereld voor jou, dus het is erg handig voor jou om je erin te specialiseren. Op deze manier groei je professioneel en leer je geavanceerde kennis waarmee je je gilde een stap voor blijft. .

Het eerste dat we zullen doen, is de servicemedewerker registreren, waarvoor u moet de volgende regel code toevoegen aan het progressieve app-indexbestand: :

// CODELAB: registreer de servicemonteur. 
if  ( 'servicemedewerker' in de browser )  { 
 venster . addEventListener ( 'laden' ,  ()  =>  { 
  navigator . servicewerker . registreren ( '/servicewerker.js' ) . harte (( reg ) => { 
     console . inloggen ( 'Servicemedewerker geregistreerd.' , reg ); }); }); }
      
    
 

Nu moet u de servicetechnicus vertellen welke pagina offline moet worden weergegeven. In de repository hebben we al een aangepaste offline pagina gemaakt in ( public/offline.html). Wat je moet doen is gewoon ingaan op Publiek / service-werker.js in de repository en in de const-sectie "FILES_TO_CACHE ​
]; " waarde toevoegen "Offline.html". Het zou eruit moeten zien als op de afbeelding:

Het volgende dat we nu moeten doen, is deze regel code aan het evenement toevoegen "Installeren" om de technicus te vertellen om Offline Progressive Web Patching-service:

evt . wacht totdat ( 
  caches . open ( CACHE_NAME ). harte (( cache )  =>  { 
   console . inloggen ( '[ServiceWorker] Pre-caching offline pagina' ); terugkeer cache . Voeg alles toe ( FILES_TO_CACHE ); }) );
   
  

Tot nu toe gaan we halverwege. Het volgende dat u moet doen, is onze servicemedewerker de cache laten leegmaken, zodat er geen oude gegevens achterblijven. Daarom moeten we deze code toevoegen aan de map public / service-worker.js :

// CODELAB: verwijder oude gegevens in de cache van schijf. 

evt . wacht totdat ( 

  caches . toetsen (). harte (( sleutellijst )  =>  { terugkeer Belofte . allen ( sleutellijst . kaart (( sleutel ) => { if ( sleutel ​ ​ CACHE_NAME ) { 

     console . inloggen ( '[ServiceWorker] Oude cache verwijderen' , cle ); geef ze terug caches . verwijderen