(PWA) 2021-ben hódítanak a Progresszív Web Alkalmazások

PWA jól működik a természetben is, offline.
forrás: Unsplash.com / Nature Mobile

A Progresszív Web Alkalmazás, röviden PWA, olyan megoldás, ami a weblap és a mobil app között helyezkedik el. Részben tartalmazza azokat a funkciókat, amiket egy mobil app tud, de kényelmesebb egy weblapnál. Ebben a cikkben ennek részleteit gyűjtöttem össze.

Mi egy PWA pontosan?

A PWA nem más, mint egy weboldal (HTML, CSS) technológiájára épülő mobil alkalmazás. Ennél persze többről van szó!

Az előző gondolat egy leegyszerűsített értelmezés, de kétség kívül ez az alapja. Alex Russell és Frances Berriman fogalmazták meg azt a 9 ismérvet, amit egy PWA -nak tudnia kell.

  1. Reszponzív: bármelyik kijelzőn jól mutat
  2. Kapcsolat független: internet kapcsolat nélkül is használható
  3. App-szerű használat: a mobil app-okban megszokott módon navigálhatunk benne
  4. Naprakész: egy un. Service Worker automatikusan figyeli, hogy mindig a legfrissebb verziót használjuk
  5. Biztonságos: TLS kapcsolatot használ, ami gondoskodik róla, hogy a forgalmat ne lehessen lehallgatni
  6. Könnyen megtalálható: egy megfelelően kitöltött un. Manifest írja le a tartalmat, amit a keresők gyorsan megtalálhatnak és indexelhetnek
  7. Elköteleződés: hozzáfér az operációs rendszer újbóli elköteleződést (re-engagement) segítő beállításaihoz, pl. Push Notification
  8. Telepíthető: Kitűzhető a mobilunk kezdőképernyőjére, hogy kézre essen a következő használatkor
  9. Linkelhető: egy linken érhető el az első használathoz, ezért könnyedén elérhető, megosztható másokkal

Hol lehet hasznos egy PWA?

A 2020-as évben beköltöztünk az online térbe egycsapásra. Naponta nyíltak (először csak kényszerből) a webshop-ok. Akinek addig nem létezett üzlete vagy vállalkozása, azok is felismerték az online vásárlás erejét. Ez felerősítette, hogy tovább bővüljenek az online vásárlások.

Nem minden webshop volt felkészülve a mobilra optimalizált megoldásokkal, ami gyors oldal elhagyást jelent a konkurencia javára. Ebből látszott, hogy a fizikai boltok szinte teljesen megszűntek, akinek nem volt online megoldása, az komoly gondba került (nagyon sokan bezártak végleg).

Egy mobilos felhasználói élményt javíthat a PWA:

  • Push Notification-k és értesítések küldése
  • Gyorsan lehet bejelentkezni a Facebook vagy Google felhasználónkkal
  • Internet nélkül is lehet vásárolni, gyűjtögetni a kosárba
  • Egyedi analitika nyomonkövetése
  • Könnyített mobil fizetési módok

Egy PWA jó belépő lehet akkor, ha nem akarjuk a felhasználót rákényszeríteni egy újabb app telepítésére, viszont a vállalkozásunkat pörgetni akarjuk.

Egy fodrászat, műkörmös időpontfoglalása egyszerűsödik. Mindenki magának intézheti, kényelmesen. A fodrásznak sem kell a hajas kezével, az ügyfelét késlekedve telefonokat bonyolítania. Ehelyett egy naptárat lát, aki szeretne menni, megadhatja a frizura típusát, így ez alapján becsülhető az idő. Elegendő az időpontra érkezni, ami csökkenti a sorbanállást.

A turisztikai app-ok töretlen sikernek örvendenek. A korlátozott utazások miatt egyéb, eddig nem ismert megoldásokat igényelnek a kirándulók.

A webshop-okról már volt szó, előnyük egyértelmű.

Meg kell jelenni az online térben, különben nem létezik az a vállalkozás, amelyik nem így tesz. Az egyszerű, tájékoztató jellegű, céges honlapok ideje lejárt.

A cégek berendezkedve a hibrid munkavégzésre, a munkaerőnek új szolgáltatásokat szeretne biztosítani. A Home Office elterjedésével már jóval túlmutat ez az egyszerű munkaidő regisztrálásán. Egy feladatkezelő könnyedén naprakészen tartja, hogy ki-mikor-mit végez? Céges eseményekről lehet értesíteni a dolgozókat. Visszajelzéseket kérni a felhasználóktól, hogy csak egy pár példát említsek.

A fentiek inkább a mobiltelefonos felhasználását hangsúlyozták, azonban van egy fontos terület még: az asztali számítógépen való használat. Egy ügyviteli rendszer, egy webshop adminisztrációs felület ugyan olyan jól kialakítható vele, mint egy mobil app. Véd a váratlan internet kapcsolat megszakadása ellen, és tovább tudunk dolgozni a programmal.

A PWA hátrányai

Azáltal, hogy nem az alkalmazás áruházakból (Google Play vagy App Store) telepítjük őket a telefonjainkra, elveszítjük annak a mérésnek a lehetőségét, hogy feltárjuk a célközönségünket. Ezek némileg kiküszöbölhetőek más analitikai megoldásokkal. Lényegében nem biztos, hogy az fontos számunkra, hogy mikor telepítették, és kik, hanem hogy valóban hozott-e forgalom növekedést. Minden esetre ez egy olyan tényező, amit SEO szempontjából érdemes figyelembe venni.

Bár egy PWA jobban kihasználja egy mobil képességeit, bizonyos funkciókhoz nem biztos, hogy hozzáférünk. Ilyen lehet a Bluetooth kapcsolat, vagy a GPS adatok. Főleg az Apple az iPhone-okon korlátozza ezek telepítését. Mérlegelni kell, hogy a fenti funkciókra valóban szükségünk van-e, és ha tényleg elengedhetetlen, akkor választani egy natív megoldást, ami ezt megoldja.

Alapvetően a telefonunkon lévő böngésző szab gátat a telefonon elérhető funkcionalitások kihasználásához, de néhány trükkel ezek bizonyos mértékig tágíthatóak. Azonban fontolóra kell venni, hogyha egy speciális képesség kell a telefonunkról, akkor a PWA szűk lesz egy idő után, és a natív irányba kell elmozdulnunk.

Mit kapunk a pénzünkért?

Azok a jó megoldások, amik belátható beruházások mellett a megtérülést szem előtt tartva valósulnak meg. Jó szempont az, ha kicsiben indulunk, és az igények növekedésével tudjuk fejleszteni a terméket.

Ma már van rá lehetőség, hogy a prototípustól (Figma), egy PWA-n keresztül el tudunk jutni egy natív app-ig. Közben nem kell mindig az elejéről kezdeni a fejlesztést. Ha ugyan az a csapat, a későbbiekben onnan tudja folytatni, ahol abbamaradt a fejlesztés, azzal sok idő és pénz takarítható meg.

Megoldások

A Flutter Web-es megoldása kínál olyan PWA megoldást, ami a későbbiekben natív Android vagy iOS applikációkká bővíthető. Ennek tetejében a két platformra egyszerre készül el a program. A Flutter keretrendszerről írtam korábban, ami nagyon jó megoldást kínál egy PWA vagy SPA (Single-Page Application) kiadásához.

Amennyiben nem vagy biztos benne, hogy merre indulj el, keress meg bizalommal, hogy beszéljünk a személyre szabott megoldásodról!

További Flutter-ről szóló cikkjeimet érdemes elolvasni.

A cikk megírásához a www.coredna.com hasonló posztjából szemezgettem.