Budućnost je već stigla ili je sve u PWA aplikacijama. Šta su progresivne web aplikacije i koje mogućnosti nude za vaše poslovanje

U stvari, prilično je teško odgovoriti na ovo pitanje. Za sada, recimo ovo:

Progressive Web Apps (PWA) je hibridna aplikacija ili stranica koja radi na bilo kojoj platformi, na bilo kojem uređaju

Pokušaću da objasnim ovu ne baš adekvatnu definiciju.

Sada postoji ogroman broj uređaja koji se mogu koristiti za interakciju s našom kompanijom, ali konvencionalno, metode takve interakcije mogu se podijeliti u dvije vrlo velike grupe:

1. Web stranice
2. Mobilne aplikacije

Web stranice su nam dobro poznate i zauzimaju dominantan udio u komunikaciji između preduzeća i korisnika. Nedavno su stranice uglavnom postale zgodne za korištenje u gotovo svim uvjetima i na svim uređajima, ali postoji ozbiljno ograničenje - nestabilan komunikacijski kanal u mobilnom okruženju. Sve izgleda super, ali ako nema interneta, nema ni web stranice. A ako brzina internetske veze skoči i dramatično se promijeni sa desetina megabita u sekundi na nekoliko kilobita, onda se rad s web-mjestom teško može nazvati ugodnim. Zapamtite kako pregledavate web stranice u vlaku ili u vagonu podzemne željeznice...

U teoriji, mobilne aplikacije bi trebale imati ovaj nedostatak, ali čak i ovdje programeri zaboravljaju da korisnik možda nema internet. Međutim, razvoj i, ne manje važno, dalje održavanje aplikacije, pa čak i na različitim platformama, nije lak zadatak. I kao rezultat, dobijamo još jednu glupu aplikaciju iz kategorije "za show", čija vrijednost teži nuli. Osim toga, možete dodati nemogućnost pokretanja mobilnih aplikacija na desktopu, a to je vrlo često potrebno.

Progresivne web aplikacije su precizno dizajnirane da riješe ove probleme i kombinuju ove dvije velike grupe komunikacijskih metoda u jednu veliku - PWA. Možete to staviti ovako:

Progresivne web aplikacije su način za izgradnju aplikacija koje koriste web stog (HTML, CSS JS) koje slijede tri važna principa:

1. Nezavisnost od mrežne veze - radi van mreže

2. Brzina i odziv - brz odgovor na radnje korisnika

3. Native view - ideologija interfejsa uređaja se ne kvari

Nekoliko PWA primjera

Evo nekoliko linkova na kojima možete pronaći PWA, čak i tamo gdje možda ne očekujete da ćete ih vidjeti, na primjer, većina Googleovih usluga su PWA:

Pokušajte otvoriti ove stranice/aplikacije (čak i na desktopu!) I uključite način rada u avionu isključivanjem interneta.

Ako pažljivo pogledate gornju sliku, vjerovatno ćete primijetiti da Google Keep jasno radi u Windows interfejsu, odnosno da radi na desktopu kao punopravna aplikacija!

PWA na desktopu

Zaista, progresivne web aplikacije mogu i rade na desktopu (iako to još ne podržavaju svi pretraživači) kao obične aplikacije.

Evo primjera ekrana mog kompjutera. Sve, sve aplikacije koje su trenutno otvorene na ekranu - PWA.

Slažem se, neverovatno je zgodno! Ove aplikacije nije potrebno instalirati, nekoliko klikova mišem i sva podešavanja, cijelo radno okruženje vam je već dostupno. I nema razlike na kom računaru radite - na stacionarnom ili na laptopu. U kakvom je stanju posao napušten, u istom stanju će biti i na drugom radnom mjestu.

Ali kako je to moguće?

Implementacija progresivnih web aplikacija (PWA)

Prije svega, važno je razumjeti da je svaka PWA aplikacija stranica, tačnije, potpuna upotreba web steka:

• Sučelje aplikacije - HTML / CSS preko HTTPS-a (obavezno!)
• Interakcija korisnika (interaktivna) - AJAX (preferiramo REST API interakciju)
• Upozorenja, prisilna sinkronizacija podataka - Push API
• Keširanje podataka za rad van mreže - Service Workers i Cache API (više detalja u nastavku)

Evo malog uputstva o tome kako svoju prvu aplikaciju učiniti dostupnom od nule u Google Codelabs.

PWA manifest

SW je taj koji implementira politiku keširanja aplikacije kako bi aplikacija radila van mreže. Jasno je da će za svaku aplikaciju biti drugačije, ali programeri najčešće koriste Offile First politiku. Ima jedan divan članak (također star! PWA nisu rođeni danas a ne juče! I niste znali :)), koji dobro objašnjava zašto je to tako. Svakako odvojite vrijeme da ga proučite:
https://alistapart.com/article/offline-first

Generalno, Service Wordker je daleko od toga da je tako bezopasna stvar kao što se na prvi pogled može činiti, i s dobrim razlogom zahtijevaju detaljno razmatranje, ali za sada ćemo vam ponuditi kao prvi eksperiment ovo prilično jednostavno rješenje.
https://justmarkup.com/log/2016/01/add-service-worker-for-wordpress/

Ne gledajte na to kao na kompletno rješenje za web stranicu, ali to je odlična platforma za eksperimentiranje i razmišljanje! Možda ću kasnije pisati o našim velikanima i mnogim grabuljama na koje smo nagazili kada smo prvi put uveli PWA na sajtovima. Ako je ova tema zanimljiva - napišite pitanja u komentarima.

Implementacija PWA na WordPress stranicama

Čudno, ali uprkos činjenici da Progressive Web Apps postoje već duže vreme (a sama ideja je stara više od godinu dana!), programeri malo govore o njima. I nema toliko gotovih rješenja za najrašireniji CMS na svijetu. Ali postoji. Evo nekoliko dodataka koji vam omogućavaju da integrirate PWA funkcionalnost u vaše WordPress stranice:

• Super Progressive Web Apps je prilično jednostavan dodatak, ali prilično cool.
• Progressive Web Apps sa PWAThemes.com je složenije, ali i fleksibilnije rješenje, koje vam također omogućava da kreirate zasebne teme (izgled) za PWA prezentaciju.

Kako instalirati PWA na WordPress stranicu u praksi

Za početak, uzeo sam prilično jednostavnu internetsku trgovinu erotskog donjeg rublja - https://www.lustshop.ru/
Napomena: HTTPS je obavezan!

Instalirao Super PWA dodatak i postavio početne postavke (nema ih puno):

Resetovao sam keš stranice i pokušao se prijaviti sa mobilnog uređaja:

Evo banera za instalaciju aplikacije na dnu ekrana

Aplikacija je instalirana...

Sve! PWA aplikacija na vašem mobilnom uređaju!

Sada pokušajmo da ga stavimo na radnu površinu. Da biste to učinili, odaberite ovu stavku u pretraživaču:

Spremni! Aplikacija se pojavila na desktopu!

Kratki zaključci

Dakle, kao što možemo vidjeti, progresivne web aplikacije zapravo povezuju stranice i aplikacije, brišući granice između njih.

Koristeći PWA pristup, možemo kreirati pogodnu uslugu (web stranicu? aplikaciju?) koja će raditi u svim uvjetima, na bilo kojoj platformi.

Dodaci će vam omogućiti da napravite jednostavnu PWA aplikaciju, ali neće riješiti sve probleme. Dobru aplikaciju morate pažljivo osmisliti i razviti sami.

Ali to je sasvim druga priča...

Koncept progresivnih web aplikacija (PWA) postoji već duže vrijeme, od proljeća 2018. aplikacije ove klase podržavaju svi glavni pretraživači, međutim, prevalencija PWA tehnologija, uprkos njihovim očiglednim "prednostima", je i dalje veoma nizak.

Google stručnjaci (uključujući i Habré) pišu vrlo informativno i kompetentno o PWA, ali su njihove preporuke korisnije onima koji su već upoznati s tom temom. Ovaj članak ima za cilj da pokaže da progresivne web aplikacije nisu teške i da programeri bilo koje stranice mogu i trebaju koristiti ove tehnologije upravo sada.

PWA filozofija

Za početak, vrijedi napomenuti da ne postoji tačna definicija PWA aplikacije. Nije jasno da li je ova stranica PWA ili ne. Ovo je proširena skala na kojoj se može locirati i početna stranica druge godine Petye, koja je dodala manifest web aplikacije koja kreira ikonu stranice na početnom ekranu mobilnog telefona; i spolja se ne razlikuje od običnog sajta za vesti, za koji samo korisnici mogu reći da je iznenađujuće brz i zgodan, a sve zato što negde unutra kuca toplo srce uslužnog radnika (a).

Relativnost PWA leži u samom nazivu - "progresivni". Progresivna u odnosu na šta i u kojoj meri? Ali ova relativnost je, zapravo, vrlo dobra, jer možete postepeno učiti PWA tehnologije i primijeniti ih u svojim trenutnim projektima, bez globalnog remodeliranja i refaktoriranja.

S druge strane, PWA ima ideju, a ideja je jasna i dovoljno moćna. A koliko se to sporo odvija može ukazati na veličinu posljedica.

PWA arhitektura

PWA je web aplikacija napravljena korištenjem specifičnih tehnologija za postizanje određenih ciljeva.

Ciljevi se dešifruju na sljedeći način:

Pouzdanost(Pouzdan) - aplikacija se učitava i prikazuje odmah, bez obzira na status i kvalitet mrežne veze.
Brzina(Brzo) - razmjena podataka preko mreže je brza, korisničko sučelje je glatko i brzo reagira.
Privlačnost(Zanimljivo) - čini korisničko iskustvo s aplikacijom ugodnim i ugodnim, ohrabrujući ga da ga želi doživjeti ponovo, i ponovo, i ponovo...

Iz Googleove perspektive, to je ono što sada odvaja izgled i dojam web stranica od izvornih aplikacija.

Drugim riječima, programeru se nude alati (Service Worker, Push Notifications, itd.) i naznačeni su ciljevi (sajt/aplikacija treba da se brzo učitava, da radi na slaboj konekciji, a ne da "lag", radi van mreže ako je potrebno) . Koliko daleko na ovom putu razvijač zavisi samo od njega.

PWA i izvorne aplikacije

Činjenica da su PWA površno slični nativnim aplikacijama prije je kozmetičko rješenje (iako važno za korisnika sa psihološke tačke gledišta). Ali činjenica da su interno slični (svi glavni resursi aplikacije mogu se pohraniti na klijentu, samo će se promjenjivi sadržaj prenositi preko mreže) je veliko postignuće.

Možda biste to čak nazvali skrivenom revolucijom. U stvari, pretraživač se koristi kao vrsta virtuelne mašine koja pohranjuje i pokreće PWA aplikaciju. Baš kao što je Android virtuelna mašina za Android aplikacije, pretraživač postaje virtuelna mašina za PWA. Baš kao što izvorna aplikacija pristupa svojim resursima preko sistema datoteka, tako i PWA pristupa svojim resursima - doduše preko HTTP-a, ali pohranjenih lokalno.

I jednom, sve radi isto na svim glavnim pretraživačima i na svim glavnim platformama.

Google napada iOS

Postoje mobilne aplikacije koje moraju biti izvorne (performanse, pristup sistemskim resursima, itd.), ali postoje aplikacije koje su po svojoj funkcionalnosti prilično ostvarive kao PWA. Za njih sada:

Nema potrebe za pisanjem različitih verzija za Android i iOS (i Windows)
- Nema potrebe da se registrujete na Google Play i App Store i platite za to
- Otvoren direktan pristup radnoj površini

Do sada je tržište mobilnih aplikacija bilo zatvoreno za entuzijaste koji mogu napisati koristan program, ali ne mogu/ne žele platiti da ga hostuju. I ne žele da se upliću u birokratiju Google-a i Apple-a kako bi provjerili aplikaciju, nakon čega se s čežnjom prisjećaju monopolskih vremena Microsofta.

Sada su ove barijere srušene. I Google ih je razbio. S obzirom da je upravo ona vodeći u internet tehnologijama, takav je ulazak na teritorij iOS-a, najvjerovatnije, prilično promišljen i proračunat. Ostaje čekati bum PWA.

Postoje, naravno, razlike između PWA i nativnih aplikacija – uglavnom u pravima pristupa sistemskim resursima, ali rad u tom smjeru ide čak i na polju čistog HTML5, a za PWA dodatne privilegije neće predstavljati problem.

APK vs PWA

Iz ličnog iskustva možete se prisjetiti kako je nakon prebacivanja jedne web stranice za vijesti na rad sa Service Worker-om odlučeno da se napusti Android aplikacija napravljena prema funkcionalnosti stranice. I to ne toliko zato što je njegova podrška zauzimala ljudske resurse, već zato što je PWA verzija, začudo, bila brža, ljepša i praktičnija za rad od java aplikacije.

Tehnologije

Pogledajmo na brzinu glavne pokretače PWA.

Servisni radnik

Srce PWA je Service Worker. Ovo je proxy sloj između front-end i back-end koji se nalazi u pretraživaču. Svi zahtjevi pretraživača prolaze kroz njega. Ova podjela na dva nezavisna sloja omogućila je da se prelazak obične web stranice na PWA učini što lakšim.

Iz skladišta, Service Worker "a ima pristup Cache Storage-u za web resurse i IndexDB-u za podatke. Ali, što je najvažnije, potpuna sloboda implementacije poslovne logike.

Možete, na primjer, prihvatiti zahtjev od pretraživača, provjeriti stanje mreže, uzeti podatke iz skladišta, izvršiti operacije s njima i vratiti neki rezultat nazad pretraživaču - koji će misliti da je odgovor došao sa servera. Ili ne - kako programer želi, on će to učiniti. Dva sloja pretraživača (client frontend i service worker) omogućavaju vam da pišete punopravne aplikacije.

Istovremeno, za većinu lokacija, funkcionalnost keširanja servisnog radnika će biti dovoljna da se razvije u PWA.

PWA ne ovisi ni o kakvom okviru, to je čisti javascript, iako čak i Google stručnjaci za Habré iz nekog razloga savjetuju korištenje generatora kodova biblioteke. Service Worker je lijepo napisan rukom, a to je neophodno kako biste dobro razumjeli i kontrolirali logiku vaše aplikacije.

Sa stanovišta programera, Service Worker je javascript datoteka uključena u html kod stranice. U njemu programer definira logiku za rad sa zahtjevima koji dolaze sa frontenda i druge funkcionalnosti.

HTTPS

PWA zahtijeva da se svi resursi web lokacije prenesu preko HTTPS protokola. SSL certifikat se može dobiti besplatno, neki hosteri to rade umjesto vas. Ali važno je da stranica nema veze do nezaštićenih resursa - neki pretraživači jednostavno neće prikazati stranicu u ovom slučaju.

Glavni problem sa kojim se susreću u takvim slučajevima su slike. Često urednici ili komentatori u materijal stavljaju linkove do slika sa interneta, ponekad i automatski stignu tamo (u materijal). Slike je potrebno ponovo sačuvati ili sebi ili servisu sa pristupom preko HTTPS-a.

Shell aplikacije

Shell aplikacije je samo kostur grafičkog interfejsa, šablon. Na primjer, uzmimo srednju stranicu sa zaglavljem, dvije kolone i tako dalje. Grubo govoreći, izrežemo sadržaj trenutne stranice i sve dinamičke informacije iz nje, ostatak statike je ljuska aplikacije.

Suština je da se ljuska aplikacije pohranjuje na klijentu i učitava kada se aplikacija pokrene, a zatim se dinamičke informacije učitavaju u nju iz mreže. I dok se učitava, ljuska aplikacije bi trebala izgledati lijepo (utovarivači na terenu, itd.)

Ova arhitektura sajta - učitavanje sadržaja i drugih dinamičkih informacija putem ajax poziva - može se unapred zamisliti i implementirati na sajtu, tada će prelazak na PWA biti prilično lak.

Shell aplikacije je poput ljuske za izvorni program. Gledajte na svoj PWA kao na izvorni program i mnoge stvari će postati lakše.

Manifest web aplikacije

JSON fajl koji deklarativno definiše ime aplikacije za pretraživač, ikonicu, kako će PWA izgledati (na celom ekranu, samostalno, itd.) i neke druge parametre. Omogućava vam da "instalirate" PWA kao samostalnu aplikaciju na početnom ekranu vašeg pametnog telefona.

Push obavještenja

Ako surfate internetom s Chrome DevTools otvorenim na kartici Aplikacije, možete vidjeti koliko malo web lokacija koristi PWA tehnologiju. A 90% onih koji ga koriste samo radi Push obavijesti.

Ovo je do sada najpopularnija i najzloupotrijebljenija PWA tehnologija - u posljednjih nekoliko mjeseci porastao je broj stranica na koje ulazak prije svega traži dugme "Blokiraj" na ponudi za primanje najnovijih vijesti, npr. osjećaj, mnogo puta, i sama želja da nametnete svoj Push je kao Spam.

Ali možete ponuditi pretplatu na drugu ili treću posjetu korisnika stranici, kada je već jasno da nije ovdje slučajno.

12.04.2017

Ovo je jedan od najtoplijih trendova u razvoju weba i sve više ljudi želi znati za ovaj koncept. U ovom članku pokušaću da objasnim tehnologiju PWA (Progressive Web Application) na način koji je razumljiv ne samo IT profesionalcima, već i onima koji su zainteresovani da budu tema novih trendova u veb industriji.

Ako pogledate šarene kvadrate na početnom ekranu vašeg pametnog telefona, oni će se sada zvati "native" ili "native applications". Oni su "nativni" jer su dizajnirani za operativni sistem vašeg pametnog telefona (bilo da je iOS ili Android).

ŠtaistotakavProgresivne web aplikacije

Progresivna web aplikacija (PWA) je web stranica koja izgleda i ponaša se kao mobilna aplikacija, što znači da je možete dodati na početni ekran svog pametnog telefona, slati push obavijesti, pristupiti hardveru uređaja i raditi van mreže. Da, dobro ste pročitali. Progresivna web aplikacija radi jednako glatko na nestabilnoj vezi ili van mreže, kao i s punim pristupom internetu.

Kako pretraživač može otvoriti web stranicu bez pristupa internetu, pitate se? Vjerovali ili ne, vaš pretraživač sada ima mnogo sjajnih funkcija koje niste očekivali prije samo nekoliko godina.

Web lokacije kao što je whatwebcando.today su u mogućnosti da analiziraju API vašeg pretraživača i pokažu vam koje funkcije koje su izvorno dostupne na mobilnom uređaju takođe podržava pretraživač. Probajte i bićete iznenađeni. Chrome verzija (57) u mom primjeru podržava 27 od 36 funkcija.

Recimo da moj pretraživač podržava sve ove funkcije - odlično. Ali imam toliko izvornih aplikacija za pametne telefone koje koristim svaki dan, da ne mogu jednostavno odustati od svega i prebaciti se na PWA. Ali ovdje vjerovatno griješimo.

Studija marketingland.com iz 2015. otkrila je nevjerovatnu statistiku - korisnici mobilnih uređaja provode 80% svog vremena na svojim uređajima koristeći samo tri prioritetne izvorne aplikacije.

Udio vremena provedenog u prioritetnim aplikacijama od strane različitih korisnika

To znači da postoji velika šansa da se dosta izvornih aplikacija dugo nije koristilo. Morate proći kroz proceduru preuzimanja, a zatim deinstalirati aplikacije koje nisu prošle vaš crash test ili su vam vremenom postale irelevantne. Nekoliko mobilnih aplikacija kao što su Facebook, Instagram, email ili druge ostaju prioritet za većinu nas.

Broj preuzetih izvornih aplikacija opada iz godine u godinu. Poslednjih godina je opao za 20% i ova brojka nastavlja da raste. U 2016. godini broj preuzetih aplikacija postao je manji od broja uklonjenih aplikacija.

Prosječan broj instaliranih izvornih aplikacija mjesečno

Još jedan nedostatak mobilnih aplikacija je da te aplikacije treba tražiti. Bilo da se radi o App Storeu ili Google Play-u, da biste preuzeli aplikaciju iz trgovine, prvo je morate pronaći tamo (što znači da morate znati tačno šta tražite, inače ćete morati isprobati desetine aplikacija da pronađite onaj koji vam odgovara). Kliknite na "Preuzmi", prihvatite uslove, sačekajte da se aplikacija preuzme, a zatim je instalirajte... Dok se sve završi, lako ćete zaboraviti šta ste tražili i za šta.

Ljepota progresivne web aplikacije je u tome što ju je vrlo lako otkriti, baš kao i običnu web stranicu - proguglate je, kliknete na link da biste je otvorili, i to je to, imate aplikaciju na svom uređaju spremnu za posluživanje. U tom slučaju, sam pretraživač će vam ponuditi da dodate ikonu na radnu površinu. Ako se slažete s ovim, vidjet ćete ikonu vaše aplikacije na početnom ekranu vašeg telefona, kako mirno sjedi pored vaših izvornih aplikacija. Sada možete pokrenuti PWA baš kao mobilnu aplikaciju - sa lijepim početnim ekranom, prepoznavanjem orijentacije i još mnogo toga.

Težina aplikacije je još jedan važan faktor. Prosječna težina izvorne aplikacije je oko 25 MB. Neki od njih se tove. Što se više različitih servisa pojavljuje, to je više aplikacija natrpano u našim pametnim telefonima i nema uvijek dovoljno mjesta za sve njih.

Prosječna težina Progressive Web Apps je samo 2MB.

Koje su prednosti progresivnih web aplikacija

• Web programeri koji se ne boje biti prvi koji će se pozabaviti novim tehnologijama tvrde da je PWA lako razviti u poređenju sa modernim stranicama.
• Progresivne web aplikacije postaju nezamjenjive u SEO areni. Google rangira PWA značajno više u rezultatima pretraživanja. Takođe, sve progresivne web aplikacije rade preko HTTPS protokola, odnosno Google takođe pozitivno reaguje na ovo i nagrađuje sajt povoljnijim rangiranjem.
• Višeplatformska priroda Progressive Web Apps daje nam mogućnost da kreiramo jednu web aplikaciju koja će raditi na apsolutno svim uređajima na kojima je prisutan pretraživač.
• Mogućnost nastavka rada s aplikacijom ako dođe do kvara internetske veze i povećana brzina preuzimanja s PWA-om će vas zaštititi od gubitka potencijalnih konverzija i od povećanja broja odbijanja.

tako, Progresivna web aplikacija jesite, što je:

• može se "instalirati" na pametni telefon
• izgleda kao izvorna aplikacija
• radi van mreže
• šalje push obavještenja

Štaviše, njegove prednosti u odnosu na izvorne aplikacije:

• cross-platform
• indeksirano
• mala težina
• pretraživač od vas traži da instalirate
• Trenutna instalacija
• nema potrebe za ažuriranjem, uvijek pružite svjež sadržaj i interfejs
• SEO poboljšanja

Slažete se, takve prednosti progresivnih web aplikacija navode vas da mislite da će izvorne mobilne aplikacije uskoro biti osuđene na propast.

Važno je razumjeti da “progresivne web aplikacije” nisu okvir ili programski jezik. To je više kao skup zahtjeva koje web aplikacija mora ispuniti da bi ispravno funkcionirala kao progresivna. To je sposobnost web aplikacija da kombiniraju mogućnosti izvornih mobilnih aplikacija uz zadržavanje prednosti stranice.

Pogledajmo kako PWA može funkcionirati kao izvorna mobilna aplikacija.

Keširanje ljuske aplikacije

Ovo je minimalni skup HTML-a, CSS-a i JavaScript-a potrebnih za prikazivanje glavne stranice aplikacije. Kada odete na internet i otvorite web stranicu, čekate da se učita cijela glavna stranica, a to uključuje ne samo dinamički sadržaj stranice, već i sve slike, fontove, stilove, JavaScript koji se koristi na stranici - i većinu od njih ostaju isti bez obzira koliko puta otvorite stranicu. Pa zašto ne keširati cijelu stvar?

Kada se PWA pokrene po prvi put, on stavlja sve statičke resurse i omotač aplikacije u keš memoriju. Sljedeći put kada se aplikacija pokrene, povući će statičke informacije aplikacije direktno iz keš memorije, što će dramatično povećati vrijeme potrebno korisniku da vidi dragocjene piksele na ekranu. Ako ste ikada pokušali da otvorite veb lokaciju na 3G konekciju, znaćete na šta mislim.

Pročitajte također: 10 razloga zašto vaša Instagram publika ne raste i kako to popraviti

Keširanje odgovora

Ovo je vjerovatno najmoćnija stvar koju PWA može učiniti. Oni mogu keširati ne samo statičke komponente omota aplikacije, već i cijele odgovore iz GET zahtjeva.

Recimo da ste jučer posjetili PWA za vijesti da pročitate vijesti. Ako ga otvorite danas, odmah ćete dobiti sažetak vijesti od jučer, dok aplikacija preuzima novi sadržaj u pozadini, dinamički ga ubacuje u feed koji već gledate. Ako ne možete dobiti svježi sadržaj, na primjer, jer ste van mreže, ostat će vam jučerašnji feed, ali barem nećete dobiti greške.

Postoji nekoliko algoritama za keširanje koji se mogu implementirati, izbor ovisi o namjeni aplikacije.

Algoritmi za keširanje

Predmemorija sa zamjenom na mrežu	Mreža sa zamjenom na Cache	Cache i mrežna utrka
"Keš memorija sa rezervom za mrežu" Koristite ako kreirate samostalnu prvu aplikaciju. Ako je odgovor već u kešu, on će biti proslijeđen korisniku i online zahtjev nikada neće biti dovršen. Ako odgovor još nije keširan, aplikacija će pokušati da ga preuzme na mreži i zatim ga kešira. Ovaj pristup treba koristiti za sadržaj koji se mijenja vrlo rijetko ili se uopće ne mijenja.	"Vraćanje na keš mrežu" Ovo je pristup u kojem korisnici na mreži uvijek dobijaju trenutnu online verziju, a offline korisnici dobijaju keširanu verziju. Koristite ga za resurse koji se često ažuriraju.	"Utrka za gotovinu i mrežu" Ovo je kada tražite odgovor u kešu dok istovremeno tražite sadržaj na mreži. Prvo prikazujete keširani odgovor korisnika, a zatim ga zamjenjujete novim sadržajem čim se pojavi ili dodajete novi sadržaj na vrh keširanih stranica kao što su Facebook i Twitter.

ManifestPWA

Bez obzira koji se šablon koristi, uvijek postoji slučaj u kojem se odgovor ne kešira i ne može preuzeti na mreži. U ovom slučaju, statična HTML stranica (koja je također keširana kao dio ljuske aplikacije) se servira i kaže nešto zgodno da uvjeri korisnika, kao što je "Izvini druže, tvoj keš je prazan i internet ne radi." Ovo je način da obavijestite korisnika da je nešto pošlo po zlu i da trenutno ne postoji način da se taj određeni sadržaj posluži. Ovo će aplikaciju učiniti tolerantnom na greške i učiniti je funkcionalnom čak i tokom apokalipse.

Offline podrška je izuzetno važna, ali da bi uspješno zamijenila nativnu aplikaciju, PWA mora izgledati i ponašati se kao izvorna aplikacija. Ovo se postiže putem datoteke manifest.json, koja sadrži svojstva aplikacije u JSON formatu kao što su naziv, URL početne stranice, ikone za različite rezolucije, boje prskanja, orijentacija uređaja i još mnogo toga.

("ime": "Naziv aplikacije", "short_name": "Kratki naziv", "ikone": [("src": "slike / ikone / ikona-128x128.png", "veličine": "128x128", "tip": "image / png"), ("src": "slike / ikone / ikona-144x144.png", "veličine": "144x144", "tip": "slika / png"), (…), ("src": "slike / ikone / ikona-256x256.png", "sizes": "256x256", "type": "image / png")], "stert_url": "/index.html", "display": samostalno " , // Pretraživač? minimalni-ui, cijeli ekran"background_color": "# 3E4EB8" prikaz ":" 2F3BA2)

Ako aplikaciju otvorite dva puta na mobilnom uređaju, najmanje 5 minuta između posjeta, od vas će biti zatraženo da je instalirate na uređaj, kao što smo već pisali gore (naravno, pod uvjetom da je manifest na mjestu).

Servisni radnik

Sve pomenuto keširanje radi mali pomoćnik pretraživača koji se zove "Service Worker", koji u suštini nije ništa drugo do JavaScript fajl koji se nalazi u aplikaciji, ali se izvršava u posebnom procesu, što znači da neće biti prekinut kada zatvorite aplikaciju u pretraživaču (ili čak u samom pretraživaču). Nakon registracije na glavnoj stranici aplikacije, Service Worker kešira statičke informacije u ljusci aplikacije i počinje s obradom zahtjeva koje je aplikacija poslala, keširajući i servirajući odgovore na osnovu logike programirane u njoj.

Progresivne web aplikacije pretvaraju web stranice i web usluge u nešto poput samostalnih aplikacija. Ovaj pristup ima nekoliko prednosti, a posebno korisnici mogu pokrenuti aplikacije direktno iz operativnog sistema, pa čak i koristiti ih bez mrežne veze.

Offline podrška u velikoj mjeri ovisi o određenoj aplikaciji i funkcionalnosti koju pruža. Notepad bi trebao raditi dobro kada je van mreže, dok Spotify ili Twitter možda neće raditi ili podržavaju samo ograničenu funkcionalnost jer je potrebna aktivna internetska veza za preuzimanje podataka na uređaj korisnika.

PWA također mogu koristiti funkcionalnost koju pruža operativni sistem. Na primjer, na Windows 10, aplikacije mogu koristiti Akcioni centar operativnog sistema ili slijediti određena pravila i politike operativnog sistema.

Napomena: Korisnici Linuxa i Mac OS X-a moraju omogućiti chrome: // flags / # enable-desktop-pwas politiku u svom pretraživaču tako što će je postaviti na Omogućeno... Google planira dodati podršku za PWA prema zadanim postavkama za ove sisteme samo u Chrome 72.

Instaliranje PWA na Chrome

Google je integrirao podršku za progresivne web aplikacije u Chrome 70, koji je objavljen u oktobru 2018. Za instaliranje takvih aplikacija koristi se prilično jednostavan pristup.

Korisnici Chromea bi trebali posjetiti PWA stranicu kao što je stranica aplikacije Notes> Notepad i odabrati iz glavnog menija Instaliranje aplikacije “Notepad”... za ugradnju.

Chrome zatim učitava aplikaciju u svoj izvorni interfejs, a zatim je dodaje na listu instaliranih aplikacija na operativnom sistemu. Korisnici Windows 10 moći će pronaći aplikaciju u početnom meniju i pokrenuti je u bilo kojem trenutku.

Pošto je aplikacija navedena u meniju Start, možete komunicirati sa aplikacijom kao i sa bilo kojom drugom instaliranom aplikacijom. Kliknite desnim tasterom miša da biste zakačili aplikaciju na meni Start ili traku zadataka, deinstalirali aplikaciju, otvorili njenu lokaciju ili je pokrenuli kao administrator.

Chrome također navodi instalirane progresivne web aplikacije i korisnicima pruža opcije za upravljanje. Google je donio odluku da ih integriše sa aplikacijama pretraživača. Stoga, da biste vidjeli potpunu listu instaliranih aplikacija, otvorite chrome: // aplikacije / stranicu.

Možete otvoriti bilo koju instaliranu aplikaciju klikom ili dodirom na ekranu osjetljivom na dodir. Postoji nekoliko korisnih opcija dostupnih u meniju desnog klika: uklonite PWA iz Chromea, kreirajte prečicu ili onemogućite opciju „Otvori u novom prozoru“ da otvorite pokretač u novoj kartici preglednika.

Chrome i PWA

PWA podrška radi odmah nakon instaliranja pretraživača i implementirana je za maksimalnu udobnost korisnika. Najveće ograničenje u ovom trenutku je to što Google ne podržava Progressive Web App Store ili Repository.

Kompanija bi mogla dodati progresivne aplikacije u Chrome web trgovinu, ali za sada nisu najavljeni nikakvi planovi.

Korisnici Chromea koji žele koristiti PWA primorani su posjetiti tačan URL aplikacije svaki put kako bi je instalirali u glavnom Chrome izborniku. Takve aplikacije možete tražiti ručno ili možete koristiti liste trećih strana, na primjer, listu na "> Outweb.

Pronašli ste grešku u kucanju? Pritisnite Ctrl + Enter

Moderne web stranice s progresivnim web aplikacijama (PWA) mogu pretvoriti web lokaciju u mobilnu aplikaciju. U trenutku posjete takvoj stranici, s mobilnog uređaja, pretraživač nudi iskačuću poruku “ DODAJTE NA POČETNI EKRAN»I ako se korisnik složi, stranica se instalira kao aplikacija u pozadini. Od tog trenutka stranica na Internetu ostaje stranica, a na mobilnom uređaju mobilna aplikacija.

Ne, nisam pogrešio. Sada stranica postaje mobilna aplikacija sa svim svojim karakteristikama i prednostima. Nije li stvarno kul! Obratite pažnju na ovaj trenutak, ne moramo ići u specijalnu prodavnicu mobilnih aplikacija App Store ili Google Play, radimo direktnu instalaciju, što je mnogo bolje.

Postoje li ograničenja za takvu aplikaciju? Apsolutno ne! Ograničenja mogu biti samo u funkcionalnosti, ali to ne zavisi od same aplikacije, već od funkcionalnosti koja je u nju ugrađena. Zatim ćemo se dotaknuti resursa za kreiranje i implementaciju Progressive Web Apps na web lokacijama.

Pažnja. Moderna web stranica sa tehnologijom Progresivne web aplikacije učitava veoma brzo. Radi sa bilo kojom internet konekcijom, bilo da se radi o širokopojasnoj 4g ili slaboj 2g, ili bez interneta, autonomno (offline). Rad offline stranice zasniva se na informacijama preuzetim iz očekivanih posjeta.

Kako funkcionira takva aplikacija? Aplikacija koju smo instalirali radi autonomno i ne treba joj pretraživač. Kada ga pokrenete, vidite istu stranicu kao na Internetu sa svim njegovim mogućnostima: čitajte vijesti, kupujte, ostavljajte komentare. Osim toga, možete ga koristiti van mreže sa slabom ili bez internetske veze. Na primjer, napišete poruku ili popunite korpu robom, a u tom trenutku je došlo do prekida s internetom, ne brinite, vaše radnje će se automatski pohraniti, a kada se veza uspostavi, prenijet će se na site. Zar nije stvarno sjajno!

Ključne prednosti web stranica s progresivnim web aplikacijama

1. Progresivnost. Sa svakim novim ažuriranjem dobijamo nove tehnološke inovacije. Jednom povezani, ostajemo, da tako kažem, u razvoju novih tehnologija.
2. Responsiveness. Mogućnost prilagođavanja različitim operativnim sistemima uređaja, njihovim ekranima i mogućnostima.
3. Internet veza neovisna. Offline rad van mreže - van mreže.
4. Kao izvorna aplikacija. Native znači imati sopstvenu softversku ljusku koja se brzo učitava.
5. Safe. Radi preko sigurnog HTTPS protokola.
6. Može se pretraživati ​​na internetu. Progresivna web aplikacija je i dalje stranica na internetu, pretraživa, indeksirana.
7. Push tehnologija. Mogućnost komunikacije između vlasnika i korisnika slanjem poruka na uređaj (push notifikacije).
8. Jednostavna instalacija i distribucija. Instalacija jednim klikom, zaobilazeći App Store ili Google Play. Možete podijeliti koristeći link.

Zašto je potrebno implementirati PWA na moderne web stranice?

Nije tajna da je 2014. bila značajan događaj koji je promijenio lice interneta. Podsjetimo. Tada je broj posetilaca interneta sa mobilnih uređaja premašio publiku posetilaca sa desktop računara. Od tada sve češće čujemo mobilnu stranicu, responzivni dizajn. Pogledajte grafikon rasta za korisnike mobilnog interneta.

Pretraživači su odmah reagovali novim zahtevima za sajtove. Postalo je obavezno imati ili mobilnu verziju stranice ili responzivnu, jer je u suprotnom, barem, web stranica gubila posjetitelje na mobilnim uređajima.

Više od polovine svjetske populacije je sada na internetu. Broj korisnika interneta širom svijeta svake se godine povećava za više od 20 posto.

• Dvije trećine svjetske populacije koristi pametni telefon.
• Broj jedinstvenih mobilnih posjetitelja širom svijeta porastao je za 4% tokom godine.
• Pametni telefoni su preferirani uređaji za pristup Internetu, koji zajedno čine najveći udio korisnika weba.

Kako započeti s PWA na modernim web stranicama

Moderna izrada web stranica uz WordPress

Progresivne web aplikacije (PWA) To je nova tehnologija koja kombinuje najbolje mobilne stranice i najbolje mobilne aplikacije za stvaranje vrhunskog mobilnog web iskustva. Instaliraju se na telefonu kao obična aplikacija (web aplikacija) i može im se pristupiti sa početnog ekrana.

Korisnici se mogu vratiti na vašu web lokaciju pokretanjem aplikacije sa svog početnog ekrana i interakcijom s vašom web lokacijom putem sučelja aplikacije. Vaši posjetitelji će ga pokrenuti gotovo trenutno i uživati ​​u velikim prednostima vašeg PWA!

Nakon instaliranja SuperPWA, korisnici koji pretražuju vašu web lokaciju na mobilnom uređaju vidjet će obavijest „Dodaj na početni ekran“ (na dnu ekrana) i mogu „instalirati vašu stranicu“ na početnom ekranu svog uređaja. Svaka stranica koju posjetite pohranjena je lokalno na ovom uređaju i bit će čitljiva čak i kada ste van mreže!

SuperPWA se lako postavlja, potrebno je manje od minute da se instalira progresivna web aplikacija. SuperPWA vrši čistu deinstalaciju, briše svaki unos i datoteku baze podataka koju kreira. U stvari, nijedna od zadanih postavki se ne pohranjuje u bazu podataka dok je ručno ne sačuvate prvi put. Probaj.

Šta je u kutiji

Evo trenutnih karakteristika Super Progressive Web Apps:

• Postavljanje ikone za vašu progresivnu web aplikaciju.
• Postavite boju pozadine za početni ekran vaše progresivne web aplikacije.
• Vaša web stranica će prikazati obavještenje "Dodaj na početni ekran" kada se pristupi u pretraživaču.
• Agresivno keširanje stranica pomoću CacheStorage API-ja.
• Stranice koje su jednom bile keširane se poslužuju čak i ako je korisnik van mreže.
• Postavite prilagođenu offline stranicu: ako želite da je poslužite korisniku, ali nije u kešu i bit će dostupna čak i kada je korisnik van mreže.
• Podrška za tematske boje.
• Sada možete urediti naziv aplikacije i kratak opis.
• Instalirajte početnu stranicu vašeg PWA.
• Postavljanje Accelerated Mobile Pages (AMP) kao početne stranice.
• Podržani dodaci: AMP za WordPress, AMP za WP, Better AMP, AMP Supremacy, WP AMP.
• Dodata podrška za čuvar ekrana visokog kvaliteta.
• Sada možete postaviti ikonu 512px × 512px za početni ekran Progressive Web App.
• Super progresivne web aplikacije sada poštuju ažuriranja sadržaja i osvježavaju keš memoriju kada se web stranica ažurira.
• Poboljšano rukovanje ažuriranjima desktopa u pretraživaču.
• Sada možete postaviti zadanu orijentaciju vašeg PWA. Odaberite Bilo (Orijentirano na uređaj), Portret ili Pejzaž.
• Sada možete postaviti svojstvo theme_color u svom manifestu.
• OneSignal integracija za Push obavijesti.
• Kompatibilan sa višekorisničkom mrežom WordPress.

Kako pretvoriti svoju WordPress stranicu u progresivnu web aplikaciju

Instalacija u WordPress u pet koraka:

1. Idite na WordPress Admin
2. Dodaci
3. Dodaj novi
4. U liniji za pretragu upišite: "PWA"
5. Kliknite "Instaliraj", a zatim "Aktiviraj"

Za ručno instaliranje:

1. Otpremite fasciklu Super Progressive Web Apps u / wp-content / plugins / direktorij na vašem serveru
2. Idite na WordPress Admin> Dodaci
3. Aktivirajte dodatak Super Progressive Web Apps sa liste.

Vaša Progressive Web App bi trebala biti spremna za korištenje sa zadanim postavkama kada se aktivira. Možete ga dodatno prilagoditi i učiniti ga zaista svojim.