Nesumnjivo ste čuli za nadolazeći val mobilnog weba. Najčešća stvar koju ste vjerojatno čuli jest da se mobilni web pristup brzo povećava, a otprilike polovica cjelokupnog web prometa sada se odvija putem telefona ili tableta. A Veljače 2018 izvješće istraživačkog centra Pew imajte na umu da 95% svih Amerikanaca posjeduje mobitel, dok je udio Amerikanaca sa pametnim telefonima 77%.
Ne morate gledati daleko da biste vidjeli utjecaj mobitela. Pogledajte svoje ponašanje i ponašanje svoje obitelji. U prosincu 2016. god. comScore je izvijestio da je prosječni Amerikanac stariji od 17 godina dva sata i 51 minutu dnevno provodio na svom telefonu (Englais).
Statcounter.com napominje da globalni web promet dolazi uglavnom s mobilnih uređaja najmanje godinu dana (51,95% u veljači 2018).
Iako možda mislite da si ne možete priuštiti razvoj matične aplikacije koju će korisnici mobilnih uređaja pohranjivati na svojim telefonima, svakom poslu postoji sjajna alternativa: Progresivne web aplikacije. Možda ste čuli za progresivne web aplikacije (PWA) i kako ih ljudi koriste za rast svog poslovanja. U ovom ćete članku saznati malo više o PWA-ima i zašto biste trebali više razmišljati o njihovoj uporabi u 2018. godini.
Neke definicije
Progresivne web aplikacije (PWA) zbirka su web standarda koje je Google izvorno razvio radi poboljšanja izvedbe web stranica na mobilnim uređajima. Stoga web stranice funkcioniraju više poput namjenskih mobilnih aplikacija koje možete pronaći u Apple App Storeu ili Google Playu.
još jedan definicija programeri za indijski hotelski lanac Treebo: „PWA su aplikacije na jednoj stranici koje su postupno poboljšane značajkama koje pružaju sveobuhvatnije izvorno iskustvo. »
To malo smanjujući, PWA-ovi na mobilnim uređajima omogućuju čitateljima i kupcima da brzo učitaju početnu stranicu vaše web-lokacije i koriste mnoge iste značajke na mobilnom uređaju koje bi koristila izvorna aplikacija. Vaša web lokacija može postojati izvan preglednika, čak i kada uređaj nije povezan s Internetom.
Druge definicije
Neki od ključnih tehničkih dijelova PWA uključuju:
Radnici u uslugama su ključna tehnologija povezana s PWA-ima. Oni omogućuju PWA-ima da rade izvan mreže.
Datoteke manifesta sadrže ikonu i naziv koji povezuje aplikaciju na uređaju s web stranica. Programer ovdje također može dodati elemente dizajna kako bi poboljšao vaše korisničko iskustvo.
Push obavijesti komunicirati s korisnicima (uz njihovo dopuštenje), kako bi se vratili.
Neki razlozi
Pa zašto bi vaša web lokacija trebala sadržavati PWA? Prilično je jednostavno.
Bolje performanse - čak i na radnoj površini!
Znate da imate ograničeno vrijeme za osvajanje posjetilac po prvi put – šest sekundi učitavanja prije nego što potencijalni kupac ode i posjeti sljedeću stranicu u rezultatima pretraživanja. Korisnici mobilnih uređaja još su nestrpljiviji – polovica vaših potencijalnih korisnika otići će ako se stranici učita više od 3 sekunde!
Dobra vijest: promjene koje napravite za izradu progresivne web aplikacije ubrzat će vaše web mjesto!
Primjer: Indijska hotelska tvrtka Treebo smanjila je vrijeme punjenja za mobilne uređaje sa šest sekundi na 1,5 sekunde izradom svog PWA-a. Stranica se sada u sekundi učitava na radnoj površini! Njihov tehnički tim izvijestio je da se ljestvica pretraživanja web mjesta poboljšala, a mjesečna stopa konverzije više nego udvostručila!
Izvanmrežni kapacitet
PWA ne mora biti na Internetu da bi to učinio. Vaši korisnici mogu pristupiti svim sadržajima aplikacije sa svog uređaja ili radne površine.
Zapravo, jedna od najljepših stvari u vezi s PWA-om je ta što vaš kupac može spremiti web mjesto na početnu stranicu svog uređaja i kasnije ga koristiti za kupnju vašeg proizvoda ili za dobivanje dodatnih informacija. .
Na primjer, CNET Tech danas nudi dnevni sažetak vijesti vezanih uz tehnologiju koje su svakodnevni kruh web stranice. Ako otvorite web lokaciju s Google Chromeom na Android uređaju i pomaknete se prema dolje na dnu zaslona, vidjet ćete ovo:
tisak Dodaj na početni zaslon za preuzimanje progresivne web aplikacije Tech Today na svoj uređaj. Dodirnite ikonu za učitavanje prvih 10 trenutačnih vijesti. Prijeđite prstom ulijevo da biste pročitali svaku priču. Dodirnite CNET logotip da biste otvorili početnu stranicu CNET-a u svom pregledniku.
Bilješka : Na Firefoxu web mjesta s PWA imaju ikonu "Dodaj na početnu stranicu" (znak plusa u maleni okvir) izravno na adresnoj traci. Ako je PWA već instaliran, Android logotip na adresnoj traci odvest će vas do PWA.
Jedna stvar koja vašoj web lokaciji nije potrebna: widgeti "Preuzmi našu aplikaciju" zauzimaju prostor na vašoj stranici (obično s ometajućim korisnicima logotipa iTunes i Android). Ako Chrome primijeti da je korisnik otvorio vašu PWA web lokaciju nekoliko puta tjedno, zatražit će od vas da dodate svoj PWA. Ažuriranja su također automatska.
Nema potrebe za složenim programskim jezicima
Možda ste razmišljali o izradi izvorne mobilne aplikacije za svoju tvrtku, ali ste otkrili da je izrada mobilne aplikacije drugačija stvar od web stranica. Ako radite s agencijom za web dizajn/razvoj na održavanju svoje web stranice, oni neće nužno imati vještine za izradu aplikacije za glavne dobavljače mobilnih uređaja.
Da bi se vaš softver prikazao u Apple App Storeu, vaši programeri moraju se registrirati na Apple Developer Network, koristiti Apple Developer Tool (koji radi samo na Macu) i znati jezik Programiranje koje je Apple odobrio: Swift ili Objective C.
Programiranje za Android malo je lakše (nije potrebno odobrenje programera), ali velika većina Android aplikacija napisana je na Javi, što može biti težak jezik za učenje.
Da bi se aplikacija pojavila u internetskim trgovinama Apple ili Android, dovršena aplikacija mora dobiti odobrenje skrbnika odgovarajuće trgovine.
Suprotno tome, progresivne web aplikacije izrađuju se s popularnim web jezicima: HTML, CSS (Cascading Style Sheets) i JavaScript. Ukratko, čak i početnici web programeri mogu stvoriti visokokvalitetne PWA-ove.
Točnije, ne trebate puno računalne edukacije da biste napravili PWA za svoju WordPress stranicu. Ako ste već promijenili formatiranje web mjesta pomoću podređene teme, također možete stvoriti PWA datoteku. Probleme kodiranja obradit ćemo u drugom članku.
Povećati podršku tehnoloških divova
Standardima treba puno vremena da postanu standardi. Google je prvi put promovirao PWA 2015. godine.
Dugo je vremena Chrome bio jedini preglednik koji je podržavao PWA-ove, ali to će se uskoro promijeniti. Posljednjih mjeseci:
- Mozilla je dodala PWA podršku u Firefoxu 58
- Apple je nedavno najavio podršku za web aplikacije u iOS-u
- Microsoft će podržati PWA u sljedećoj verziji Windows 10, koja će biti dostupna kasnije ove godine (2018).
Idući dalje od ostalih dobavljača operativnog sustava, Microsoft je rekao da će se "visokokvalitetni" PWA uskoro integrirati u trgovinu aplikacija Windows 10 na mobitelima i radnim površinama.
WordPress i PWA
WordPress još uvijek ne podržava u potpunosti izgradnju progresivnih web aplikacija u osnovnoj aplikaciji. Tim Jetpacka predan je dodavanju PWA funkcionalnosti u narednoj godini. Tome pomaže Javascript-ova provjera WordPressa.
Jetpack "Postupno uvodi PWA značajke čim budu spremni", kaže programer Dan Walmsley u članku o WordPress VIP blogu . Programeri mogu dodavati datoteke manifesta pomoću Jetpack-ovog modula za manifest od verzije 5.6.0 i uveli su progresivno učitavanje slika, što ubrzava učitavanje web mjesta čak i kada na njemu ima puno slika. stranica. Više značajki doći će ove godine.
Nekoliko dodataka želi dodati PWA funkcionalnost, ali nisu usvojeni u velikoj mjeri.
- Alat za optimizaciju WordPress pruža radni i manifestni alat.
- Super Progresivne web aplikacije generiraju manifest i gumb Dodaj, između ostalih značajki, na početni zaslon.
- WordPress Mobile Pack također dodaje PWA značajke
Kako ćete koristiti PWA?
U ovom ste vodiču naučili nešto o progresivnim web-aplikacijama i zašto biste je trebali dodati web stranica Vaše tvrtke:
- Sve veći val prometa mobilnih uređaja
- Bolje performanse vaše web stranice - mobilnih i stolnih računala
- Dostupnost čak i kada je uređaj izvan mreže
- Koristi standardne web značajke: HTML, CSS i Javascript. Jeftinije za graditi
- Povećana podrška za preglednike i operativne sustave
Možda sada želite znati kako napraviti PWA u WordPressu? Ili pokazati programerima kako to učiniti? Ovo će biti tema drugog tutorijala.
