Sadržaj
- Uspon PWA
- PWA danas u akciji
- Montaža
- Izvanmrežno i trenutno pokretanje
- Prvorazredno iskustvo
- Trgovine aplikacija
- Integracija platforme
- Dizajn i UX izazovi
- Godina PWA-a
Baš kao što je responzivni web dizajn prije nekoliko godina zatvorio jaz između web mjesta za stolna računala i mobilne uređaje, tako i progresivne tehnike web aplikacija trenutno smanjuju jaz između weba i svijeta aplikacija. Kako se korisnička iskustva od stolnih računala do mobilnih aplikacija brzo konvergiraju, čini se kao da se razvija puno uglađeniji, učinkovitiji internet - iako neizbježno ne bez nekih značajnih promjena u svom genetskom kodu.
- Kako izraditi progresivnu web aplikaciju
Očito postoje neki značajni selektivni pritisci koji ovo pokreću. Prije svega, stvaranje izvornih aplikacija za svaku nišu nije nužno učinkovito korištenje resursa: korisnici na kraju izgube stotine velikih aplikacija propusnosti i dragocjenog prostora na disku, a tvrtke troše puno novca stvarajući aplikacije samo da bi ih napustili nakon njihovih prvih verzija. A većinu ovih aplikacija pokreće samo web sadržaj: informacije koje dolaze s web usluga ili sustava za upravljanje sadržajem.
Definicija progresivne web aplikacije nije konkretna. PWA je samo web aplikacija koja koristi nekoliko novih API-ja i sposobnosti na web platformi pomoću progresivnog poboljšanja kako bi ponudila iskustvo nalik aplikaciji na svakoj platformi s istom bazom koda. To je više skup najboljih praksi i korištenja API-ja koji vašim korisnicima stvara izvrsno iskustvo nalik aplikacijama, pa nije kao da imate ili nemate PWA; to je više kao da je vaša web lokacija manje-više PWA.
Hoćete li započeti izgradnju nove stranice? Pokušajte upotrijebiti alat za izradu web stranica. I pobrinite se da podršku dobijete i od pristojne web hosting usluge. Ili nešto malo drugačije, pogledajte naš vodič za najbolju pohranu u oblaku.
Uspon PWA
Iako je ime PWA nastalo 2015. godine u članku Izbjegavanje kartica bez gubitka duše, Alex Russell koji je radio u Googleu za Chromeov tim, njihovo putovanje tamo zapravo nije ni počelo. Nekad smo imali HTML aplikacije (HTA), koje je Microsoft stvorio 1999. godine, zajedno s mnogim drugim platformama web aplikacija od Nokije, BlackBerryja i drugih tvrtki. Tada je Steve Jobs 2007. predstavio ono što je u to vrijeme bio jedini način za stvaranje aplikacija za originalni iPhone: PWA, premda s drugim imenom. Chrome je krenuo odatle, poboljšao API-je nekoliko godina kasnije i izumio ime PWA.
S toliko prethodnih neuspjelih iskustava koja pokušavaju donijeti web sadržaj u svijet aplikacija, zašto mislimo da će to sada uspjeti? Pa prvenstveno je na tvrtkama koje sada rade i promoviraju tehnologije iza kojih stoje PWA-i, poput Microsofta, Googlea, Applea i Mozille, da nabrojimo samo neke. Također, izvedba web platforme dosegla je točku kada nema uočene razlike kada usporedite dobro dizajnirani PWA s izvornom aplikacijom. Ti uvjeti nikada prije nisu postojali i to je jedan od razloga zašto je web zajednica odlučila da je došlo vrijeme za PWA.
PWA danas u akciji
Danas su PWA potpuno funkcionalni i mogu se instalirati na:
- Android s većinom preglednika, a Chrome nudi najbolje iskustvo
- iOS sa Safarijem
- Chromebookovi
- Windows 10 iz Microsoftove trgovine
- Telefoni s funkcijom KaiOS - vilicom iz OS Firefox - trenutno dostupni milijunima korisnika uglavnom u Indiji
Podrška također dolazi za macOS, Windows i Linux putem Chromea kasnije ove godine. Danas je dostupan kao eksperimentalna zastavica 'Desktop PWA' ako ga želite isprobati odmah. Instalacija na Windows na Edgeu bez upotrebe trgovine dolazi i kasnije, iako nije definiran određeni vremenski okvir.
Ako ponovno pročitate popis, možete vidjeti da svaka platforma ima ili će uskoro imati podršku za potpuno instalirane PWA-ove u sljedećim mjesecima. A budući da je PWA samo web mjesto s vrhunskim značajkama koje će se aktivirati samo u kompatibilnim preglednicima, možemo čak reći da je kompatibilno sa svim preglednicima iz svoje osnovne funkcionalnosti.
Također, PWA se trenutno generiraju iz većine CLI-a za različite okvire, uključujući Angular 6+ CLI, React Create App, PWA Starter Kit iz Polymer i Preact CLI. Konačno, tim Ionic Framework-a došao je na ideju Capacitor, open source zamjene za Cordovu koja omogućuje izvorne PWA-ove u svakoj trgovini aplikacija.
Montaža
Jedan od kritičnih aspekata PWA-a je instalacija aplikacije. Ovaj se postupak obavlja u dva neobavezna koraka: preuzimanje i izvanmrežna pohrana datoteka aplikacije i instalacija ikone u OS. Budući da su oba koraka neobavezna, u pregledniku možete ponuditi izvanmrežno iskustvo ili ikonu bez izvanmrežne instalacije. Ali pravi PWA trebao bi sadržavati oboje: mora se posluživati s TLS-om pod HTTPS-om, a korisnik će odlučiti hoće li ga koristiti u pregledniku ili unutar vlastite instalirane ikone.
Izvanmrežno i trenutno pokretanje
Mozak PWA-a je uslužni radnik, JavaScript datoteka instalirana na uređaju korisnika koja je odgovorna za preuzimanje datoteka aplikacije, njihovo spremanje u predmemoriju i kasnije njihovo posluživanje po potrebi. Jednom kada je uslužni radnik instaliran, ponaša se kao mrežni proxy za svaki resurs koji web-aplikacija treba: može odlučiti da ga preuzme iz mreže ili isporuči iz lokalne predmemorije, što aplikaciju čini dostupnom izvan mreže i dostupnom u samo nekoliko milisekundi, čak i ako korisnik ima vezu, oponašajući pokretanje izvorne aplikacije.
Da biste instalirali uslužnog radnika, vaš HTML dokument mora sadržavati nešto poput:
if (’serviceWorker’ u navigatoru) navigator.serviceWorker.register ("sw.js");
To će instalirati datoteku "sw.js" na uređaje korisnika za trenutnu mapu u trenutnoj domeni - koncept poznat kao opseg. Nakon što se instalira, sljedećim posjetima bilo kojem URL-u iz njegovog opsega upravlja taj serviser.
Recimo da imamo PWA s četiri datoteke: index.html, app.js, app.css i logo.png. Prvo je instalirati te datoteke u predmemoriju datoteke sw.js.
resursi const = ["index.html", "app.js", "app.css", "logo.png"]; sebe. addEventListener ("install", event => {event. waitUntil (caches.open ("myPWAcache"). then (cache => cache.addAll (resources)));});
Tada da bi se PWA uvijek posluživao iz predmemorije, moramo osluškivati događaj dohvaćanja unutar uslužnog radnika i odlučiti koju ćemo politiku predmemorije koristiti, kao što je predmemorija prvo sa sljedećim isječkom.
self.addEventListener ("dohvati", e => e.respoWWith (caches.match (e.request). then (res => res);
U ovom slučaju, svaki put kada korisnik pristupi PWA-u (i iz preglednika ili s instalirane ikone), motor će datoteke dobiti iz predmemorije. Prednost PWA-a u odnosu na izvorne aplikacije je ta što uređaji ne trebaju ponovno preuzimati sve datoteke kada dođe do promjene, već samo datoteku koja se promijenila transparentnim postupkom. Također, dijelove aplikacije i dalje možemo preuzeti na zahtjev.
No, izazov je kako znati koje su datoteke ažurirane na poslužitelju kako biste ih mogli zamijeniti u predmemoriji? Ako ne želite pisati uslužnog djelatnika niske razine da bi to upravljao, možete upotrijebiti otvoreni izvor biblioteke Workbox, koji će vam pomoći pri generiranju uslužnog radnika i manifestu resursa za ažuriranje instaliranog paketa.
Imajte na umu da će se datoteke vašeg PWA izbrisati ako na uređaju postoji pritisak na pohranu, osim ako ne zatražite trajnu pohranu ako je dostupna:
if ('pohrana' u navigatoru && 'persist' u navigator.storage) navigator.storage.persist ();
U Chromeu i većini Android preglednika vaša aplikacija ne može koristiti više od pet posto dostupnog prostora; na iOS-u je 50 MB (blizu 50 MB) samo po hostu; u Edgeu je promjenjiv prema ukupnoj veličini memorije, au Windows Store je neograničen.
Prvorazredno iskustvo
Imamo mozak i sada je vrijeme za srce: web aplikacija manifest. Svrha pretvaranja web mjesta u PWA nije samo osigurati da je brzo dostupno ili izvan mreže, već i omogućiti mu da ima svoju ikonu u OS-u i ponudi potpuno samostalno iskustvo poput bilo koje druge instalirane aplikacije.
Manifest je JSON datoteka koja definira metapodatke za PWA koji koristi preglednik ili trgovina aplikacija kako bi se definiralo ponašanje prilikom instalacije.
Datoteka definira nekoliko svojstava kao metapodatke za vaš PWA. Svaki će OS pročitati ova svojstva i potruditi se da se podudara s iskustvom koje više volite. Na primjer, Android će pročitati 'display: standalone' i stvoriti normalno iskustvo aplikacije. Uz 'display: minimal-ui' stvorit će iskustvo s vidljivim URL-om i TLS certifikatom - korisno za sigurnosno osjetljive aplikacije. S ‘display: fullscreen’ stvara potpuno impresivne aplikacije bez statusne trake ili vidljivog gumba za povratak. Skup ikona i boja definira kako će početni zasloni ili trake naslova izgledati za prozor vaše aplikacije.
Postoje neki generatori manifesta, poput Generatora manifesta web aplikacija ili PWA Builder koji će vam također promijeniti veličinu ikone u različitim rezolucijama ako pružite visoku razlučivost (minimalno 512 piksela).
Kada datoteku manifesta povežete u HTML dokument, korisnici će moći instalirati aplikaciju pomoću različitih tehnika, ovisno o pregledniku, koje se obično nazivaju Dodaj na početni zaslon, Instaliraj ili samo Dodaj. Ako Bing može indeksirati vaš PWA, Microsoft će ga automatski dodati u Microsoft Store, tako da će ga korisnici sustava Windows 10 moći ondje instalirati.
Na nekim operativnim sustavima vaš će PWA imati mogućnost hvatanja veza. To znači da će se nakon što je korisnik instalirao aplikaciju, svaki URL unutar opsega vašeg manifesta otvoriti unutar granica vaše aplikacije, a ne u pregledniku, bez obzira na to pojavljuje li se u pregledniku ili drugim aplikacijama poput WhatsApp, Facebook ili e-mail.
Ako prihvatite PWA zahtjeve koje ovdje definiramo, neke će platforme ponuditi ambijentalne značke (mala ikona obično na URL traci koja navodi da je web moguće instalirati) ili natpis web aplikacije. Ako želite, možete dodati i svoj prilagođeni gumb Instaliraj pomoću sljedećeg isječka:
window.addEventListener ("beforeinstallpr ompt", funkcija (e) {e.prompt (); // prikazat će se izvorni upit za instalaciju})
Ako je instaliran PWA, događaj 'instaliran' aktivirat će se na prozoru tako da možete pratiti statistiku koja ga sluša.
Trgovine aplikacija
Jedna od glavnih prednosti instaliranja iz preglednika je mogućnost izbjegavanja postupka odobravanja trgovine aplikacija ili potrebe za plaćanjem izdavača. To dolazi s očitim prednostima, poput trenutnog objavljivanja, stvaranja privatnih aplikacija za tvrtke ili aplikacija koje ne bi trebale biti prihvaćene u trgovinama.
Ali neke tvrtke žele biti u trgovini. Od danas su jedine trgovine koje službeno prihvaćaju PWA-e Windows trgovina i kaiOS trgovina. Srećom, s alatima poput Capacitor (trenutno u Alpha-u) ili PWA Builder možemo stvoriti i potpisati izvorne pakete i za druge platforme.
Postoje neki PWA-ovi koji su već objavljeni u Trgovini Google Play, kao što su Twitter Lite i Google Maps Go, koji su trenutno pod prilagođenom implementacijom. Chrome će ponuditi rješenje iz Chromea 68 putem pouzdanih web aktivnosti. Od tog trenutka moći ćemo stvoriti Android paket (APK) s pokretačem na naš PWA i prenijeti ga u trgovinu. Za Microsoft Store na sustavu Windows 10, web mjesto PWA Builder trenutno pomaže u stvaranju APPX paketa za Windows 10. Korištenjem web prikaza možda ćete moći ručno stvoriti iOS aplikaciju za App Store, ali budite izuzetno oprezni oko pravila trgovine.
Integracija platforme
Primjenom tehnika naprednog poboljšanja moći ćete koristiti mnoge značajke, uključujući push obavijesti, pristup kameri i mikrofonu, geolokaciju, senzore, plaćanja, dijaloške okvire za dijeljenje i izvanmrežnu pohranu. Sve se ove značajke pokreću izravno unutar sigurnosnog modela preglednika, uključujući dijaloške okvire za dopuštenja.
Također možemo komunicirati s drugim aplikacijama putem URI shema, poput otvaranja Twittera, YouTubea ili WhatsAppa putem njihovih URL-ova ili prilagođenih URI-ova, kao što je WhatsApp: //.
Konačno, prilikom stvaranja izvornih PWA-ova koji se objavljuju u trgovini pomoću kondenzatora ili u Microsoftovoj trgovini, moći ćemo se prebaciti na izvorne API-je koji će nam omogućiti izvršavanje gotovo bilo kojeg izvornog koda. Ta integracija sa sustavom Windows 10 uključuje pristup hardveru, ali i integraciju s OS-om, nudeći opcije poput Pin to Start. Na primjer, Twitter PWA omogućuje vam da prikvačite bilo kojeg korisnika na početni zaslon.
Dizajn i UX izazovi
Dizajn PWA-a ima jedinstvene izazove, pa je važno potrošiti neko vrijeme na istraživanje, testiranje što je više moguće i uzimajući u obzir sljedeće:
- Korisnici će očekivati iskustva poput aplikacija.
- Postupak instalacije još je uvijek nov, pa se moramo potruditi objasniti kako instalirati aplikaciju.
- Ažuriranje aplikacije u pozadini bez interakcije korisnika je sjajno, ali dodaje i neke izazove za UX.
- Na radnoj površini, responzivni web dizajn preuzima novu granicu jer PWA prozori mogu biti mali, mnogo manji od mobilnog prozora za prikaz. To znači da trebamo stvoriti određene poglede ili male widgete za ovaj format, kao što se danas vidi u Chrome OS-u.
- Push obavijesti trebaju dodati vrijednost samo za korisnika, pa naučite tražiti u pravom trenutku i ne gubite priliku šaljući poruke koje nisu korisne ili zanimljive.
- Moramo dizajnirati za web izvedbu i za izvanmrežni pristup.
Godina PWA-a
Uz dodatak iOS-a i radne površine ove godine, PWA su danas svugdje. No, moramo imati na umu da njihovo putovanje tek započinje, stoga očekujte česte promjene i budite sigurni da se redovito ažurirate najnovijim tehnikama i idejama kako biste pružili izvrsno korisničko iskustvo dok se platforma razvija.
Ovaj je članak izvorno objavljen u broju 308 od neto, najprodavaniji svjetski časopis za web dizajnere i programere. Kupite izdanje 308 ovdje ili pretplatite se ovdje.
