Ionic 4 PWA – kreiranje aplikacije

Do sada sam u blog postovima pisao o Ionic aplikacijama koje svoju budućnost temelje na objavi na nekoj od trgovina aplikacijama u .apk ili .ipa obliku.

Ovaj će blog post ići u sasvim jednom drugom smjeru jer u potpunosti mogu zaobići trgovine aplikacijama i svoju PWA aplikaciju objaviti jednako kao što bi objavio bilo koju web stranicu.

Što je, Ionic, PWA?

Ionic 4 PWA je zapravo obična Ionic 4 aplikacija prilagođena prikazu na svim platformama bez potrebe za objavom putem Google Play Storea, Apple App Storea i sl.

Kreiranje projekta

Projekt kreiram već poznatom naredbom:

Ionic 4

U ovom koraku ovo je tek obična Ionic 4 aplikacija. Za sada neću instalirati Ionic Native pluginove jer mi za ovaj primjer neće biti potrebni.

Dodavanje PWA funkcionalnosti

Za razliku od Ionica 3 gdje je Service Worker bio dodan od trenutka kreiranja aplikacija i samo ga je trebalo odkomentirati unutar index.html datoteke kada je u pitaju Ionic 4 to više nije slučaj.

Ionic 3 PWA
How to make PWAs with Ionic 2017 – https://blog.ionicframework.com/how-to-make-pwas-with-ionic/

Pretpostavka za kreiranje PWA su Service Worker (ngsw-worker.js) i Web Manifest (manifest.json). Oboje ću u projekt dodati pomoću naredbe:

Pokretanjem te naredbe kreiraju se i ažuriraju razne datoteke.

– kreirana je konfiguracijska datoteka Service Workera ngsw-config.json. Trenutno se ovdje nalazi zadani naziv aplikacije "name": "app" koji mogu promijeniti u "name": "ionic4pwa".

– ažurirana je angular.json datoteka kako bi podržavala Service Worker

angular.json pwa

– ažurirana je package.json datoteka s ranije dodanim @angular/pwa tj. @angular/service-worker paketom

ng add @angular/pwa

– ažurirana je app.module.ts datoteka koja služi za registraciju Service Workera. Ovdje se spominje ngsw-worker.js koja trenutno ne postoji unutar Ionic projekta, ali će se kreirati pokretanjem $ ionic build --prod naredbe.

ServiceWorkerModule

– ažurirana je index.html datoteka tj. <head> tag unutar kojega se spominje manifest.json datoteka. Ovdje također mogu promijeniti "name": "app", "short_name": "app", u "name": "Ionic4PWA", "short_name": "Ionic4PWA",.

index.html pwa manifest

– kreirane su ikone za različite platforme (zadane Angular ikone koje je za produkcijski projekt potrebno promijeniti)

PWA ikone

Produkcijska PWA aplikacija

Produkcijska PWA aplikacija kreira se naredbom:

Pokretanjem ove naredbe kreirat će se www mapa sa produkcijskom verzijom aplikacije spremnom za postavljanje na server.

ionic build --prod

Ovu PWA aplikaciju mogu pokrenuti i testirati naredbom:

Zaključak

Struktura projekta prema package.json