Het is jaren geleden sinds het begin van de leeftijd van de smartphone. Daarmee kwam het tijdperk van native apps. Apps blijven een enorme rol spelen in ons dagelijks leven, en veel ondernemers hebben zich meerdere keren afgevraagd: moeten we een app? Natuurlijk, het enige antwoord daarop is — het hangt ervan af. Het bouwen en onderhouden van een native app is omslachtig en vaak vrij duur. Gelukkig is er een andere optie. Deze optie combineert de geneugten van een native app met de technologie die we op het web gebruiken: de progressive web app, oftewel PWA.

Wat is een PWA?

PWA staat voor progressive web app. Dit is een app gebouwd op basis van de webtechnologieën die we allemaal kennen en houden, zoals HTML, CSS en JavaScript, maar met een gevoel en functionaliteit die een echte native app rivalen. Dankzij een paar slimme toevoegingen, kunt u bijna elke website om te zetten in een progressieve web app. Dit betekent dat je een PWA vrij snel kunt bouwen, met betrekking tot een native app die vrij moeilijk te ontwikkelen is. Bovendien kunt u alle functies van native apps aanbieden, zoals pushmeldingen, offline ondersteuning en nog veel meer.

veel sites die je online vindt zijn eigenlijk een progressieve web app. Nemen twitter.com bijvoorbeeld. Als u die site op uw smartphone bezoekt, kunt u deze installeren op uw startscherm. Nu, bij het openen van de opgeslagen Twitter-site, zult u merken dat het eruit ziet en presteert net als een native app. Er is geen browservenster of niets. Er is geen verschil in het uitvoeren van het vanaf een iPhone of een Android-smartphone. Log gewoon in en je bent klaar om te gaan. Dat is een groot voordeel van het bouwen van uw web app met een PWA in het achterhoofd.

PWA ‘ s winnen aan populariteit. Veel grote sites zijn PWA ‘ s, zoals Starbucks.com, Pinterest.com, Washingtonpost.com en Uber.com zijn eigenlijk installeerbaar op uw startscherm en bieden een vergelijkbare ervaring met hun native apps.

Wat is het verschil tussen een native app en een PWA?

een native app, zoals die je downloadt van Apple ’s App Store of Google’ s Play Store, is vaak gebouwd in een programmeertaal die specifiek is voor dat platform. Dus voor iOS-apps, dat zou Swift en voor Android-apps, Java. Als je een app voor die platforms wilt bouwen, moet je de technologie kennen. Ja, er zijn snelkoppelingen, maar deze komen met hun eigen beperkingen. Als u een app op alle mobiele platforms wilt hebben, moet u alle verschillende technologieën kennen. Er is geen gemakkelijke manier om een te bouwen en te publiceren naar alle winkels die er zijn.

natuurlijk zijn er manieren om het beste van beide werelden te krijgen. Een progressieve web app, bijvoorbeeld. Dit draait in de browser en — eenmaal opgeslagen op het startscherm-functies als een native app. Het krijgt zelfs toegang tot de onderliggende hardware en software die de browser om veiligheidsredenen niet kan openen. Als de PWA presteert geweldig, gebruikers zullen nooit weten dat ze met behulp van een web-based app in plaats van een native een.

Er zijn natuurlijk enkele kanttekeningen. Terwijl browsers zijn snel om de technologie voor deze te nemen, zijn er nog enkele beperkingen. Op iOS werkt de benodigde technologie vlekkerig in Safari. Apple niet (willen) ondersteunen alles nog, waardoor het een beetje een karwei om dezelfde exacte ervaring overal te krijgen.

Wat zijn de voordelen van een PWA?

de belangrijkste reden waarom iedereen apps najaagt is omdat ze een grotere betrokkenheid bieden. Gebruikers die uw app installeren zijn uw grootste fans en ze hebben meer kans om hun gebruik om te zetten in verkoop of aanmeldingen. Dankzij pushmeldingen is het veel gemakkelijker om opnieuw contact met gebruikers op te nemen. Apps kunnen een uitstekende ervaring bieden die goed kan doen voor een merk.

we hebben het gehad over enkele pluspunten van PWAs in dit artikel, maar hier is een kort overzicht:

• Je hoeft niet te gaan door het proces te krijgen in de verschillende app stores
• U kunt bouwen PWAs met web technologieën
• Ze zijn vaak goedkoper om te bouwen
• Aangezien u het omzetten van uw site in een app, je hebt minder code-bases te behouden
• PWAs reageren en werken met veel verschillende scherm groottes
• PWAs zijn glad, snel en licht in gewicht
• Geen behoefte aan de hand van grote stukken van geld naar Google en Apple
• Ze offline werken, in tegenstelling tot uw gewone site
• PWAs zijn vindbaar via zoekmachines (die hebben een veel grotere publiek dan app stores. Plus, als je wilt kun je nog steeds je PWA ‘ s verspreiden via app stores)
• je kunt pushmeldingen gebruiken om gebruikers opnieuw te betrekken
• het installeren van een PWA kan leiden tot een hogere betrokkenheid

toch winnen native apps soms. PWA ‘ s krijgen steeds dieper toegang tot het besturingssysteem van een smartphone, maar een native app kan nog dieper gaan. Plus, er zijn grenzen aan wat een PWA kan doen. Bijvoorbeeld, PWA ‘ s zijn niet de beste keuze wanneer u wilt high-performance games te bouwen.

al met al heeft het veel zin om na te denken over het hebben van een PWA in je mobiele strategie. Maar de belangrijkste vraag die je jezelf moet stellen is: wil mijn publiek dit?

voor wie is dit?

moet iedereen gewoon een PWA bouwen en ermee klaar zijn? Nee, overweeg uw bedrijf en-nog belangrijker-uw doelgroep. Gebruiken ze zelfs apps? Is dit niet een te complexe manier om te bereiken wat je wilt bereiken? Nogmaals, zoals alles, je nodig hebt om de behoeften van uw publiek te onderzoeken. Vraag jezelf af, wat wil je dat deze technologie doet? Waar zijn uw gebruikers? Hebben ze een goede dataverbinding en solide hardware? Hoe en waar gebruiken ze jouw content? En denk je dat een app hen kan helpen hun werk beter te doen?

PWA ‘ s zijn geweldig en het implementeren ervan hoeft niet zo moeilijk te zijn. Maar dat het makkelijk is, betekent niet dat je het moet doen. Als je publiek er geen behoefte aan heeft, waarom zou je er dan een bouwen?

wat zijn de SEO zorgen van een PWA?

de PWA is inherent web-centrisch. Het werd geboren uit het web en ontwikkeld met zoekmachines in het achterhoofd om ontdekking gemakkelijk te maken. Natuurlijk, u kunt een progressieve web app te maken van een-oude site en het duurt niet veel om dit te doen. Echter, veel PWA ‘ s gebruiken JavaScript om meer complexe functionaliteit te bouwen en hoewel zoekmachines geschikt zijn geworden bij het renderen van JavaScript, kan het nog steeds een reden tot bezorgdheid.

bij het opzetten van een PWA moet u ervoor zorgen dat uw JavaScript toegankelijk is. Blokkeer geen bestanden voor bots en zorg ervoor dat links beschikbaar zijn. Om het renderingsproces te verbeteren kunt u uw JavaScript framework gebruik maken van server-side rendering.

het veranderen van uw site in een PWA betekent niet dat u direct de SEO van die site verbetert. Als het zinvol is om uw site te zetten in een PWA, doe dat, maar doe het niet voor een waargenomen SEO voordelen. Als u een geweldige PWA, u biedt uw gebruikers een fantastische gebruikerservaring, die je zou kunnen maken een-up van uw concurrentie. In dit verband, het is een goed idee om een kijkje te nemen op hen voor uw mobiele SEO strategie.

Wat zijn de drie belangrijkste bouwstenen?

het opzetten van een PWA kost niet veel. Er zijn drie dingen die je moet verstrekken voordat uw site verandert in een geldige PWA.

• een beveiligde verbinding (https): PWAs alleen werken op vertrouwde verbindingen, Je moet ze bedienen via een beveiligde verbinding. Dit is niet alleen om veiligheidsredenen, maar het is ook een zeer belangrijke vertrouwensfactor voor gebruikers.
• een servicewerker: een servicewerker is een script dat op de achtergrond draait. Dit helpt u te bepalen hoe u netwerkaanvragen voor uw PWA behandelt, waardoor het mogelijk is om complexer werk te doen.
• het manifest-bestand: Dit JSON-bestand bevat informatie over hoe uw PWA moet verschijnen en functioneren. Hier bepaal je de naam, beschrijving, pictogrammen, kleuren, enzovoort.

Hier is een voorbeeld manifest van Google:

het ziet er niet zo moeilijk uit, toch? Een paar interessante dingen in deze lijst:

• start-url: dit bepaalt waar uw app moet starten. Het is beter om gebruikers te laten landen op een specifieke pagina voor je PWA.
• display: Hiermee kunt u bepalen welk type browserinterface u wilt weergeven. Opties zijn fullscreenstandaloneminimal-ui en de standaard browser interface.

deze drie dingen hierboven zijn de minimale vereisten voor het uitvoeren van een PWA. U kunt de functionaliteit uitbreiden via JavaScript (frameworks).

hoe een PWA instellen?

Er zijn genoeg bronnen om een eenvoudige PWA te bouwen. Dit stelt u in staat om een gevoel voor het proces te krijgen. Google heeft een uitstekende, gemakkelijk te volgen tutorial op PWAS op het web.dev site. Mozilla heeft veel documentatie over het bouwen van progressieve web apps. Microsoft heeft ook rijke Ontwikkelaar docs op het bouwen van PWAs. Microsoft bouwde zelfs een tool genaamd PWABuilder die u zal helpen uw site om te zetten in een PWA. Natuurlijk zijn er WordPress plugins die u helpen een PWA van uw site te maken. Bovendien, Google werkt aan het brengen van base-Ondersteuning Voor Pwas naar WordPress Core.

Betrek uw gebruikers met een progressieve web app

progressieve web apps kunnen een geweldige aanvulling zijn op uw mobiele toolkit. Goed gedaan, ze zijn snel, werken offline en presteren als een native app. Al met al, ze kunnen bieden uw gebruikers een geweldige gebruikerservaring. Geëngageerde gebruikers zijn gelukkige gebruikers, toch?