Grondbeginselen van progressieve webapplicaties. Wat zijn Progressive Web Apps en welke kansen bieden ze voor uw bedrijf

Het concept van Progressive Web Applications (PWA) bestaat al heel lang, sinds het voorjaar van 2018 worden toepassingen van deze klasse ondersteund door alle grote browsers, maar de prevalentie van PWA-technologieën, ondanks hun duidelijke "voordelen", is nog steeds erg laag.

Google-specialisten (ook op Habré) schrijven zeer informatief en bekwaam over PWA, maar hun aanbevelingen zijn nuttiger voor degenen die al bekend zijn met het onderwerp. Dit artikel is bedoeld om te laten zien dat Progressive Web Apps niet moeilijk is en dat ontwikkelaars van alle sites deze technologieën nu kunnen en moeten gebruiken.

PWA-filosofie

Om te beginnen is het vermeldenswaard dat er geen exacte definitie is van een PWA-toepassing. Het is niet duidelijk of deze site een PWA is of niet. Dit is een uitgebreide schaal waarop ook de startpagina van tweedejaars Petya kan worden gevonden, die een webapp-manifest heeft toegevoegd dat een pictogram voor de site op het startscherm van een mobiele telefoon maakt; en uiterlijk niet te onderscheiden van een gewone nieuwssite, waarvan alleen gebruikers kunnen zeggen dat het verrassend snel en handig is, en dat allemaal omdat het ergens binnenin het warme hart van een servicemedewerker klopt (a).

De relativiteit van PWA ligt in de naam zelf - "progressief". Progressief ten opzichte van wat en in welke mate? Maar deze relativiteit is in feite heel goed, omdat je PWA-technologieën geleidelijk kunt leren en toepassen in je huidige projecten, zonder wereldwijde hermodellering en refactoring.

Aan de andere kant heeft PWA een idee, en het idee is duidelijk en krachtig genoeg. En hoe langzaam het zich ontvouwt, zou wel eens de omvang van de gevolgen kunnen aangeven.

PWA-architectuur

Een PWA is een webtoepassing die is gebouwd met behulp van specifieke technologieën om specifieke doelen te bereiken.

De doelen worden als volgt ontcijferd:

Betrouwbaarheid(Betrouwbaar) - de applicatie wordt onmiddellijk geladen en weergegeven, ongeacht de status en kwaliteit van de netwerkverbinding.
Snelheid(Snel) - gegevensuitwisseling via het netwerk is snel, de gebruikersinterface is soepel en reageert snel.
Aantrekkelijkheid(Boeiend) - maakt de gebruikerservaring met de applicatie comfortabel en aangenaam, en moedigt hem aan om het opnieuw en opnieuw en opnieuw te willen ervaren ...

Vanuit het perspectief van Google is dit wat het uiterlijk van websites nu scheidt van native apps.

Met andere woorden, de ontwikkelaar krijgt tools aangeboden (Service Worker, Push Notifications, etc.) en doelen worden aangegeven (de site / applicatie moet snel laden, werken op een zwakke verbinding, niet "lag", zo nodig offline werken) . Hoe ver langs dit pad de ontwikkelaar alleen van hem afhangt.

PWA en native apps

Het feit dat PWA's oppervlakkig lijken op native applicaties is eerder een cosmetische oplossing (hoewel belangrijk voor de gebruiker vanuit psychologisch oogpunt). Maar het feit dat ze intern vergelijkbaar zijn (alle hoofdbronnen van de applicatie kunnen op de client worden opgeslagen, alleen veranderende inhoud wordt via het netwerk verzonden) is een enorme prestatie.

Je zou het zelfs een verborgen revolutie kunnen noemen. In feite wordt de browser gebruikt als een soort virtuele machine die een PWA-toepassing opslaat en uitvoert. Net zoals Android een virtuele machine is voor Android-applicaties, wordt de browser een virtuele machine voor PWA's. Net zoals een native applicatie toegang krijgt tot zijn bronnen via het bestandssysteem, heeft de PWA toegang tot zijn bronnen - weliswaar via HTTP, maar lokaal opgeslagen.

En voor een keer werkt het allemaal hetzelfde in alle grote browsers en alle grote platforms.

Google valt iOS aan

Er zijn mobiele applicaties die native moeten zijn (performance, toegang tot systeembronnen, etc.), maar er zijn applicaties die qua functionaliteit goed realiseerbaar zijn als PWA. Voor hen nu:

Het is niet nodig om verschillende versies voor Android en iOS (en Windows) te schrijven
- U hoeft zich niet te registreren bij Google Play en App Store en ervoor te betalen
- Directe toegang tot het bureaublad geopend

Tot nu toe was de markt voor mobiele applicaties gesloten voor enthousiastelingen die een nuttig programma kunnen schrijven, maar niet kunnen/willen betalen om het te hosten. En ze willen zich niet bemoeien met de bureaucratie van Google en Apple om de applicatie te controleren, waarna met verlangen wordt teruggedacht aan de monopolietijden van Microsoft.

Nu zijn deze barrières doorbroken. En Google brak ze. Aangezien zij het vlaggenschip is van internettechnologieën, is zo'n toegang tot het grondgebied van iOS hoogstwaarschijnlijk behoorlijk doordacht en berekend. Het blijft wachten op de PWA-boom.

Er zijn natuurlijk verschillen tussen PWA en native applicaties - voornamelijk in de rechten van toegang tot systeembronnen, maar het werk in deze richting gaat zelfs op het gebied van pure HTML5, en voor PWA zullen extra privileges geen probleem zijn.

APK versus PWA

Uit persoonlijke ervaring kunt u zich herinneren hoe, na het overzetten van een nieuwssite om met Service Worker te gaan werken, werd besloten om de Android-applicatie die is gemaakt volgens de functionaliteit van de site te verlaten. En niet zozeer omdat de ondersteuning personeel in beslag nam, maar omdat de PWA-versie verrassend genoeg sneller, mooier en handiger was om mee te werken dan een java-toepassing.

Technologieën

Laten we eens kijken naar de belangrijkste drijfveren van PWA.

Service medewerker

Het hart van PWA is Service Worker. Dit is de proxylaag tussen de front-end en de back-end die zich in de browser bevindt. Alle browserverzoeken gaan er doorheen. Deze opdeling in twee onafhankelijke lagen maakte het mogelijk om de overgang van een reguliere website naar PWA zo eenvoudig mogelijk te maken.

Vanuit de opslag heeft Service Worker "a toegang tot Cache Storage voor webbronnen en IndexDB voor gegevens. Maar, belangrijker nog, volledige vrijheid om bedrijfslogica te implementeren.

U kunt bijvoorbeeld een verzoek van een browser accepteren, de status van het netwerk controleren, gegevens uit de opslag halen, er bewerkingen mee uitvoeren en een bepaald resultaat terugsturen naar de browser - die zal denken dat het antwoord van de server kwam. Of niet - zoals de ontwikkelaar wil, zal hij het doen. Twee browserlagen (client frontend en service worker) stellen u in staat om volwaardige applicaties te schrijven.

Tegelijkertijd zal voor de meeste sites de caching-functionaliteit van de Service Worker voldoende zijn om te evolueren naar een PWA.

PWA is niet afhankelijk van frameworks, het is pure javascript, hoewel zelfs Google-experts op Habré om de een of andere reden adviseren om bibliotheekcodegeneratoren te gebruiken. Service Worker is prachtig met de hand geschreven en dit is nodig om de logica van uw applicatie goed te begrijpen en te beheersen.

Vanuit het oogpunt van een programmeur is Service Worker een javascript-bestand dat is opgenomen in de html-code van de pagina. Daarin definieert de ontwikkelaar de logica voor het werken met verzoeken die afkomstig zijn van de frontend en andere functionaliteit.

HTTPS

PWA vereist dat alle sitebronnen worden overgedragen via het HTTPS-protocol. Een SSL-certificaat is gratis te verkrijgen, sommige hosters doen dat voor je. Maar het is van cruciaal belang dat de site geen links heeft naar onbeschermde bronnen - in dit geval zullen sommige browsers de site gewoon niet weergeven.

Het grootste probleem dat zich in dergelijke gevallen voordoet, zijn afbeeldingen. Vaak plaatsen redacteuren of commentatoren links naar afbeeldingen van internet in het materiaal, soms komen ze daar automatisch (in het materiaal) terecht. Het is noodzakelijk om de foto's opnieuw op te slaan voor uzelf of voor een dienst met toegang via HTTPS.

Applicatie Shell

App-shell is slechts een skelet van een grafische interface, een sjabloon. Laten we bijvoorbeeld een middelste site nemen met een kop, twee kolommen enzovoort. Laten we grofweg de inhoud van de huidige pagina en alle dynamische informatie eruit knippen, de rest van de statische is app-shell.

Waar het op neerkomt, is dat de app-shell op de client wordt opgeslagen en wordt geladen wanneer de toepassing wordt gestart, en dat vervolgens dynamische informatie vanuit het netwerk erin wordt geladen. En terwijl het wordt geladen, moet de app-shell er goed uitzien (fieldloaders, enz.)

Deze site-architectuur - inhoud en andere dynamische informatie laden via ajax-aanroepen - kan van tevoren worden bedacht en geïmplementeerd op de site, waarna de overgang naar PWA vrij eenvoudig zal zijn.

App-shell is als een shell voor een native programma. Zie je PWA als een native programma en veel dingen zullen gemakkelijker worden.

Web App-manifest

JSON-bestand dat de naam van de applicatie voor de browser definieert, het pictogram, hoe de PWA eruit zal zien (volledig scherm, standalone, enz.) en enkele andere parameters. Hiermee kunt u de PWA "installeren" als een zelfstandige applicatie op het startscherm van uw smartphone.

Pushmeldingen

Als u op internet surft met Chrome DevTools geopend op het tabblad Toepassingen, kunt u zien hoe weinig sites PWA-technologie gebruiken. En 90% van degenen die het alleen gebruiken voor pushmeldingen.

Tot nu toe is dit de meest populaire en meest misbruikte PWA-technologie - in de afgelopen maanden is het aantal sites dat binnenkomt en allereerst op de knop "Blokkeren" in de aanbieding zoekt om het laatste nieuws te ontvangen, gegroeid, zoals een gevoel, vaak, en het verlangen om je push op te leggen is als spam.

Maar u kunt een abonnement aanbieden op het tweede of derde bezoek van de gebruiker aan de site, wanneer al duidelijk is dat hij hier niet toevallig is.

• Vertaling

Ooit de knop Toevoegen aan startpagina gezien die op het scherm van uw Android-smartphone verschijnt wanneer u op een website surft? Als u op deze knop klikt, wordt op de achtergrond een bepaalde applicatie op de telefoon geïnstalleerd, het pictogram voor starten dat naar het hoofdscherm gaat. Nu kan deze applicatie op vrijwel dezelfde manier worden gestart en bediend als voorheen, maar alleen in de gebruikelijke telefooninterface.

Waar we het over hebben is een mobiele app die is gedownload van een web-app. Bovendien hoeft u, zoals u kunt zien, geen interactie te hebben met de Play Market om een ​​dergelijke applicatie te installeren. Hierdoor wordt de installatie van dergelijke applicaties zo eenvoudig mogelijk gemaakt. Dit is echter verre van het meest interessant. Door dergelijke programma's te starten, krijgt u de mogelijkheid om te werken met de gegevens die ze weergeven, zelfs zonder internetverbinding. Hiermee kunt u offline met webpagina's communiceren. Nou, is het niet geweldig?

Je hebt je waarschijnlijk al gerealiseerd dat we het zojuist hadden over de zogenaamde Progressive Web App (PWA). Een dergelijke applicatie kan rechtstreeks vanuit het browservenster worden geïnstalleerd, het pictogram om het te starten zal eruitzien als het pictogram van een gewone mobiele applicatie, en u kunt er, zoals veel mobiele applicaties, mee werken zonder een internetverbinding.

Toevoegen aan Home-knop

Laten we het nu hebben over wat "progressiviteit" is zoals toegepast op webapplicaties. Laten we ze eens nader bekijken, ontdekken hoe ze verschillen van reguliere web-apps, en ook vertellen waarom ik geloof dat PWA's beter zijn dan traditionele mobiele apps.

Wat is een progressieve web-app?

De term "Progressive Web App" is bedacht door Alex Russell en Frances Berryman. Volgens Alex zijn Progressive Web Apps gewoon websites die de juiste vitamines hebben ingenomen. Wat de kern van PWA is, kan geen nieuw raamwerk of nieuwe technologie worden genoemd. Het is in feite een reeks best practices voor ontwikkeling waarmee u een webtoepassing kunt laten werken als een klassieke desktop- of mobiele toepassing.

PWA-pictogram op startscherm

PWA's bieden de gebruiker nieuwe gebruiksvriendelijke ervaringen door middel van progressieve applicatieverbeteringen. In het algemeen betekent dit dat PWA's, op mobiele apparaten van verschillende generaties, ongeveer op dezelfde manier zullen werken. Natuurlijk zijn sommige functies van gewone telefoontoepassingen mogelijk niet voor hen beschikbaar, maar dergelijke toepassingen werken meestal op verschillende apparaten zoals ze erop zouden moeten werken.

Waarom hebben we progressieve web-apps nodig?

Voordat we erachter komen waarom PWA's überhaupt nodig zijn, laten we het hebben over de problemen waarmee we worden geconfronteerd bij het ontwerpen van webapplicaties en reguliere mobiele applicaties.

• Trage internetverbinding. Misschien is waar je woont, met snel internet alles in orde, dus dit probleem heeft geen invloed op jou. Maar 60% van de wereldbevolking gebruikt nog steeds 2G-internet. Zelfs in de VS hebben sommige gebruikers alleen snelheden die vergelijkbaar zijn met die van conventionele modems met eenvoudige telefoonlijnen.
• Trage website laden. Als de site erg langzaam laadt, weet u dan hoe lang de gebruiker wacht voordat hij op de sluitknop klikt? Drie seconden! 53% van de gebruikers verlaat sites die te traag zijn.
• De complexiteit van het installeren van applicaties. Gebruikers zijn terughoudend om conventionele mobiele apps te installeren. De gemiddelde gebruiker installeert 0 apps per maand.
• Betrokkenheid van gebruikers bij het werken met de applicatie. Gebruikers besteden het grootste deel van hun tijd aan reguliere mobiele apps, maar het bereik van mobiele internetgebruikers is ongeveer drie keer groter. Als gevolg hiervan is de meerderheid van de gebruikers niet bijzonder actief betrokken bij de applicaties, hoewel deze gebruikers 80% van hun tijd doorbrengen in de drie mobiele applicaties die ze het meest gebruiken.

Progressive Web Apps kunnen deze problemen helpen oplossen.

PWA in actie

Er zijn veel redenen om PWA te gebruiken, hier wil ik de belangrijkste kansen benadrukken die ze bieden. Als je deze mogelijkheden in één woord omschrijft, dan is de afkorting FIRE (Fast, Integrated, Reliable, Engaging) geschikt, dat wil zeggen dat een progressieve webapplicatie snel moet zijn, geïntegreerd moet zijn in de werkomgeving van het apparaat, betrouwbaar moet zijn en een gebruikers betrekken bij het werken ermee. ...

1. Als we het hebben over snelheid, dan werkt PWA, in alle stadia van gebruikersinteractie met hen, snel. Ze zijn snel te installeren, snel te starten en snel te werken. Omdat met PWA's gegevens in de cache kunnen worden opgeslagen, is het opnieuw starten van dergelijke toepassingen erg snel, zelfs zonder toegang tot netwerkbronnen.
2. De integratie van PWA in de device-omgeving komt tot uiting in het feit dat dergelijke applicaties zich gedragen als reguliere applicaties. Het pictogram om ze te starten bevindt zich op het startscherm, ze kunnen werken met pushmeldingen, ze kunnen dezelfde apparaatfuncties gebruiken als reguliere applicaties. Hierdoor heeft de gebruiker bij het werken met progressieve webapplicaties geen zin om de vertrouwde omgeving te verlaten.
3. De betrouwbaarheid van geïntegreerde webapplicaties is gebaseerd op het feit dat ze normaal kunnen werken zonder een netwerkverbinding, vanwege de mogelijkheid om gegevens te cachen door middel van servicemedewerkers.
4. Het vermogen van PWA's om de gebruiker bij hen te betrekken, is gebaseerd op het feit dat ze meldingen naar gebruikers kunnen sturen. Hierdoor kan de gebruiker op de hoogte blijven van interessante gebeurtenissen met betrekking tot de applicatie en wordt hij aangetrokken om met deze applicatie te werken.

Hoe maak ik een progressieve web-app?

Google heeft een checklist gepubliceerd voor het ontwikkelen van progressieve webapplicaties. Laten we eens kijken naar de minimumvereisten voor een toepassing, waarvan de naleving u in staat stelt om het een PWA te noemen.

▍1. Aanmeldingsmanifest

Een PWA-manifest is een manifest.json-bestand met zoiets als dit:

("name": "Trending Meme", "short_name": "Meme", "theme_color": "# 2196f3", "background_color": "# 2196f3", "display": "standalone", "orientation": "portrait "," Scope ":" / "," start_url ":" / "," pictogrammen ": [(" src ":" afbeeldingen / pictogrammen / icon-72x72.png "," maten ":" 72x72 "," type : " afbeelding / png "), (" src ":" afbeeldingen / pictogrammen / icon-96x96.png "," maten : " 96x96 "," type ":" afbeelding / png "), (" src ": "images / icons / icon-128x128.png", "sizes": "128x128", "type": "image / png"), ("src": "images / icons / icon-144x144.png", "maten ":" 144x144 "," type ":" afbeelding / png "), (" src ":" afbeeldingen / pictogrammen / icon-152x152.png "," maten ":" 152x152 "," typ ":" afbeelding / png "), (" src ":" afbeeldingen / pictogrammen / icon-192x192.png "," maten ":" 192x192 "," type ":" afbeelding / png "), (" src ":" afbeeldingen / pictogrammen / pictogram -384x384.png "," maten ":" 384x384 "," type ":" afbeelding / png "), (" src ":" afbeeldingen / pictogrammen / icon-512x512.png "," maten ":" 512x512 ", "type": "afbeelding / png")], "splash_pages": null)
Voor ons ligt een regulier JSON-bestand dat meta-informatie over een webapplicatie bevat. Er zijn gegevens over de applicatiepictogrammen (waarvan de gebruiker er één op het hoofdscherm ziet na het installeren van de applicatie), de achtergrondkleur van de applicatie, de volledige en afgekorte naam, enzovoort. U kunt dit manifest zelf schrijven, of u kunt een speciale tool gebruiken die het aanmaken van dergelijke bestanden automatiseert.

Een site die het gemakkelijk maakt om een ​​manifest.json-bestand te maken

▍2. Servicemedewerkers

Serviceworkers zijn gebeurtenisgestuurde medewerkers die op de achtergrond van een applicatie draaien en fungeren als tussenpersoon tussen de applicatie en netwerkbronnen. Ze kunnen netwerkverzoeken onderscheppen en informatie voor de applicatie cachen. Ze kunnen worden gebruikt om gegevens te laden die u wilt gebruiken om de toepassing offline te laten werken. Servicemedewerkers zijn JavaScript-programma's die de verwerking van bepaalde gebeurtenissen onderscheppen en bepaalde taken uitvoeren.

Hier is een voorbeeldbestand van serviceworker.js.

Self.addEventListener ("fetch", event => (// gegevens cachen om offline te werken const (request) = event; const url = nieuwe URL (request.url); if (url.origin === location. origin) ( event.respondWith (cacheData (verzoek));) else (event.respondWith (networkFirst (verzoek));))); asynchrone functie cacheData (verzoek) (const cachedResponse = wacht caches.match (verzoek); retour cachedResponse || ophalen (verzoek);)

▍3. Insignes

De pictogrammen worden gebruikt om de PWA's te starten die op het apparaat zijn geïnstalleerd. De bovengenoemde site, die helpt bij het samenstellen van manifestbestanden, stelt u in staat om automatisch een set toepassingspictogrammen te genereren op basis van een enkel grafisch bestand van 512x512 pixels dat naar deze site is geüpload. De gegenereerde bestanden worden opgeslagen in .png-indeling.

▍4. Veiligheid

Om een ​​applicatie PWA te mogen noemen, moet deze onder meer de uitwisseling van gegevens over een beveiligd communicatiekanaal met HTTPS ondersteunen. Een SSL-certificaat om zo'n verbinding tot stand te brengen is eenvoudig te verkrijgen door gebruik te maken van de mogelijkheden van diensten als Cloudflare en LetsEncrypt. Applicatiebeveiliging is tegenwoordig niet alleen absoluut noodzakelijk, het is ook een manier om de gebruiker de betrouwbaarheid van de applicatie te demonstreren en vertrouwen met hem op te bouwen.

resultaten

In dit artikel hebben we het gehad over progressieve webapplicaties, besproken waarom ze nodig zijn, welke problemen ze oplossen, welke eisen eraan worden gesteld. Hier hebben we ook gesproken over het onderwerp van hun ontwikkeling, in het bijzonder hebben we het gehad over het PWA-manifest, servicemedewerkers, applicatiepictogrammen en het feit dat ze moeten worden beschermd met HTTPS. PWA-technologie wordt vaak gezien als iets dat uitsluitend verband houdt met Android-smartphones, en tot voor kort was dit standpunt volkomen terecht. Echter, gegeven

Wat is Progressiwe Web Applications (PWA)?

In eenvoudige bewoordingen is een PWA een site die een gebruiker kan toevoegen aan het bureaublad van de telefoon en er offline mee kan communiceren.

En als we het een beetje ingewikkeld maken, dan is PWA een groep applicaties die is gebouwd op de basisstack van webtechnologieën (JS + HTML + CSS) en waarmee je de interactie met de site kunt vereenvoudigen tot het niveau van een native mobiele applicatie. De belangrijkste taak van de technologie is om de conversie van de pagina te verhogen, om de interactie van de mobiele gebruiker ermee te vereenvoudigen.

PWA-technologie is een uitbreiding van AMP. Bovendien kunnen AMP-pagina's worden "gepompt" naar Progressive Web Applications-normen.

Typische PWA-vereisten:

• Aanpassingsvermogen - correct werken op elk apparaat
• Offline - bij gebruik van Service Worker moet de applicatie offline werken
• Gemak - de gebruiker moet gemakkelijk kunnen communiceren met de applicatie op zijn apparaat
• Beveiliging - er moet bescherming zijn tegen onderschepping en gegevensvervanging
• Eenvoudig te installeren - de gebruiker moet de PWA-site met een paar klikken op zijn apparaat kunnen installeren
• Cross-platform - ontwikkelingstechnologie is niet afhankelijk van het platform (Android of iOs)

Nadelen van PWA

1. De technologie is nieuw en daarom nog niet wijdverbreid
2. Apple heeft nog niet zijn intenties uitgesproken om de technologie te ondersteunen

Waarom PWA Zakelijk?

Uit onderzoek blijkt dat gebruikers nu erg terughoudend zijn om volwaardige apps op hun apparaten te installeren.

Daarom heeft Progressive Web Applications een mooie toekomst voor zowel e-commerce als grote nieuwsportalen. Bovendien geeft de implementatie van de technologie verbluffende resultaten!

Voorbeeld PWA-toepassing

• AliExpress gebruikt PWA en verhoogde conversies met ongeveer 104%.
• Konga hun bron geoptimaliseerd, waardoor de hoeveelheid aanvankelijk gedownloade gegevens met 92% werd verminderd.
• De Washington Post na de implementatie van de PWA, verhoogde de opkomst van zijn artikelen met 12%, waardoor het laden werd versneld van 8 seconden naar 80 milliseconden

Stel je voor dat je site als een applicatie met de gebruiker communiceert. Dat wil zeggen, de gebruiker kan het op elke gadget installeren, meldingen ontvangen en ermee werken (zelfs zonder internetverbinding). Dit is al een echte technologie die Google actief promoot, en in dit bericht zal ik je er in detail over vertellen.

Progressive Web Apps (PWA) Google kondigde in 2015 aan. Dit formaat voor het bouwen van mobiele sites heeft de aandacht getrokken vanwege het relatieve gemak van ontwikkeling en bijna onmiddellijke gebruikersinteractie. Al in mei 2016 demonstreerde The Washington Post op de Google I/O ontwikkelaarsconferentie haar mobiele hybride site-applicatie.

En dit is nog maar het begin. Microsoft werkt al aan het toevoegen van Progressive Web Apps aan de Windows Store. Google kondigde in mei 2016 een lange lijst met ideeën aan voor de ontwikkeling van vooruitstrevende applicaties. En het lijkt onvermijdelijk dat zoekmachines zich in de toekomst gaan richten op PWA's.

Kijk eens van dichterbij: Progressieve apps zijn misschien wel uw gouden ticket naar de SEO van de toekomst.

Waarom moet een bedrijf progressieve web-apps bouwen, en waarom nu?

Laten we beginnen met de tweede vraag. Recode publiceerde onlangs een onderzoek dat bevestigde wat veel specialisten al in hun hoofd hebben: de hausse van traditionele applicaties is voorbij en het percentage van degenen die applicaties verwijderen blijft groeien.

Comscore meldde onlangs dat de meeste smartphonegebruikers nul apps per maand downloaden. Slechts ongeveer een derde van de smartphonebezitters downloadt op zijn minst iets, en de meesten downloaden tussen de één en drie applicaties per maand.

Waarom zullen progressieve web-apps het verschil maken?

1. Gebruikers kunnen naar progressieve apps navigeren via links naar sociale media, terwijl ze op internet surfen of rechtstreeks vanuit SERP. Mee eens, dit is veel handiger dan strijden om views met twee miljoen beschikbare applicaties in de IOS App Store of Google Play Store.

2. Een aanbod om een ​​progressieve applicatie te installeren wordt alleen getoond wanneer de webapplicatie aan bepaalde criteria voldoet en de gebruiker interesse heeft getoond door de site opnieuw te bezoeken.

3. De applicatie wordt direct geïnstalleerd. Alle componenten die een lange download vereisen, waren al in de cache geïnstalleerd toen de gebruiker de site voor het eerst bezocht.

4. Progressieve apps zijn veel kleiner omdat ze gebruikmaken van de kracht van de browser.

5. Pop-upmeldingen, offline werken en alle andere functies van de progressieve applicatie zullen werken, zelfs als de bezoeker deze nog nooit heeft geïnstalleerd.

6. Reguliere applicaties kunnen alleen worden gebruikt op het platform waarvoor ze zijn gemaakt. U kunt de applicatie op uw computer niet op dezelfde manier gebruiken als op een Android- of iOS-apparaat. Bovendien kunnen alleen degenen die het hebben geïnstalleerd de applicatie gebruiken.

Progressive Web Apps werken overal, of ze nu geïnstalleerd zijn of niet. Ze werken zelfs op platforms die nog niet alle functies van de PWA ondersteunen - zelfs oudere pc's met primitieve browsers zullen er toegang toe hebben. True - met beperkte functionaliteit.

Je zou kunnen stellen dat er desktop-applicaties zijn die op verschillende platforms worden ondersteund. Maar het ondersteunen van dergelijke toepassingen kost een aardige cent. Progressive Web Apps kunnen deze kosten verlagen door het te beperken tot één applicatie die op elk platform draait.

7. Wanneer je niet in de app store bent, ben je niet beperkt door de regels van de App Store en hoef je geen 30% van het verkoopvolume te betalen.

Nadelen van progressieve web-apps

1. PWA is een nieuwe technologie, dus er zijn niet veel voorbeelden van deze formaatimplementatie. Wie het risico neemt, wordt pionier.

2. Op het moment van publicatie zijn progressieve webapplicaties niet universeel beschikbaar. Ja, Chrome en Opera ondersteunen Progressive Web Apps. Firefox en Microsoft zijn toegewijd aan ondersteuning. Tot nu toe is alleen Apple niet van plan dit formaat te ondersteunen.

Geen van deze redenen vormt echter een obstakel voor het testen van PWA als een formaat vandaag de dag.

Wat is precies de "progressiviteit" van het nieuwe formaat?

In dit geval betekent progressiviteit dat een applicatie met beperkte functionaliteit overal en op elk gadget kan werken, maar wanneer de gebruiker overschakelt naar een geavanceerder apparaat of browser, worden de PWA-functies uitgebreid. En met dit alles hoeft het niet meerdere keren op elk van de apparaten te worden gedownload.

The Washington Post heeft een Progressive Web App gemaakt die op de achtergrond wordt geïnstalleerd terwijl mensen deze lezen. AMP-pagina's in de zoekresultaten van Google. Hierdoor steeg het aantal bezoeken aan artikelen met 12%. Van het laden van artikelen in 8 seconden in 2013 gingen ze naar 80 milliseconden in de Progressive Web App.

Waarom opschieten?

Tegenwoordig hoeft een gebruiker uw site nog maar twee keer te bezoeken om een ​​aanbieding van de browser te krijgen om de PWA te installeren. Maar naarmate het aantal technologie-implementaties groeit, zal ook de frequentie van installatievoorstellen veranderen, en zullen er minder van dergelijke voorstellen zijn. Steeds meer bedrijven beginnen Progressive Web Apps te omarmen en het zal al snel moeilijk worden om je te onderscheiden van de massa.

Het is verbazingwekkend hoe snel de technologie verandert. Gisteren was iedereen verrast door de snelle ontwikkeling van native mobiele applicaties, maar vandaag zijn we getuige van een nieuwe evolutie.

Niemand had kunnen vermoeden dat de ontwikkeling van mobiele applicaties zo drastisch zou veranderen. Dus waar hebben we het over?

In 2015 kondigde Google de creatie van een nieuwe technologie aan: Progressive Web App (PWA). Toen namen echter maar weinig mensen deze innovatie serieus. Niettemin wordt PWA tegenwoordig een populaire trend.

Dus wat is deze technologie - Progressive Web App? Progressieve mobiele apps zijn het product van de gezamenlijke evolutie van een mobiele site en een native app. Simpel gezegd, een hybride die het beste van zijn voorgangers heeft opgenomen.

Nu zijn het gemak van het installeren en openen van een mobiele site en de functionaliteit van de native applicatie (push notificaties, gps-navigatie en andere native functies) één geheel geworden.

Zowel klanten als gebruikers profiteren van deze technologie.

Zo'n applicatie kan meerdere malen goedkoper en sneller worden ontwikkeld dan een native, wat voor kleine bedrijven veel nieuwe kansen biedt.

Voor gebruikers zijn de voordelen niet minder belangrijk: het neemt geen ruimte in beslag in het geheugen van de telefoon, het is niet nodig om de applicatie uit winkels te downloaden.

Een van de belangrijkste voordelen van PWA ten opzichte van native apps is het ontbreken van een tussenpersoon in de vorm van App Store en Google Play. De technologie van progressieve webapplicaties elimineert deze overbodige koppeling volledig.

Het gebrek aan app-winkels voor ontwikkelaars betekent dat ze niet langer de gevestigde regels en het beleid van Apple en Google hoeven te volgen, en voor gebruikers - vereenvoudigde installatieprocedure. Om een ​​PWA te openen, gaat u gewoon vanaf een mobiel apparaat naar de website van het bedrijf en de gekoppelde webtoepassing wordt automatisch geopend.

In dit geval kunt u het pictogram van een dergelijke toepassing op het telefoonscherm installeren. Om dit te doen, moet u in het automatisch geopende dialoogvenster akkoord gaan met de installatie.

Deze installatiemethode verschilt opvallend van het installeren van een reguliere (native) applicatie. In feite is het PWA-pictogram een ​​afbeelding met een link naar een webtoepassing die opent via een browser, waarmee de gebruiker op elk moment de gewenste toepassing kan starten. Een ander belangrijk verschil tussen PWA en "heavy native" is dat PWA bijna geen ruimte inneemt in het telefoongeheugen van de gebruiker.

Maar voordelen zijn voordelen, maar hoe zit het in de praktijk?

Terwijl sceptici op hun hoede zijn voor de nieuwe technologie, testen pioniersbedrijven het product van mobiele evolutie uit de eerste hand.

Dus een van de eerste bedrijven die PWA uitprobeerde, was Lancôme - een beroemd Frans cosmeticamerk.