U heeft ongetwijfeld gehoord van de komende golf van het mobiele web. Het meest voorkomende dat u waarschijnlijk heeft gehoord, is dat mobiele internettoegang snel toeneemt, en ongeveer de helft van al het webverkeer verloopt nu via telefoon of tablet. EEN 2018-rapport van februari van het Pew Research Center merk op dat 95% van alle Amerikanen een mobiele telefoon bezit, terwijl het aandeel Amerikanen met smartphones 77% is.
U hoeft niet ver te zoeken om de impact van mobiel te zien. Kijk naar uw eigen gedrag en dat van uw gezin. In december 2016 comScore meldde dat de gemiddelde Amerikaan ouder dan 17 twee uur en 51 minuten per dag aan zijn telefoon besteedt (Englais).
Statcounter.com merkt op dat wereldwijd webverkeer voornamelijk van mobiele apparaten komt gedurende minimaal een jaar (51,95% in februari 2018).
Hoewel u misschien denkt dat u het zich niet kunt veroorloven om een native app te ontwikkelen die uw mobiele gebruikers op hun telefoons kunnen opslaan, is er voor elk bedrijf een geweldig alternatief beschikbaar: Progressive Web Applications. Misschien heb je gehoord van Progressive Web Applications (PWA's) en hoe mensen ze gebruiken om hun bedrijf te laten groeien. In dit artikel leer je iets meer over PWA's en waarom je in 2018 meer over het gebruik ervan zou moeten nadenken.
Enkele definities
Progressive Web Applications (PWA's) zijn een verzameling webstandaarden die oorspronkelijk door Google zijn ontwikkeld om de prestaties van websites op mobiele apparaten te verbeteren. Als gevolg hiervan functioneren websites meer als speciale mobiele apps die u kunt vinden in de App Store van Apple of Google Play.
ander definitie ontwikkelaars voor de Indiase hotelketen Treebo: “PWA's zijn applicaties van één pagina die stapsgewijs worden verbeterd met functies die een meer meeslepende native ervaring bieden. »
Door dat een beetje te verminderen, kunnen PWA's op mobiele apparaten uw lezers en klanten snel de startpagina van uw site laden en veel van dezelfde functies op het mobiele apparaat gebruiken die een native app zou gebruiken. Uw site kan buiten de browser bestaan, zelfs als het apparaat geen verbinding met internet heeft.
Andere definities
Enkele van de belangrijkste technische onderdelen van een PWA zijn:
Diensten Werknemers zijn de belangrijkste technologie die wordt geassocieerd met PWA's. Hierdoor kunnen PWA's buiten het netwerk opereren.
Manifest-bestanden het pictogram en de naam bevatten die de applicatie op het apparaat koppelen aan de Site web. De ontwikkelaar kan hier ook ontwerpelementen toevoegen om uw klantervaring te verbeteren.
Push-meldingen communiceren met uw gebruikers (met hun toestemming), zodat ze terugkomen.
Enkele redenen
Dus waarom zou uw site een PWA moeten bevatten? Het is vrij eenvoudig.
Betere prestaties - zelfs op de desktop!
Je weet dat je maar een beperkte tijd hebt om een bezoeker voor de eerste keer – zes seconden laden voordat een potentiële klant vertrekt en de volgende site in de zoekresultaten bezoekt. Mobiele gebruikers zijn zelfs nog ongeduldiger: de helft van uw potentiële gebruikers vertrekt als het laden van een site meer dan 3 seconden duurt!
Goed nieuws: de wijzigingen die u aanbrengt om een progressieve webtoepassing te maken, versnellen uw site!
Voorbeeld: het Indiase hotelbedrijf Treebo heeft hun mobiele oplaadtijd teruggebracht van zes seconden naar 1,5 seconde door hun PWA te creëren. De site laadt nu binnen een seconde op de desktop! Hun technische team meldde dat de zoekrangschikking van de site is verbeterd en dat de maandelijkse conversieratio meer dan verdubbeld is!
Offline capaciteit
PWA hoeft hiervoor niet op internet te zijn. Uw gebruikers hebben toegang tot alle inhoud van de app vanaf hun apparaat of desktop.
Een van de leukste dingen van een PWA is zelfs dat uw klant de site kan opslaan op de startpagina van zijn apparaat en deze later kan gebruiken om uw product te kopen of om meer informatie te krijgen. .
Bijvoorbeeld, CNET Tech Today biedt een dagelijkse samenvatting van het technologiegerelateerde nieuws dat het dagelijkse brood van de site is. Als je de site opent met Google Chrome op een Android-apparaat en naar beneden scrolt naar de onderkant van het scherm, zie je dit:
pers Toevoegen aan startscherm om de Progressive Web-app van Tech Today naar uw apparaat te downloaden. Tik op het pictogram om de top 10 huidige verhalen te laden. Veeg naar links om elk verhaal te lezen. Tik op het CNET-logo om de CNET-startpagina in uw browser te openen.
Opmerking : In Firefox hebben sites met PWA een pictogram "Toevoegen aan startpagina" (een plusteken in een klein vakje) rechtstreeks op de adresbalk. Als de PWA al is geïnstalleerd, brengt het Android-logo op de adresbalk u naar de PWA.
Eén ding heeft uw site niet nodig: "Download onze app" -widgets nemen ruimte in op uw pagina (meestal met afleidende iTunes- en Android-logo's). Als Chrome merkt dat een gebruiker uw PWA-site meerdere keren per week heeft geopend, wordt u gevraagd uw PWA toe te voegen. Updates zijn ook automatisch.
Geen behoefte aan complexe programmeertalen
Je hebt misschien overwogen om een native mobiele app voor je bedrijf te bouwen, maar ontdekte dat het bouwen van een mobiele app een ander dier is dan het bouwen van een Site web. Als je samenwerkt met een webdesign-/ontwikkelingsbureau om je site te onderhouden, hebben ze niet per se de vaardigheden om een app te bouwen voor reguliere mobiele leveranciers.
Om ervoor te zorgen dat uw software wordt weergegeven in de Apple App Store, moeten uw ontwikkelaars zich registreren bij het Apple Developer Network, de Apple Developer Tool gebruiken (die alleen op Mac werkt) en een taal kennen van Door Apple goedgekeurde programmering: Swift of Objective C.
Programmeren voor Android is iets eenvoudiger (er is geen goedkeuring van de ontwikkelaar vereist), maar de overgrote meerderheid van Android-apps is geschreven in Java, wat een moeilijke taal kan zijn om te leren.
Om ervoor te zorgen dat de app in Apple- of Android-online winkels verschijnt, moet de voltooide app goedkeuring krijgen van de beheerders van de betreffende winkel.
Progressieve web-apps daarentegen zijn gebouwd met populaire webtalen: HTML, CSS (Cascading Style Sheets) en JavaScript. Kortom, zelfs beginnende webontwikkelaars kunnen PWA's van hoge kwaliteit bouwen.
Concreet heb je niet veel computeronderwijs nodig om een PWA voor je WordPress-site te doen. Als je de opmaak van je site al hebt gewijzigd met een child-thema, kun je ook een PWA-bestand maken. We behandelen coderingsproblemen in een ander artikel.
Vergroot de ondersteuning van technologische reuzen
Het duurt lang voordat normen normen worden. Google promootte voor het eerst PWA's in 2015.
Chrome was lange tijd de enige browser die PWA's ondersteunde, maar dat gaat veranderen. In de afgelopen maanden:
- Mozilla heeft PWA-ondersteuning toegevoegd in Firefox 58
- Apple heeft onlangs ondersteuning aangekondigd voor webapplicaties in iOS
- Microsoft ondersteunt PWA in de volgende versie van Windows 10, die later dit jaar beschikbaar zal zijn (2018).
Microsoft gaat verder dan andere leveranciers van besturingssystemen en zei dat "hoogwaardige" PWA's binnenkort zullen worden geïntegreerd in de Windows 10 app store op mobiele telefoons en desktops.
WordPress en PWA's
WordPress ondersteunt het bouwen van progressieve webapps in de basisapp nog niet volledig. Het Jetpack-team zet zich in om het komende jaar PWA-functionaliteit toe te voegen. Dit wordt ondersteund door de Javascript-ificatie van WordPress.
Jetpack "Introduceert geleidelijk PWA-functies zodra ze gereed zijn", zegt ontwikkelaar Dan Walmsley in een artikel over de WordPress VIP-blog . Ontwikkelaars kunnen manifestbestanden toevoegen met behulp van de Jetpack-manifestmodule sinds versie 5.6.0, en ze hebben het progressief laden van afbeeldingen geïntroduceerd, waardoor de site sneller wordt geladen, zelfs als er veel afbeeldingen op staan. de pagina. Dit jaar komen er meer functies.
Een paar plug-ins proberen PWA-functionaliteit toe te voegen, maar zijn niet zwaar geadopteerd.
- De WordPress-optimalisatietool biedt een werkende en manifeste tool.
- Super Progressive Web Apps genereert onder meer een manifest en een knop Toevoegen aan het startscherm.
- Het WordPress Mobile Pack voegt ook PWA-functies toe
Hoe ga je de PWA gebruiken?
In deze tutorial heb je iets geleerd over Progressive Web Apps en waarom je er een zou toevoegen aan de Site web van uw bedrijf:
- De groeiende golf van mobiel apparaatverkeer
- Betere prestaties voor uw website - mobiel en desktop
- Beschikbaarheid zelfs als het apparaat offline is
- Gebruikt standaard webfuncties: HTML, CSS en Javascript. Goedkoper om te bouwen
- Verhoogde ondersteuning voor browsers en besturingssystemen
Misschien wil je nu weten hoe je een PWA in WordPress doet? Of laat je ontwikkelaars zien hoe ze het moeten doen? Dit zal het onderwerp zijn van een andere tutorial.
