Hogyan készítsünk Firefox OS webalkalmazást?

Útmutató

Kiszolgálás

A hosted formátumú manifest app kiszolgálásához szükség van a szerverbeállítások megváltoztatására is. A manifest kiszolgálása ugyanarról a helyről kell hogy történjen, a .webapp kiterjesztéssel a Content-Type fejlécnek pedig „application/x-web-app-manifest+json” értéket kell adni. Beállítási tippek és további leírás. A packed app esetén erre nincs szükség, mert ott minden összetevő egyetlen zip fájlban (webapp kiterjesztéssel) kerül letöltésre és telepítésre a telefonon vagy a böngészőben.

Mindig elérhetővé válni

Az alkalmazások általánosságban mindig futtathatóak, állandó internetkapcsolat hiányában is. A leggyakrabban felmerülő kérdések a webappokkal és a Firefox OS-szel kapcsolatban, hogy:

  • A webappok tényleg csak online működnek?

  • A Firefox OS-hez állandó internethozzáférés szükséges?

Válaszok röviden: Nem, a webappok internetkapcsolat nélkül is működőképesek lehetnek. A Firefox OS jól működik internetkapcsolat nélkül is.

Mindazonáltal az appok által elérhető tartalmak nem frissülnek, de a telefon gondoskodik a legutóbbi állapot megőrzéséről, amely aztán mindig elérhető lesz a felhasználónak. Az eljárás neve Application Cache (AppCache), megvalósításáról a HTML5 szabvány rendelkezik. Ezzel az eszközzel offline használat közben is használható marad az alkalmazás.

Az AppCache használatának több előnye is van:

  • az alkalmazás internetkapcsolat nélkül is használható marad

  • a webalkalmazás összetevői helyben tárolódnak, így gyorsabban betölthetők

  • az alkalmazás csak a megváltozott tartalmat tölti le, ezáltal csökken a kiszolgáló terhelése

Az AppCache használatához a webapp-ot így kell megváltoztatni:

<html manifest="example.appcache">
  ...
</html>

Ezek után létre kell hozni az appcache leíró fájlt, és fel kell tüntetni benne az összes fájlt, amit el szeretnénk tárolni az alkalmazásban. Például a következő módon:

CACHE MANIFEST
# v1 2011-08-14
# This is another comment
index.html
cache.html
style.css
image1.png

# Use from network if available
NETWORK:
network.html

# Fallback content
FALLBACK:
/ fallback.html

A fájlnevek mellett felfigyelhetünk arra, hogy 3 szekcióba vannak a fájlok csoportosítva:

  • CACHE: (vagy CACHE MANIFEST) – a rendszer letölti ezeket a fájlokat és eltárolja

  • NETWORK: – ezek a fájlok sohasem kerülnek eltárolása, mindig hálózati kapcsolat kell az elérésükhöz (például egy bejelentkezési oldal)

  • FALLBACK: – abban az esetben kerül megjelenítésre, ha nem elérhető a megadott oldal. A FALLBACK rész fájljainak megadása eltérő, hiszen meg kell adni, hogy milyen oldal elérési hibájakor, melyik oldalt jelenítsen meg a rendszer

A manifest fájt nem szabad betenni a CACHE-be, mert az app nem fogja az újabb manifest fájlokat letölteni, azaz az appot nem lehet automatikusan frissíteni.

Hosted app esetén itt is gondolni kell a fájl megfelelő MIME-type kiszolgálásról:

AddType text/cache-manifest .appcache

Továbbfejlesztési lehetőségek

Az így elkészült webappot vagy a hosted formában, távoli tartalomként tesszük elérhetővé, vagy packed formátumban letölthetővé tesszük a weboldalunkról vagy – a Firefox Marketplace-re feltöltve – a piactérről. Érdemes a produktumot alapvető ellenőrzéseknek alávetni, majd a Firefox OS Simulátorban vagy a böngészőben tesztelni. További hasznos eszközök is segítségünkre vannak.

A webapp továbbfejlesztésére számos módon történhet. Egyrészt a „manifest.webapp” fájlt tuningolhatjuk:

  • hozzáadhatjuk a Firefox OS által megjelenített 60x60 és 30x30 pixeles képeket (icons)

  • további nyelvek támogatását adhatjuk meg (locales)

  • a készülékforgatás hatásait adhatjuk meg (orientation)

  • engedélyt adhatunk a készülék speciális eszközeinek elérésére [WebAPI] (permissions)

  • és még sok minden más beállítást is elvégezhetünk

Továbbá telepítővel láthatjuk el az alkalmazást.

Adatok alkalmazásoldali tárolására esetleg használhatunk adatbázisokat, amelyek szintén a HTML5 specifikáció részét képezik. Az egyik legújabb megoldás az IndexedDB tároló.

Átalakíthatjuk a weboldalt, hogy reszponzív dizájnt használjon, vagy hozzáigazítjuk a webappok javasolt viselkedési elveihez. A felhasználóktól pénzt kérhetünk az alkalmazás telepítéséért vagy az alkalmazáson belül elérhető extra funkciókért, képességekért. Az alkalmazásnak Firefox OS-re jellemző külsőt adhatunk, felhasználva a rendszerre jelmező építőkockákat, CSS átmeneteket.

Összegzés

A belépés egy új platformra soha sem egyszerű, ám a Firefox OS esetében mégis kevesebb a probléma, mint általában megszokott. A tartalomszolgáltatók pár óra alatt működő appot készíthetnek a már meglévő weboldalakból. Az optimalizálás azért ennél több időt is igénybe vehet, de látható, hogy van lehetőség az alkalmazás tetszetős és hasznos továbbfejlesztésére is. Az első lépés megtétele tehát nem túl nagy befektetés egy mobiloldallal rendelkező weboldal számára – és ha beválik – a továbbfejlesztéshez is számos segítséget és hasznos eszközt kap a fejlesztő.

Azóta történt

Előzmények

  • Firefox OS workshop november végén Budapesten

    Egész napos hackelést szervez a Mozilla Budapesten azok számára, akik már fejlesztenek vagy portolnak webappokat Firefox OS-re.

  • Tartsd meg a telefont, Firefox OS alkalmazásfejlesztő!

    Átalakul a Magyarországi Firefox OS fejlesztői partnerprogram, amelyben az értékes appok fejlesztői akár a Keon telefonokat is megtarthatják.

  • Firefox OS kisokos

    Érdemes áttekinteni a Firefox OS-szel kapcsolatos fejlesztői bemutatókat és cikkeket, amelyeknek hamarosan mindenki hasznát veheti.