Unapređenje mobilnih web aplikacija uz Ionic i PWA

    Oct 20, 2023 / S24S2

    Unapređenje mobilnih web aplikacija uz pomoć Ionic platforme i Progressive Web Application (PWA) tehnologije je kao tema naše prve radionice. U okviru naše tvrtke Starlight2, kontinuirano potičemo razmjenu znanja i iskustava među našim vrijednim developerima.

    workshop1 starlight2

    Kako poboljšati korisničko iskustvo na mobilnim uređajima uz pomoć Ionic radionice. U ovom članku, istražujemo kako prilagoditi postojeći OPGDirekt sustav za mobilne web preglednike. OPGDirekt sustav trenutno ima web frontend izgrađen u Angularu i mobilne aplikacije razvijene pomoću Ionic platforme. Cilj ove radionice je transformirati postojeći web frontend kako bi se bolje prilagodio mobilnim uređajima.

    Ionic za Mobilne Aplikacije

    Kao prvo, važno je razumjeti što Ionic donosi u igru. Ionic je moćan alat za izradu mobilnih aplikacija koristeći web tehnologije kao što su HTML, CSS i JavaScript. No, OPGDirekt sustav je imao i Angular web frontend, što stvara izazove prilagodbe za mobilne uređaje. Prilagodba za mobilne uređaje zahtijeva vrijeme i često zahtijeva potpunu promjenu dizajna na nekim stranicama.

    Rješenje za unapređenje mobilnih web aplikacija uz Ionic za Mobilne Web Preglednike

    Naša radionica nudi elegantno rješenje ovog problema – koristiti postojeće Ionic mobilne aplikacije za prikaz na mobilnim web preglednicima. Ova inovacija ima prednosti jer ne zahtijeva pisanje novog koda za aplikacije na mobilnim web preglednicima. Umjesto toga, iskorištavamo postojeće mobilne aplikacije, koje koriste web tehnologije, i samo mijenjamo način kako se aplikacija distribuira.

    Slika 1 Slika 2

    Kako to radi?

    Korak 1: Deploy Ionic Aplikacije na Nginx
    Prvi korak je deploy Ionic aplikacije na nginx server, slično kao što je to slučaj sa Angular web frontendom za računala. Ključna komponenta je konfiguriranje nginx servera da prati User-Agent headere. Ovisno o ovim headerima, server će preusmjeriti korisnike ili na mobilni frontend ili na frontend za računala.

    Korak 2: Postavite Progresivnu Web Aplikaciju (PWA)
    Dalje, postavljamo Progresivnu Web Aplikaciju (PWA) iz postojeće Ionic mobilne aplikacije. PWA donosi mnoge prednosti:

    • Web Manifest: PWA koristi JSON datoteku, web manifest, koja definira informacije o aplikaciji, uključujući naziv, ikonice itd.
    • Service Worker: PWA koristi web worker, poznat kao service worker, za sve izlazne zahtjeve aplikacije. Service worker može cachirati te zahtjeve, što omogućava offline način rada, a također omogućava primanje push notifikacija.
    • Prednosti PWA:
      • Može se instalirati iz web preglednika.
      • Može raditi kada korisnik nije spojen na internet.
      • Može raditi u pozadini, primjerice primati push notifikacije.

    Ovo znači da PWA ima sve prednosti nativnih Ionic aplikacija bez potrebe da je korisnik preuzme putem Apple ili Google Play trgovina.
    Ova Ionic radionica pruža jednostavno i efikasno rješenje kako unaprijediti korisničko iskustvo na mobilnim uređajima. Uz minimalno prilagođavanje, vaš OPGDirekt sustav bit će spreman za akciju na mobilnim web preglednicima. Iskoristite snagu Ionic platforme i PWA tehnologije za modernizaciju vaše aplikacije.

    Na kraju radionice S24S2 tim je odahnuo i proslavio postignute uspjehe na večeri koja je bila prilika za opuštanje, razmjenu iskustava i daljnje razgovore o budućim projektima. Radionica nas je približila modernizaciji naših mobilnih web aplikacija i otvorila vrata za nove inovacije. Zajedno gradimo bolju digitalnu budućnost! 🚀🎉

    Fotografija