PWA: Wat is een progressieve web-app en wat is het verschil met een native app?

In de IT-wereld is zonder twijfel de grootste obsessie het optimaliseren van de gebruikerservaring, uiteraard vanuit het oogpunt van een ontwikkelaar. Dit is vooral belangrijk in het mobiele ecosysteem, waar de concurrentie enorm is. .

Om deze reden worden er elke dag nieuwe manieren ontwikkeld om content aan de mobiele gebruiker te leveren. Native apps lijken hierin te domineren, maar blijkbaar kunnen PWA's dit bespreken vanwege hun meerdere voordelen .

Weet u niet wat een PWA is? Welnu, we gaan je alles leren wat je over hen moet weten; van de definitie tot hoe het werkt en hoe u er een kunt maken voor uw bedrijf of bedrijf, omdat ze een krachtig marketinginstrument zijn .

Wat is een PWA (Progressive Web Application) en waarvoor wordt het gebruikt?

Een progressieve webapplicatie of PWA, is een webpagina die is geprogrammeerd in HTML5 of CSS en zich gedraagt ​​als een native mobiele applicatie, die de ervaring maximaal optimaliseert door een hogere snelheid te bieden om de inhoud aan te bieden . In die zin lijken ze erg op een normale webtoepassing, maar deze onderscheidt zich doordat hij in de browser kan worden geïnstalleerd, naast andere, veel krachtigere functies.

Zo bezien zou je kunnen zeggen dat een PWA een evolutie is van de webapplicatie die we tot nu toe kennen in diensten als web.telegram.org , waarmee u een interface kunt gebruiken die lijkt op de native applicatie, maar dan vanuit uw browser. Progressieve apps kunnen ook op een webdomein worden gehost en vanuit elke browser worden afgespeeld, maar ze kunnen daar ook worden geïnstalleerd , alsof het er een verlengstuk van is.

Geschiedenis van de PWA, hoe kom je er?

In 2013 werd wat velen hadden aangekondigd bevestigd, en mobiele gebruikers waren al duidelijk in aantal groter dan desktopgebruikers. Veel hiervan gebeurde vanwege native apps, die je alles en meer gaven dan een website. De voordelen zijn duidelijk van de een naar de ander, ontwikkelaars zijn begonnen manieren te vinden om deze kloof te verkleinen .

In het begin verschenen er webapplicaties, dit waren pagina's geschreven in HTML en PHP die zich op dezelfde manier gedroegen als een native applicatie, maar nog steeds de beperkingen hadden van een normaal web; internetverslaving, externe opslag en een lange etc. Echter, het grote aantal functies dat ze aanpasten en het feit dat ze volledig responsive waren trokken veel aandacht .

Vandaag, aan het einde van het tweede decennium van de 21e eeuw, worden PWA's geboren, wat een belangrijke evolutie is in de richting van webapplicaties, aangezien ze al hun sterke punten en zeer weinig zwakke punten hebben, komt het dichtst in de buurt van een native app die in een browser kan worden verkregen. vanaf elk apparaat .

Wat zijn de verschillen tussen een PWA, een web-app en een native app? Wat is beter?

Om dit punt te begrijpen, moeten we een samenvatting geven. Een native applicatie is er een die op de mobiele telefoon kan worden geïnstalleerd, de web-app is degene die wordt gehost op een domein en de progressieve app is degene die in de browser kan worden geïnstalleerd . Deze drie concepten lijken erg op elkaar, maar ze zijn dieper dan je zou denken:

internetverbinding

Het belangrijkste en duidelijkste verschil tussen een native app en een web-app is dat de eerste prima kan werken zonder internetverbinding, terwijl de laatste het nodig heeft omdat de gegevens op een extern domein worden gehost. Het is ook een constante wanneer we het vergelijken met een progressieve app, die ook offline kan worden uitgevoerd. .

Opslagruimte

Het tweede duidelijke verschil tussen een native app en een website is de hosting van de gegevens waaruit het bestaat. De eerste bevindt zich in het interne geheugen van de mobiel, wat betekent dat er niets van internet nodig is om het te laten werken, omdat u het alleen hoeft te gebruiken. Terwijl de tweede in de cloud wordt opgeslagen, is een internetverbinding vereist om deze uit te voeren.

Van haar kant, de progressieve app wordt opgeslagen in de cache, omdat hij licht genoeg is om daar snel vanaf te laden - ci , waardoor het vergelijkbaar is met native apps.

gewicht

Dit is misschien het enige gedeelte waar u een native app verliest, omdat deze aanzienlijk zwaarder kan zijn dan de andere twee. Momenteel kunnen we games vinden die meer dan 1 GB wegen of professionele tools van honderden megabytes . Een web-app is veel lichter en is zelden groter dan 10 MB, terwijl progressieve apps gemiddeld 1 MB in beslag nemen.

Meldingen pushen

Pushmeldingen zijn meldingen die uw apps naar u sturen om u te herinneren aan openstaande taken of om uit te voeren, zelfs als ze gesloten zijn of op de achtergrond. Dit zijn zeer belangrijke factoren voor gebruikersfeedback en daarom hebben ze een enorme marketingwaarde. . Dit is een van de belangrijkste kenmerken van native apps, die nu ook door progressieve apps wordt overgenomen, maar helaas niet altijd beschikbaar is in webapps.

Laadsnelheid:

Afhankelijk van het gewicht van een native app, kan het tot een minuut duren om te openen, hoewel lichtere apps dit doorgaans in ongeveer 20 seconden doen. Webapplicaties zijn voornamelijk afhankelijk van de internetsnelheid, maar als je een goede verbinding hebt, zijn ze in ongeveer 10 seconden operationeel. . Progressieve apps die zo weinig ruimte innemen, worden binnen enkele seconden geladen.

Puissance

Momenteel kan een mobiele applicatie bijna net zo krachtig zijn als professionele software, dus in die zin blijft het ongeëvenaard. Web- en Progressive-apps zijn in deze zin erg beperkt, dus je kunt van hen niet zulke krachtige functies verwachten. .

Multi platform

Een native applicatie is het equivalent van een computerprogramma, maar geïnstalleerd op een mobiel. Dit maakt het beperkt tot het platform waarop het is geïnstalleerd, en u kunt de app vervolgens niet opnieuw laden op een ander apparaat zonder deze eerst te installeren. Dit gebeurt niet met web-apps en progressieve apps, omdat deze platformonafhankelijk kunnen zijn door ze zonder problemen in de ene of de andere browser te laden. .

Welke unieke functies maken progressieve web-apps zo krachtig?

U weet al goed hoe een progressieve applicatie verschilt van andere die momenteel in gebruik zijn. Maar dit zijn niet allemaal verrassingen, er zijn enkele unieke functies waardoor deze apps conventionele web-apps ver overtreffen .

Service medewerker

Ook bekend als de Service Scheduler, dit is een heel eenvoudig stukje programmering waarmee u bronnen in de cache kunt opslaan en openen. Dit basisconcept is erg belangrijk bij het runnen van een vooruitstrevende website, want het is wat waardoor het dingen kan doen zoals offline werken en de mogelijkheid om acties op te nemen wanneer offline, zodat ze vervolgens worden geladen wanneer internet beschikbaar is .

vooruitgang

Ze worden progressief genoemd omdat ze kunnen evolueren zoals browsers. Met andere woorden, zolang er krachtigere browsers worden gemaakt, kunnen PWA's worden gemaakt die ook krachtig zijn. In feite, er is gespeculeerd dat dit de toekomst van MMORPG-games zal zijn , waardoor ze offline kunnen worden afgespeeld vanuit de browser met al zijn bronnen.

conclusie

Een progressieve app en een native app zijn zeker beter dan een webapp, de verschillen waren duidelijk in de vorige punten. Wanneer we ze echter met elkaar vergelijken, zien we een serieus conflict waarbij native apps bovenaan blijven staan.

Waarom is het beter om PWA's te hebben dan andere apps? Zijn ze echt de toekomst van het web?

Een responsieve applicatie is ongetwijfeld buitengewoon nuttig en het is meer dan waarschijnlijk dat we in de niet al te verre toekomst zullen zien dat ze steeds krachtiger worden. Het is zeer waarschijnlijk dat deze veel websitesjablonen zoals e-commerce of digitale media zullen vervangen, maar websites zullen er altijd in overvloed zijn. .

Wat hij met de progressieve app zoekt, is websites bouwen die net zo krachtig kunnen zijn als een native app, dus de grote vraag is of ze die op een gegeven moment kunnen overwinnen. Het is een zeer sterke oorlog om te zien wie de troon krijgt in het mobiele gedeelte.

Voorlopig worden PWA's net geboren, wat hen een enorme marge van vooruitgang geeft, maar ook een marge van onzekerheid. , het hangt er allemaal van af de bestemming van geld.

Het concept van PWA is vrij eenvoudig, maar heeft ook veel potentie. Als we ons browsers voorstellen met de kwaliteiten van een besturingssysteem dat kan worden gebruikt om krachtige progressieve applicaties te draaien , we kunnen zeker zien hoe overweldigd native apps zijn in termen van downloads door hen.

Wat zijn de voordelen van het veranderen van een native applicatie naar een progressieve applicatie?

De voordelen ten opzichte van een webapplicatie zijn duidelijk, dus hebben we besloten om het te vergelijken met een native applicatie die zijn echte rivaal is op de wereldmarkt. Hoewel het nog steeds letterlijk onderweg is, kan een geleidelijke toepassing op verschillende manieren voordeliger zijn dan een normale toepassing. .

Multi platform

Het feit dat het letterlijk in seconden kan worden geladen, betekent dat je het op elk platform kunt gebruiken, of het nu een computer, tablet of Android is. De native applicatie van zijn kant moet vooraf worden geïnstalleerd , wat moeilijk kan zijn als je geen internet hebt om het uit de winkel te downloaden .

Directe updates

Een van de dingen waar we het meest een hekel aan hebben, is wanneer een relatief zware app moet worden bijgewerkt, omdat het behalve veel abonnementsgegevens ook tijdrovend kan zijn. Een vooruitstrevende website is in die zin veel handiger, omdat de updates sneller zijn omdat het gewicht extreem licht is, waardoor we ze letterlijk express updates kunnen noemen .

SEO-positionering

Dit is een andere belangrijke factor vanuit het oogpunt van een ontwikkelaar. Een progressieve applicatie kan op een domein worden gehost en daardoor worden gepositioneerd alsof het een website is, maar als je het invoert, komt de gebruiker een ecosysteem tegen dat lijkt op dat van een native app .

Hoe werkt een PWA? Onderdelen van een progressieve toepassing

¿ Op zoek naar een eigen PWA ? Nou, je zult verrast zijn dat het niet zo moeilijk is als je je misschien kunt voorstellen. Over het algemeen worden dezelfde talen gebruikt om een ​​webpagina te programmeren, al is een progressieve applicatie anders gestructureerd. Als u van plan bent om uw eigen progressieve web-app te bouwen, houd er dan rekening mee dat deze uit de volgende componenten bestaat: .

Webtoepassingsmanifest

Het manifest is een JSON-bestand dat alle meta-informatie over de applicatie bevat, wat de naam, themakleur, achtergrondkleur, pictogram en andere zeer basale aspecten zou zijn. Dit zou het equivalent zijn van een normale koptekst van een webpagina, maar dan in een apart bestand.

Service medewerker

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

icon

Het pictogram is niets meer dan de afbeelding die uw applicatie identificeert tussen andere webapplicaties die op de markt zijn, dit zal uw onderscheidende zijn, dus u moet er een kiezen die door uzelf is ontworpen .

HTTPS

Ten slotte is het nodig om een ​​beveiligde server te hebben met het bijbehorende SSL-certificaat dat de vertrouwelijkheid en veiligheid van de klant garandeert. 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. .

Lijst met de 10 beste progressieve web-apps die tot nu toe zijn gemaakt

Nou, je weet al veel meer over progressieve apps dan welke sterveling dan ook, maar je vraagt ​​je misschien af: waar kan ik er een krijgen? De waarheid is dat het zeer waarschijnlijk is dat je er eerder een hebt gebruikt en het niet eens hebt opgemerkt. . Dan zullen we u presenteren wat zijn de 10 beste progressieve apps die tot nu toe zijn ontwikkeld :

Instagram.com

Het is waar, de instagram-site is een PWA die al enkele jaren perfect werkt. Voorheen kon je je account niet buiten een mobiele telefoon gebruiken, maar dat is enige tijd geleden veranderd en met deze vooruitstrevende website is het mogelijk om je profiel te verifiëren vanuit de browser. Natuurlijk, deze versie is veel beperkter omdat het niet mogelijk is om daar foto's of video's van te delen - ci , evenals vele functies voor interactie in verhalen zijn beperkt.

Forbes.com

De Forbes-website is ook een zeer goed ontworpen progressieve applicatie waarmee gebruikers offline toegang hebben tot internet. Echter, aangezien dit een constant bijgewerkt digitaal medium is, kunt u wanneer u uitlogt alleen de nieuwste versie zien van de app die is geladen , dus als er sindsdien nieuw nieuws is, wordt dit pas weergegeven nadat u bent ingelogd.

Mobiel.Twitter

Een paar jaar geleden lanceerde het sociale netwerk van de vogel Twitter Lite, wat een PWA was maar direct op mobiel te installeren. Je bent nu mobiel. Twitter, een schaalbare applicatie in de hele regel en waarmee je perfect kunt inloggen met je browser zonder internetverbinding. In iets meer dan een jaar hebben ze hun verblijfstijd verdubbeld en gebruikers melden een opmerkelijke verbetering in hun ervaring .

Volg de kerstman van Google

Als je dacht dat games geen plaats hebben in de wereld van PWA, had je het mis. Google heeft dit leuke spel ontwikkeld dat je vanuit je browser kunt openen. Het is arcade-stijl, erg basic, maar het is best leuk en heeft veel niveaus . Ze organiseren ook kerstevenementen, zodat je de route van de kerstman live kunt volgen om speelgoed over de hele wereld te verspreiden. U kunt toegang krijgen tot verlaat deze plek .

Dino-spel

Het is waarschijnlijk de oudste progressieve app in de geschiedenis. Dit is het dinosaurusspel dat Google Chrome je laat zien wanneer je een website probeert te laden zonder internetverbinding. Het is heel eenvoudig omdat je alleen het toetsenbord hoeft te gebruiken om over de obstakels te springen die je worden aangeboden , maar het is geen geheim hoe verslavend dit spel kan zijn.

Uber

Trendy Taxi Service heeft een van de beste progressieve apps die je overal kunt vinden. Hiermee kun je een taxiservice zoeken en huren, net zoals je doet in de native app , evenals de mogelijkheid om uw server te beoordelen, de service te prijzen en meer. Over het algemeen is dit een van de meer uitgebreide apps op deze lijst.

Flipboard

Dit is een vergelijkbare applicatie als die van Forbes, omdat het ook wordt gebruikt om het nieuws te zien dat over de hele wereld gebeurt, door ze zonder enig probleem zonder internetverbinding te kunnen openen, zolang ze volledig zijn opgeladen . Er valt niet veel over te zeggen, behalve dat je commentaar kunt geven op het nieuws en het kunt beoordelen om het op je sociale netwerken te delen.

PadPiper

Dit is een geweldige progressieve app waarmee studenten onroerend goed kunnen zoeken in elk land ter wereld waar ze gaan studeren. Dus, terwijl je wacht tot Airbnb in jouw land arriveert, is het een goed idee om het zonder internetverbinding te gebruiken om het perfecte appartement voor jou te vinden.

Yhimsisch

Het is een zeer interessante applicatie omdat je hiermee toegang hebt tot de inhoud van platforms zoals YouTube of Vimeo om het af te spelen, dat wil zeggen heel gemakkelijk te gebruiken omdat je alleen de naam van het nummer dat je wilt beluisteren invult en dat is alles. Het is een zeer veelzijdige audiospeler die je ook een miniatuur laat zien van de Video .

Valuta-omzetter (Currency-calc.com)

Dit is een andere PWA die een vrij eenvoudig concept gebruikt om het gemakkelijk toegankelijk te maken. Dit is een eenvoudige valuta-omzetter die u kunt gebruiken om snel en gemakkelijk de waarde van uw lokale valuta in alle andere landen te kennen . U kunt het probleemloos gebruiken zonder internet.

Als je vragen hebt, laat ze dan achter in de reacties, we nemen zo snel mogelijk contact met je op en het zal ook een grote hulp zijn voor meer communityleden. Bedankt!