MobilalkalmazásPWAÚjdonság

Webshop mobilalkalmazás PWA-val: a bolt ikonja a vevő telefonján

Okostelefon kézben, a kezdőképernyőn színes alkalmazásikonokkal, a háttérben bevásárlótáska és kávésbögre

A visszatérő vevő ritkán gépeli be újra a bolt címét. Rákeres, megnyit egy régi levelet, vagy egyszerűen elfelejti, hol vette legutóbb azt a teát, ami annyira ízlett neki. Egy saját mobilalkalmazás ezen segít, mert a bolt ott marad a telefonján, a többi alkalmazás között.

Egy natív alkalmazás elkészítése és a két alkalmazásboltban tartása viszont kis boltnak nagy falat. Erre való a PWA. Ebben a cikkben leírjuk, mi ez pontosan, hogyan telepíti a vevő Androidon és iPhone-on, mit tud a dajkashop webshop mobilalkalmazása, és melyik csomagban mennyibe kerül.

Mi az a PWA, emberi nyelven

A PWA rövidítés a progressive web app kifejezésből jön. A lényeg: a webshopod weboldala úgy viselkedik, mint egy alkalmazás. A vevő hozzáadja a telefonja kezdőképernyőjéhez, onnantól a bolt saját ikonnal ott van a többi alkalmazás között, és ha megnyitja, nem egy böngészőablak jön fel címsorral, hanem teljes képernyőn a bolt.

Nem kell hozzá alkalmazásbolt, nem kell külön fejleszteni, és nem kell frissítést kiadni. Amit a webshopban módosítasz, az az alkalmazásban is azonnal látszik, hiszen ugyanaz a bolt.

A bemutató bolt főoldala telefonon, az Üvegház kinézettel
A bemutató bolt telefonon. Telepítve ugyanez jelenik meg, csak a böngésző címsora nélkül.

Hogyan telepíti a vevő

A telepítés helye a bolt lábléce. Ahol a mobilalkalmazás be van kapcsolva, ott a láblécben megjelenik egy Alkalmazás letöltése link. Ez a link mindig ott van, nem egyszeri felugró ablak, tehát az a vevő is megtalálja, aki elsőre bezárta a felugró sávot. Ha valaki már telepítve használja a boltot, a link nála nem jelenik meg.

Androidon

Androidos telefonon a böngésző saját telepítő ablakot ad. A vevő a linkre koppint, a böngésző rákérdez, hogy telepítse-e, és egy koppintás után az ikon ott van a kezdőképernyőn.

iPhone-on és iPaden

Az iPhone Safari böngészője nem ad ilyen automatikus telepítő ablakot, ezért régebben iPhone-on a vevő semmit nem látott. Mostantól iPhone-on egy rövid várakozás után megjelenik egy sáv, és egy lépésenkénti útmutató nyílik meg, ugyanez jön a lábléc linkjéről is:

  1. Koppints a Megosztás gombra (négyzet, felfelé mutató nyíllal). Safariban a képernyő alján, Chrome-ban a címsor jobb oldalán van.
  2. Görgess lejjebb, és válaszd a Főképernyőhöz adás pontot.
  3. Koppints a Hozzáadás gombra, és a bolt ikonja megjelenik a kezdőképernyőn.
  4. Az ikonra koppintva a bolt teljes képernyőn nyílik meg, címsor nélkül.

Van egy gyakori csapda: ha a vevő egy közösségi alkalmazás, mondjuk a Facebook beépített böngészőjében nyitotta meg a boltot, onnan nem lehet telepíteni. Ilyenkor az útmutató ezt meg is mondja neki, és azt kéri, hogy nyissa meg a lapot a rendes böngészőben.

Képernyőkép helye

helyorzo:A kirakat telefonon (iPhone, Safari), egy olyan boltban, ahol a mobilalkalmazás be van kapcsolva: a megnyitott iPhone-útmutató a három lépéssel (Megosztás, Főképernyőhöz adás, Hozzáadás). Demó bolt vagy saját bolt, vevőadat nélkül.

Más böngészőkben

Ahol nincs telepítő ablak, például néhány kevésbé elterjedt böngészőben, a vevő rövid útmutatót kap: a böngésző menüjében az Alkalmazás telepítése vagy a Hozzáadás a kezdőképernyőhöz pontot kell választania.

Az ikon a bolt logójából készül

A kezdőképernyőn az ikon a bolt arca. Ha minden bolt ugyanazt az általános ikont kapná, a vevő nem találná meg a sajátját. Ezért ha az adminban feltöltöttél saját alkalmazás-ikont, az kerül a kezdőképernyőre. Ha nincs ilyen, a bolt logója a bolt színén, és ha logó sincs, a bolt nevének kezdőbetűje, szintén a bolt színén.

Az ikon PNG formátumban, több méretben készül el, mert az iPhone a kezdőképernyőre csak PNG ikont fogad el, és az Android telepítése is ezekkel a méretekkel megbízható. A telepített alkalmazás neve a bolt neve, a színe a bolt saját márkaszíne.

Mit állítasz be az adminban

A bolt beállításai között van egy PWA, Mobilalkalmazás nevű kártya. A tetején egy jelvény mutatja, hogy a mobilalkalmazás aktív-e, alatta egy mondat arról, honnan jön a jogosultság: a csomagodból vagy az App Store-ban bekapcsolt Mobilalkalmazás modulból.

Ugyanitt két dolgot állíthatsz. Az egyik a téma színe, ami a telefonon az alkalmazás körüli rendszersávot színezi. Ha nem állítod, a bolt márkaszíne marad. A másik a saját alkalmazás-ikon, ha a logód kezdőképernyőn nem mutat jól, például mert hosszú, fekvő felirat. Ilyenkor érdemes egy négyzetes, egyszerű jelet feltölteni.

Egy apró tipp: a telepítés előtt nézd meg a saját telefonodon, hogyan fest az ikon a többi alkalmazás között. Egy fehér hátterű logó például fehér háttérképen eltűnhet, ilyenkor a bolt színe mögötte sokat segít.

Miben más, mint egy alkalmazásboltból letöltött app

Őszinték leszünk, mert ezt sokan kérdezik. A PWA nem jelenik meg az alkalmazásboltokban, tehát ott keresve nem talál rá senki. A vevő a boltodon keresztül jut el hozzá, a láblécből vagy az iPhone-os sávból. Cserébe nincs jóváhagyási folyamat, nincs külön fejlesztői fiók, és nincs külön frissítés: a bolt minden változása azonnal megjelenik a telepített változatban is.

A legtöbb webshopnak ez a csere megéri, mert a vevő amúgy is a boltból érkezik, hirdetésből, keresőből vagy hírlevélből. A telepítés ott történik, ahol a vevő már bent van, és nem egy idegen áruházban kell rátalálnia.

Külön ár az alkalmazásból vásárlóknak

Ez a rész a marketingeseknek szól. Ha szeretnéd, hogy a vevők tényleg telepítsék az alkalmazást, adhatsz nekik okot rá: az alkalmazásból vásárlók más árat láthatnak, mint a böngészőből érkezők.

Ehhez nem kell új árrendszer. A meglévő csatorna-árazásra épül, amit eddig például piactéri árakhoz használtál:

  1. Az adminban a Csatornák és Árak oldalon létrehozod a PWA-csatornát egy gombbal (a neve Alkalmazás (PWA) lesz).
  2. A termékszerkesztő Csatorna árak fülén termékenként megadod az alkalmazásbeli árat, akár akciós árral együtt.
  3. Ahol nem adsz meg külön árat, ott az alapár marad.
  4. Ha a csatornát inaktívra állítod, az alkalmazásbeli ár nem érvényesül.

Lényeges részlet, hogy ez az ár a terméklapon túl is érvényes. A kosár, a kedvezmények és a pénztár is ugyanazt az árat használja, tehát nem fordulhat elő, hogy a vevő az alkalmazásban kedvezőbb árat lát, de a pénztárban a webes árat fizeti.

Hogy mekkora kedvezményt érdemes adni, azt a saját árrésed dönti el. Van, ahol egy szimbolikus pár száz forint is elég ahhoz, hogy a törzsvevő telepítse, és van, ahol inkább csak az ingyenes szállítás határát érdemes lejjebb vinni.

Képernyőkép helye

helyorzo:Admin, Csatornák és Árak oldal: az Alkalmazás (PWA) ár doboz a létrehozott PWA-csatornával, alatta a csatornalista. Ha nincs még csatorna, a PWA-csatorna létrehozása gomb.

Értesítések a OneSignalon keresztül

Sokan azért szeretnének alkalmazást, hogy értesítést küldhessenek a vevőnek egy akcióról vagy egy újra kapható termékről. A dajkashop ehhez a OneSignal nevű szolgáltatást köti be.

Így néz ki: létrehozol egy saját fiókot a OneSignalnál, és az ott kapott App ID-t az adminban az Integrációk között, a OneSignal Web Push kártyán adod meg, majd bekapcsolod. Ezután a kirakat felajánlja a vevőnek az értesítésekre való feliratkozást, böngészőben és telepített alkalmazásban is. Az üzeneteket a OneSignal saját felületén írod meg és küldöd ki, a dajkashop adminjából értesítést nem lehet küldeni.

Ez a bekötés friss, és egyelőre előkészítő állapotban van: az App ID megadása és a feliratkozás működik, de a saját boltodon érdemes egy próbaüzenettel kipróbálni, mielőtt a vevőknek szánt első kampányt kiküldöd. iPhone-on az Apple a webes értesítést csak a kezdőképernyőre tett alkalmazásnak engedi, tehát ott a telepítés az értesítés feltétele is.

Gyorsaság és friss adatok

A telepített alkalmazás a bolt állandó fájljait, például a stíluslapokat és a programkódot a telefonon tárolja, ezért gyorsabban nyílik meg. Az ár, a készlet és a kategóriák viszont mindig a szerverről jönnek, nem egy régi tárolt másolatból. Ez szándékos: egy webshopban a vevő nem láthat tegnapi árat vagy már elfogyott terméket.

Ha a telefonon éppen nincs internet, a vevő egy rövid lapot kap arról, hogy megszakadt a kapcsolat, és próbálja újra.

Mennyibe kerül

A díjat a csomagod dönti el:

  • a havidíj nélküli Indulás csomagban a mobilalkalmazás nem érhető el;
  • a Mini, a Bolt és a Közép csomagban az App Store-ban, a Mobilalkalmazás modullal kapcsolható be, havi 500 forintért;
  • a Forgalom csomagtól felfelé a csomag ára tartalmazza, külön díj nélkül;
  • aki Forgalom vagy magasabb csomagban mégsem kéri, az App Store-ban kikapcsolhatja.

A csomagok részletei az árak oldalon vannak.

Kinek éri meg

Ott, ahol a vevő rendszeresen visszajár, a legtöbbet: fogyasztási cikkeknél, kávénál, teánál, kozmetikumnál, állateledelnél, vagy egy kis termelő heti kínálatánál. Egy egyszer vásárolt, drága terméknél, például egy kanapénál ritkábban telepítik, ott a telefonos kinézet minősége számít többet. Erről a kinézetekről szóló cikkünkben is írtunk, és minden kinézetet érdemes telefonon is megnézni.

Egy tanács a végére: a telepítést kérni is kell. A lábléc linkje és az iPhone-sáv ott van, de egy hírlevélben vagy a csomagba tett kártyán egy mondat arról, hogy a bolt telepíthető a telefonra, sokat segít. Ha még nincs boltod, a regisztrációval kipróbálhatod, a funkciók listáját pedig a funkciók oldalon találod.

Gyakori kérdések

Kell a vevőnek alkalmazásboltból letöltenie a webshop mobilalkalmazását?
Nem. A PWA a bolt weboldalából készül: a vevő a bolt láblécében az Alkalmazás letöltése linkre koppint, és a böngésző teszi ki az ikont a kezdőképernyőre.
Működik iPhone-on is?
Igen. iPhone-on nincs automatikus telepítő ablak, ezért a bolt egy lépésenkénti útmutatót mutat: Megosztás gomb, Főképernyőhöz adás, Hozzáadás.
Mennyibe kerül a mobilalkalmazás?
A havidíj nélküli Indulás csomagban nem érhető el. A Mini, Bolt és Közép csomagban havi 500 forintos modul, a Forgalom csomagtól felfelé a csomag ára tartalmazza.
Adhatok más árat az alkalmazásból vásárlóknak?
Igen. A Csatornák és Árak oldalon létrehozod a PWA-csatornát, és termékenként megadod az árat. A kosár és a pénztár is ezt az árat használja.
Tudok push értesítést küldeni a vevőknek?
A OneSignal bekötésével igen: az App ID-t az Integrációk között adod meg, a feliratkozást a bolt kínálja fel, az üzenetet a OneSignal felületén küldöd ki. A bekötés friss, érdemes előbb próbaüzenettel kipróbálni.