Mobilbarát webalkalmazás készítése

A mobilbarát webalkalmazás olyan weboldal, amely telefonon alkalmazásként viselkedik: belefér a keskeny képernyőbe, nagy érintési felületei vannak, gyorsan tölt mobiladatról, és a kezdőképernyőre telepíthető progresszív webalkalmazásként (PWA). A legtöbb új alkalmazásnál ez a gyakorlati első verzió — egy kódbázis, egy link, nincs store-ellenőrzés. Vannak azonban valódi korlátai, főleg az iPhone-os értesítések és a mélyebb eszközhozzáférés terén, és ez az útmutató egyenesen megmondja, mikor van szükség natív alkalmazásra.

Három mód, hogy „mobilon” legyél

A PWA egy reszponzív webalkalmazás néhány extrával, tehát nem kell választanod az első két lehetőség között. Először reszponzívra építs, aztán tedd telepíthetővé. A mélyebb összehasonlításért lásd: natív vs. progresszív webalkalmazások.

Mit tudnak és mit nem tudnak a webalkalmazások telefonon

A böngészők többre képesek, mint sokan gondolják:

• Kamera és fotófeltöltés a szabványos fájlbeviteli mezőkön keresztül.
• Helymeghatározás a felhasználó engedélyével.
• Telepítés a kezdőképernyőre ikonnal és teljes képernyős indítással.
• Offline használat oldalak és adatok gyorsítótárazásával szervizworkeren keresztül (egy háttérszkript, amelyet a böngésző futtat az oldaladhoz).
• Push-értesítések — egy csapdával iPhone-on. Az Apple WebKit csapata szerint a webes push az iOS és iPadOS 16.4-es verziótól érhető el a kezdőképernyőre telepített webalkalmazásoknak. A felhasználóknak először telepíteniük kell az alkalmazást, aztán engedélyezniük kell az értesítéseket.

Ahol a natív még mindig jobb:

• Mélyebb eszközfunkciók, például háttérhelymeghatározás, Bluetooth-kiegészítők, egészségügyi adatok és kezdőképernyős widgetek — a böngészőbeli támogatás korlátozott vagy platformonként változó.
• App Store-os felfedezés. Ha az emberek a store-ban keresnek rád, ott kell lenned.
• Nehéz offline munka, például nagy adathalmazok háttérszinkronizálása.
• Teljesítménykritikus grafika, például igényes játékok.

Ha egyik sem központi az alkalmazásodban, egy webalkalmazás valószínűleg jól szolgál.

Tervezés először telefonra

Előbb a telefonos elrendezést tervezd meg, és nagyobb képernyőkre bővítsd; fordítva általában szűk telefonos felületet eredményez.

Elrendezés

• Egy oszlop kis képernyőn. Az oldalsávból alsó sáv vagy menü lesz.
• Nincs vízszintes görgetés. A széles táblázatokból kártyák lesznek, vagy saját konténerükön belül görgethetők.
• Olvasható szöveg nagyítás nélkül — a törzsszöveg körülbelül 16px.

Érintés

• Nagy érintési felületek. Körülbelül 44 × 44 pixel a szokásos minimum. Hagyj köztük helyet.
• A fő műveletek hüvelykujjal elérhető távolságban, magas telefonokon a képernyő alsó részében.
• Nincsenek csak egérmutatóra működő funkciók. Az egérmutatóra megjelenő súgók és menük érintőképernyőn nem léteznek.
• A megfelelő billentyűzet. Az e-mail mezőknek e-mail billentyűzetet, a telefonszám mezőknek számbillentyűzetet kell mutatniuk. Kérd a megfelelő beviteli típusokat.

Sebesség

• Kis képek észszerű méretben, láthatóságba érkezéskor betöltve.
• Kevesebb nehéz könyvtár. Minden könyvtár növeli a letöltési időt mobiladaton.
• Vázlatképernyők vagy egyértelmű betöltési állapotok, hogy az alkalmazás soha ne tűnjön lefagyottnak.

Biztonsági területek és a címsáv

A modern telefonokon a tartalom a kivágás vagy a kezdőképernyő-jelző alá csúszhat, főleg egy teljes képernyős telepített alkalmazásban. Kérj biztonsági területi kitöltést. Figyelj a teljes magasságú elrendezésekre is, amelyek ugrálnak, amikor a böngésző címsora megjelenik vagy eltűnik.

Telepíthetővé tétel (PWA)

Ahhoz, hogy egy webalkalmazás telepíthető legyen, kell:

1. Webalkalmazás-manifest — egy kis fájl az alkalmazás nevével, rövid nevével, ikonjaival, témaszínével és azzal, hogyan nyíljon meg (általában teljes képernyős „standalone”).
2. Ikonok a platformok által várt méretekben, köztük egy Apple-eszközökhöz alkalmas.
3. HTTPS, amivel minden rendesen hosztolt alkalmazás már rendelkezik.
4. Szervizworker, ha offline támogatást vagy push-értesítést szeretnél.

Ezután mondd meg a felhasználóknak, hogyan telepítsék. Az Android-böngészők általában telepítési felkínálást vagy menüpontot kínálnak; iPhone-on a Megosztás gombot kell megnyomni, majd a „Hozzáadás a kezdőképernyőhöz” lehetőséget. Egy rövid „Telepítsd ezt az alkalmazást” megjegyzés ezekkel a lépésekkel sokat segít.

Az offline támogatás az, ahol a PWA-k bonyolulttá válnak. Az alkalmazás oldalainak gyorsítótárazása, hogy kapcsolat nélkül is megnyíljon, egyenes feladat. Az, hogy az emberek offline módosíthassanak adatot és később szinkronizálják, valódi munka — csak akkor kérd, ha a felhasználóidnak valóban szükségük van rá.

Egy működő első prompt

Építs webalkalmazást a takarítócsapatunknak, hogy lássák a mai munkákat és megjelölhessék őket késznek. Telefonra tervezz először: egy oszlop, nagy érintési felületek, a fő művelet gomb alul rögzítve, nincsenek csak egérrel működő vezérlők, nincs vízszintes görgetés, és helyes billentyűzet a telefon- és e-mail mezőkhöz. Minden munka mutatja a címet (koppintásra megnyílik a térképen), az ügyfél telefonszámát (koppintásra hívás), egy ellenőrzőlistát és egy „Késznek jelölés” gombot, amely fotót is készíthet. A vezetők laptopon jelentkeznek be, és munkákat rendelnek hozzá; széles képernyőn kártyák helyett táblázat jelenjen meg. Legyen telepíthető PWA manifesttel, ikonokkal és standalone megjelenítéssel, és gyorsítótárazd az alkalmazás vázát, hogy jel nélkül is megnyíljon. Az adatokat adatbázisban tárold.

Építési lépések

1. Először a telefonos elrendezést építsd meg mintaadatokon, és ellenőrizd telefonméretű előnézetben.
2. Teszteld valódi telefonokon — legalább egy iPhone-on és egy Androidon, ha a felhasználóidnak mindkettő van. Az emulátorok kihagynak dolgokat, például azt, hogy a képernyős billentyűzet takarja a beviteli mezőket.
3. Járd végig a fő feladatot egy hüvelykujjal. Ha valami két kezet vagy nagyítást igényel, javítsd.
4. Add hozzá a manifestet és az ikonokat, aztán telepítsd mindkét platformra, és ellenőrizd az ikont, a nevet és az indítóképernyőt.
5. Döntsd el az offline kérdést. Kezdd azzal, hogy „kapcsolat nélkül is megnyílik, és egyértelmű üzenetet mutat”; offline szerkesztést csak akkor adj hozzá, ha szükséges.
6. Ellenőrizd a sebességet lassú kapcsolaton. A böngésző fejlesztői eszközei tudnak lassú kapcsolatot szimulálni.
7. A push-értesítéseket utoljára add hozzá, ha egyáltalán — és tervezz e-mailes tartalék megoldást azoknak, akik nem telepítik az alkalmazást.

Gyakori hibák

• Csak nagy monitoron tervezni. Minden képernyőt telefonszélességben is ellenőrizz, miközben haladsz.
• Túlcsorduló táblázatok. Kis képernyőn a sorokból kártyák legyenek.
• Apró érintési felületek és egymáshoz túl közeli linkek.
• Űrlapok, amelyek harcolnak a billentyűzettel — rossz beviteli típusok, billentyűzet mögé került mezők, nincs „Tovább” folyamat.
• Azt feltételezni, hogy az iPhone push működik a böngészőfülben. Ehhez az alkalmazást a kezdőképernyőre kell telepíteni.
• App Store-os alkalmazást ígérni, amit nem tudsz szállítani. Ha a store fontos, külön tervezd meg.
• Weboldal csomagolását alkalmazásnak nevezni. Apple App Review irányelvei olyan alkalmazásokat kérnek, amelyek túlmutatnak egy újracsomagolt weboldalon; a vékony burkolat elutasítást kockáztat.

Mikor van szükség natív alkalmazásra

Natív alkalmazásra váltanál (vagy natív változatot terveznél a webalkalmazás után), ha:

• A store-os jelenlét az, ahogyan a vásárlók megtalálnak.
• Háttérhelymeghatározásra, Bluetoothra, egészségügyi adatokra, widgetekre vagy más eszközfunkciókra támaszkodsz, amelyeket a böngészők nem nyújtanak megbízhatóan.
• Az alkalmazásodnak hosszú ideig teljesen offline kell működnie.
• A felhasználóid ezt elvárják — egyes közönségek egyszerűen nem használnak olyat, ami nincs a store-ban.

A store-os publikálásnak saját költségei és lépései vannak. 2026 szeptemberében az Apple fejlesztői programja évi 99 USD, a Google Play fejlesztői fiókja egyszeri 25 USD — ezt a saját oldalaik mutatják —, és minden kiadás áthalad ellenőrzésen. Sok csapat mobilbarát webalkalmazással indul, hogy bebizonyítsa, az emberek akarják a terméket, és csak utána fektet natív változatba. Az AI-val készült alkalmazás elkészítése útmutató ezt az első szakaszt végigvezeti.

Építés a Mythexszel

A Mythex webalkalmazásokat épít: a chatben leírod az alkalmazást, és az élő előnézetben ellenőrzöd asztali nézetben és egy telefonméretű keretben, amelyet átméretezhetsz. A dokumentációban van egy mobilreszponzív prompt a kis képernyős elrendezések javításához. Kérhetsz PWA-manifestet és ikonokat, mint bármilyen más funkciót, majd publikálhatod nyilvános linken, amely bármelyik telefonon működik. A Pro csomagban a Mythex az alkalmazást Android- és iPhone-alkalmazásként is becsomagolhatja, amelyet a Google Play belső tesztelésére és a TestFlightra küld. Kezdéshez nézd meg az AI webalkalmazás-készítőt vagy böngéssz az alkalmazássablonok között. Egy kidolgozott példáért olvasd el a hogyan építs szokáskövető alkalmazást útmutatót.

Kérdések