Budućnost je već stigla ili se sve vrti oko PWA aplikacija. Što su progresivne web aplikacije i koje mogućnosti otvaraju za vaše poslovanje

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

Progresivne web aplikacije (PWA) hibridna je aplikacija ili web stranica koja radi na bilo kojoj platformi, na bilo kojem uređaju

Pokušat ću objasniti ovu ne baš dobru definiciju.

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

1. web stranice
2. Mobilne aplikacije

Web stranice su nam dobro poznate i zauzimaju dominantan udio u poslovnoj i korisničkoj komunikaciji. Nedavno su web stranice većinom postale prikladne za korištenje u gotovo svim uvjetima i na bilo kojem uređaju, ali postoji ozbiljno ograničenje - nestabilan komunikacijski kanal u mobilnim uvjetima. Sve izgleda super, ali ako nema interneta, nema ni web stranice. A ako brzina internetske veze skoči i dramatično se promijeni s desetaka megabita u sekundi na nekoliko kilobita, onda se rad s web-mjestom teško može nazvati ugodnim. Sjetite se kako gledate web stranice u vlaku ili u vagonu podzemne željeznice...

Mobilne aplikacije bi trebale biti oslobođene ovog nedostatka, ali čak i ovdje programeri zaboravljaju da korisnik možda nema internet. Međutim, razvoj i, ne manje važno, daljnje održavanje aplikacije, pa čak i na različitim platformama!, nije lak zadatak. I kao rezultat, dobivamo još jednu glupu aplikaciju iz kategorije "za show", čija vrijednost teži nuli. Osim toga, možete dodati nemogućnost rada mobilnih aplikacija na radnoj površini, a to je vrlo često potrebno.

Progresivne web aplikacije dizajnirane su za rješavanje ovih problema i kombiniranje ove dvije velike skupine komunikacijskih metoda u jednu veliku - PWA. Možete reći ovo:

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

1. Neovisnost od mrežne veze - radi izvan mreže

2. Brzina i odziv - brza reakcija na radnje korisnika

3. Izvorni izgled - ideologija sučelja uređaja se ne lomi

Nekoliko primjera PWA

Evo nekoliko veza na kojima možete pronaći PWA, čak i tamo gdje ih ne biste očekivali, na primjer, većina Googleovih usluga su PWA:

Pokušajte otvoriti ove stranice/aplikacije (čak i na radnoj površini!) i uključiti način rada u zrakoplovu dok isključujete internet.

Ako pomno pogledate gornju sliku, sigurno ćete primijetiti da Google Keep jasno radi na Windows sučelju, što znači da radi na radnoj površini kao potpuna aplikacija!

PWA na desktopu

Doista, progresivne web aplikacije mogu i rade na radnoj površini (iako to još uvijek ne podržavaju svi preglednici) kao obične aplikacije.

Evo primjera zaslona mog računala. Sve, sve aplikacije koje su trenutno otvorene na ekranu su PWA.

Slažem se, nevjerojatno je zgodno! Ove aplikacije nije potrebno instalirati, nekoliko klikova mišem i sve postavke, cijelo radno okruženje vam je već dostupno. I nije važno na kojem računalu radite – na stolnom ili prijenosnom računalu. U kakvom je stanju rad napušten, u istom će stanju biti 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 web stranica, odnosno potpuna upotreba Web Stacka:

• Korisničko sučelje aplikacije - HTML/CSS preko HTTPS-a (obavezno!)
• Korisnička interakcija (interaktivna) - AJAX (preferiramo REST API interakciju)
• Upozorenja, prisilna sinkronizacija podataka - Push API
• Predmemorija podataka za izvanmrežni rad - Service Workers i Cache API (više detalja u nastavku)

Evo malog vodiča o tome kako napraviti svoju prvu aplikaciju od nule, dostupnog na Google Codelabs.

PWA manifest

SW je taj koji implementira politiku predmemorije aplikacije kako bi aplikacija radila u izvanmrežnom načinu rada. Jasno je da će za svaku aplikaciju biti drugačije, ali najčešće programeri koriste Offile First politiku. Ima jedan prekrasan članak (također star! PWA se nisu rodili ni danas ni jučer! A niste znali :)), koji dobro objašnjava zašto. Svakako odvojite vrijeme i proučite ga:
https://alistapart.com/article/offline-first

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

Nemojte o tome razmišljati kao o cjelovitom rješenju web stranice, ali to je sjajna platforma za eksperimentiranje i razbijanje! Možda ću kasnije pisati o našim neravninama i brojnim zamkama na koje smo zagazili tijekom prvih implementacija PWA na web stranice. Ako vas zanima ova tema - napišite pitanja u komentarima.

Implementacija PWA na WordPress web-mjesta

Čudno, ali unatoč činjenici da Progressive Web Apps postoje već dosta dugo (a sama ideja je već stara više od godinu dana!), programeri ne govore puno o njima. I nema toliko gotovih rješenja za najčešći CMS na svijetu. Ali postoji. Evo nekoliko dodataka koji vam omogućuju da ugradite PWA značajke u svoje WordPress stranice:

• Super Progressive Web Apps je prilično jednostavan, ali vrlo uspješan dodatak.
• Progresivne web aplikacije s PWAThemes.com složenije su, ali i fleksibilnije rješenje koje omogućuje, između ostalog, izradu zasebnih tema (izgleda) za PWA prikaz.

Instaliranje 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 sam dodatak Super PWA i postavio početne postavke (nema ih puno):

Izbrisao je predmemoriju web-mjesta i pokušao se prijaviti s mobilnog uređaja:

Ovdje je banner za instalaciju aplikacije na dnu ekrana

Aplikacija se instalira...

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

Pokušajmo ga sada staviti na radnu površinu. Da biste to učinili, odaberite ovu stavku u pregledniku:

Spreman! Aplikacija se pojavila na radnoj površini!

Kratki zaključci

Dakle, kao što vidimo, progresivne web aplikacije zapravo ujedinjuju stranice i aplikacije, brišući granice između njih.

Koristeći PWA pristup, možemo stvoriti prikladnu 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 sami pažljivo osmisliti i razviti.

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 preglednici, ali je prevalencija PWA tehnologija, unatoč njihovim očitim "plusima", još uvijek vrlo nisko.

Googleovi stručnjaci (uključujući i Habré) pišu vrlo informativno i kompetentno o PWA-u, ali su njihove preporuke korisnije za one koji su već upoznati s tom temom. Svrha ovog članka je pokazati 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 točna definicija PWA aplikacije. Nemoguće je jasno reći je li ovo PWA stranica ili ne. Riječ je o proširenoj ljestvici na kojoj se može locirati “početna stranica” učenice Petye, koja je dodala manifest web aplikacije koja stvara ikonu stranice na početnom zaslonu mobilnog telefona; a izvana se ne razlikuje od obične stranice s vijestima, samo čiji korisnici mogu reći da je iznenađujuće brza i praktična, a sve zato što negdje unutra kuca vrelo srce uslužnog radnika "a".

Relativnost PWA leži u samom nazivu - "progresivni". Progresivno u odnosu na što i u kojoj mjeri? Ali ova relativnost je zapravo vrlo dobra, jer možete naučiti PWA tehnologije i primjenjivati ​​ih u svojim trenutnim projektima postupno, bez globalnog remodeliranja i refaktoriranja.

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

PWA arhitektura

PWA je web aplikacija stvorena korištenjem određenih tehnologija za postizanje zadanih ciljeva.

Ciljni pokazatelji dešifriraju se na sljedeći način:

Pouzdanost(Pouzdan) - aplikacija se učitava i prikazuje odmah, bez obzira na status i kvalitetu mrežne veze.
Brzina(Brzo) - mrežna komunikacija je brza, korisničko sučelje je glatko i brzo reagira.
atraktivnost(Zabavno) - čini iskustvo rada s aplikacijom ugodnim i ugodnim za korisnika, potičući ga da ga želi iskusiti opet, i opet, i opet...

S Googleove točke gledišta, to je ono što sada odvaja izgled i dojam (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 (web-lokacija/aplikacija mora biti brza za učitavanje, raditi na slaboj vezi, a ne “lag”, raditi izvan mreže ako je potrebno) . Koliko će programer napredovati ovim putem ovisi samo o njemu.

PWA i izvorne aplikacije

Činjenica da su PWA izgledom slični izvornim aplikacijama prije je kozmetička odluka (iako je za korisnika važna s psihološkog stajališta). Ali činjenica da su interno slični (svi glavni resursi aplikacije mogu se pohraniti na klijenta, samo će se promjenjivi sadržaj prenositi preko mreže) veliko je postignuće.

Netko bi to čak mogao nazvati skrivenom revolucijom. Zapravo, preglednik se koristi kao svojevrsni virtualni stroj koji pohranjuje i pokreće PWA aplikaciju u sebi. Baš kao što je Android virtualni stroj za android aplikacije, preglednik postaje virtualni stroj za PWA. Baš kao što izvorna aplikacija pristupa svojim resursima putem datotečnog sustava, PWA također pristupa svojim resursima - doduše putem HTTP-a, ali pohranjenih lokalno.

I jednom, sve radi isto na svim glavnim preglednicima i na svim glavnim platformama.

Google napada iOS

Postoje mobilne aplikacije koje moraju biti izvorne (zahtijeva performanse, pristup resursima sustava itd.), ali postoje aplikacije koje su u svojoj funkcionalnosti u potpunosti implementirane kao PWA. Za njih sada:

Nema potrebe pisati različite verzije za Android i iOS (i Windows)
- Nema potrebe za registracijom u Google Play i App Storeu i plaćanjem
- Otvoren izravan pristup radnoj površini

Tržište mobilnih aplikacija do sada je bilo zatvoreno za entuzijaste koji mogu napisati koristan program, ali ne mogu/ne žele platiti njegov hosting. I ne žele se petljati s birokracijom Googlea i Applea kako bi pregledali aplikaciju, nakon čega se s čežnjom sjećaju Microsoftovih monopolskih vremena.

Sada su te barijere srušene. I Google ih je razbio. S obzirom da je upravo ona perjanica internetskih tehnologija, takav je ulazak na teritorij iOS-a najvjerojatnije dobro promišljen i proračunat. Ostaje čekati bum PWA.

Naravno, postoje razlike između PWA i nativnih aplikacija – uglavnom u pravima pristupa resursima sustava, ali rad u tom smjeru ide čak i na području čistog HTML5, a za PWA dodatne privilegije neće biti problem.

APK u odnosu na PWA

Iz osobnog iskustva možemo se prisjetiti kako je nakon prelaska jedne stranice s vijestima na rad sa Service Workerom odlučeno napustiti Android aplikaciju, napravljenu prema funkcionalnosti stranice. I ne toliko zato što je njegova podrška oduzimala ljudske resurse, koliko zato što je PWA verzija, začudo, bila brža, ljepša i praktičnija za korištenje od java aplikacije.

Tehnologija

Pogledajmo nakratko glavne pokretače PWA.

Servisni radnik

Srce PWA je serviser. Ovo je proxy sloj između frontenda i backenda, koji se nalazi u pregledniku. Svi zahtjevi preglednika prolaze kroz njega. Ova podjela na dva nezavisna sloja omogućila je da se prijelaz obične web stranice na PWA učini što jednostavnijim.

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

Možete, na primjer, prihvatiti zahtjev iz preglednika, provjeriti stanje mreže, uzeti podatke iz pohrane, izvršiti operacije s njima i vratiti neki rezultat natrag pregledniku – koji će misliti da je odgovor došao s poslužitelja. Ili neće biti - kako programer želi, on će to učiniti. Dva sloja preglednika (client frontend i Service Worker) omogućuju vam pisanje punopravnih aplikacija.

Istodobno, za većinu web-mjesta, funkcija predmemoriranja Service Worker-a "a bit će dovoljna da se pretvori u PWA.

PWA ne ovisi ni o kakvim okvirima, to je čisti javascript, iako čak i Googleovi 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 stajališta programera, Service Worker je javascript datoteka koja je uključena u html kod stranice. U njemu programer definira logiku za rad sa zahtjevima koji dolaze s frontenda i druge funkcionalnosti.

HTTPS

PWA zahtijeva da se svi resursi web mjesta prenesu putem HTTPS-a. SSL certifikat možete dobiti besplatno, neki domaćini to rade umjesto vas. Ali važno je da web-mjesto nema poveznice na nesigurne resurse - neki preglednici jednostavno neće prikazati web-mjesto u ovom slučaju.

Glavni problem s kojim se susreću u takvim slučajevima su slike. Često urednici ili komentatori u materijal stavljaju linkove na slike s interneta, ponekad automatski dođu tamo (u materijal). Slike morate spremiti ili sebi ili na uslugu s pristupom putem HTTPS-a.

Aplikacijska ljuska

Shell aplikacije samo je GUI kostur, predložak. Na primjer, uzmimo prosječnu stranicu sa zaglavljem, dva stupca i više. Grubo rečeno, izrezali smo sadržaj trenutne stranice i sve dinamičke informacije s nje, preostala statika je ljuska aplikacije.

Zaključak 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 ("učitavači" na mjestu, itd.)

Ova arhitektura web-mjesta - učitavanje sadržaja i drugih dinamičkih informacija putem ajax poziva - može se unaprijed zamisliti i implementirati na web-mjestu, tada će prijelaz na PWA biti prilično jednostavan.

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

manifest web aplikacije

JSON datoteku koja deklarativno definira naziv aplikacije za preglednik, ikonu, kako će PWA izgledati (cijeli zaslon, samostalan, itd.) i neke druge parametre. Omogućuje vam da "instalirate" PWA kao samostalnu aplikaciju na početnom zaslonu vašeg pametnog telefona.

Push obavijesti

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

Do sada je ovo najpopularnija i najzloupotrijebljenija PWA tehnologija - u posljednjih nekoliko mjeseci porastao je broj web-mjesta na kojima prvi put potražite gumb "Blokiraj" mišem na ponudi za primanje najnovijih vijesti, kao npr. osjećaj, višestruko, a sama želja da nametnete vlastiti Push slična je Spamu.

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

12.04.2017

Ovo je jedan od najtoplijih trendova u web razvoju, sve više ljudi želi znati za ovaj koncept. U ovom članku pokušat ću objasniti tehnologiju PWA (progressive web application) na način koji je razumljiv ne samo IT stručnjacima, već i onima koji su zainteresirani za temu novih trendova u web industriji.

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

ŠtoistitakavProgresivne web aplikacije

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

Kako preglednik može otvoriti web stranicu bez pristupa internetu, pitate se? Vjerovali ili ne, vaš preglednik sada ima mnoge cool značajke koje ne biste očekivali prije samo nekoliko godina.

Web-mjesta poput whatwebcando.today mogu raščlaniti API vašeg preglednika i pokazati koje značajke koje su izvorno dostupne na mobilnim uređajima također podržava preglednik. Probajte i bit ćete iznenađeni. Verzija Chromea (57) u mom primjeru podržava 27 od 36 značajki.

Recimo da moj preglednik podržava sve ove značajke - super. Ali imam toliko izvornih aplikacija na svom pametnom telefonu koje koristim svaki dan, ne mogu jednostavno sve to napustiti i prebaciti se na PWA. Ali možda smo tu u zabludi.

Studija koju je 2015. proveo marketingland.com pokazala je nevjerojatnu statistiku – korisnici mobilnih uređaja 80% svog vremena provode na svojim uređajima koristeći samo tri prioritetne izvorne aplikacije.

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

Dakle, postoji velika šansa da se mnoge izvorne aplikacije već dugo ne koriste. Morate proći proceduru preuzimanja, a zatim izbrisati aplikacije koje nisu prošle vaš crash test ili su vam s vremenom postale nevažne. Nekoliko mobilnih aplikacija ostaje prioritet za većinu nas, kao što su Facebook, Instagram, mail aplikacija ili druge.

Broj preuzetih izvornih aplikacija iz godine u godinu pada. Posljednjih godina pao je za 20% i ta brojka nastavlja rasti. U 2016. broj preuzetih aplikacija bio je manji od broja izbrisanih.

Prosječan broj instaliranih izvornih aplikacija mjesečno

Još jedan nedostatak mobilnih aplikacija je da se te aplikacije moraju pretraživati. Bilo da se radi o App Storeu ili Google Playu, da biste preuzeli aplikaciju iz trgovine, prvo je morate tamo pronaći (što znači da morate točno znati što tražite, inače ćete morati isprobati desetke aplikacije kako biste pronašli onu koja vam odgovara). Kliknite na "Preuzmi", prihvatite uvjete, pričekajte da se aplikacija preuzme i zatim je instalirajte... Dok sve bude gotovo, lako ćete zaboraviti što ste tražili i zašto.

Ljepota progresivne web aplikacije je u tome što ju je vrlo lako otkriti, baš kao i običnu web stranicu - proguglate je, kliknete na poveznicu da biste je otvorili i to je to, imate aplikaciju na svom uređaju, spremnu za prikaz. U tom slučaju, sam preglednik će od vas tražiti da dodate ikonu na radnu površinu. Ako se slažete s ovim, vidjet ćete ikonu svoje aplikacije na početnom zaslonu telefona, kako mirno sjedi pored izvornih aplikacija. Sada možete pokrenuti PWA baš kao mobilnu aplikaciju - s lijepim početnim zaslonom, prepoznavanjem orijentacije itd.

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

Prosječna težina progresivnih web aplikacija je samo 2 MB.

Koje su prednosti progresivnih web aplikacija

• Web programeri koji se nisu bojali biti prvi koji će prihvatiti nove tehnologije tvrde da je PWA lako razviti u usporedbi s modernim stranicama.
• Progresivne web aplikacije postaju nezamjenjive u području SEO-a. Google gura PWA znatno više u SERP-ovima. Također, sve progresivne web aplikacije rade na HTTPS protokolu, odnosno Google također pozitivno reagira na to i nagrađuje stranicu povoljnijim rangiranjem stranice.
• Cross-platform Progressive Web Apps daje nam mogućnost izrade jedne web aplikacije koja će raditi na apsolutno svim uređajima na kojima postoji preglednik.
• Mogućnost da nastavite koristiti svoju aplikaciju kada vam internetska veza ne uspije i povećana brzina učitavanja s PWA spriječit će vas da izgubite potencijalne konverzije i povećate stope napuštanja početne stranice.

tako, Progresivna web aplikacija jeweb stranica, što je:

• može se "instalirati" na pametni telefon
• izgleda kao izvorna aplikacija
• radi izvan mreže
• šalje push obavijesti

Istodobno, njegove prednosti u odnosu na izvorne aplikacije:

• cross-platforma
• indeksirano
• mala težina
• instalaciju predlaže preglednik
• trenutna instalacija
• nema potrebe za ažuriranjem, uvijek pružajte svjež sadržaj i sučelje
• SEO poboljšanja

Slažete se, takve prednosti Progressive Web Apps čine 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 zadovoljiti kako bi ispravno funkcionirala kao progresivna aplikacija. To je sposobnost web aplikacija da kombiniraju mogućnosti izvornih mobilnih aplikacija i zadrže prednosti stranice.

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

Predmemorija ljuske aplikacije

Ovo je minimalni skup HTML-a, CSS-a i JavaScript-a potrebnih za prikaz 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 korištene na stranici - i većinu njih . ostati isti bez obzira koliko puta otvorite stranicu. Pa zašto ne keširati sve?

Kada se PWA prvi put pokrene, sprema sve statičke resurse i ljusku aplikacije. Sljedeći put kada se aplikacija pokrene, povući će statičke informacije aplikacije izravno iz predmemorije, što uvelike povećava vrijeme potrebno korisniku da vidi te dragocjene piksele na zaslonu. Ako ste ikada pokušali otvoriti web stranicu putem 3G veze, razumjet ćete na što mislim.

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

Keširanje odgovora

Ovo je vjerojatno najmoćnija stvar za koju su PWA sposobni. Mogu keširati ne samo statičke komponente aplikacijske ljuske, već i cijele odgovore iz GET zahtjeva.

Recimo da ste jučer posjetili PWA za vijesti kako biste pročitali vijesti. Ako ga otvorite danas, odmah ćete dobiti jučerašnji feed vijesti dok aplikacija preuzima novi sadržaj u pozadini, dinamički ga ubrizgavajući u feed koji već gledate. Ako ne možete dobiti svježi sadržaj, na primjer jer ste offline, ostat ćete s jučerašnjim feedom, ali barem nećete dobiti nikakve pogreške.

Postoji nekoliko algoritama predmemorije koji se mogu implementirati, izbor ovisi o namjeni aplikacije.

Algoritmi za predmemoriju

Predmemorija sa zamjenom na mrežu	Mreža s zamjenom za predmemoriju	Cache i mrežna utrka
"Predmemorija s rezervom za mrežu" Koristite ako izrađujete samostalnu prvu aplikaciju. Ako je odgovor već u predmemoriji, bit će proslijeđen korisniku i online zahtjev nikada neće biti dovršen. Ako odgovor još nije spremljen u predmemoriju, aplikacija će ga pokušati preuzeti na mreži, a zatim ga predmemorirati. Ovaj pristup treba koristiti za sadržaj koji se mijenja vrlo rijetko ili se uopće ne mijenja.	"Mreža sa zamjenom za predmemoriju" Ovo je pristup u kojem korisnici na mreži uvijek dobivaju ažurnu internetsku verziju, a izvanmrežni korisnici dobivaju verziju u predmemoriji. Koristite ga za resurse koji se često ažuriraju.	"Utrka predmemorije i mreže" Ovo je kada tražite odgovor u predmemoriji dok istovremeno tražite online sadržaj. Prvo prikazujete korisnikov odgovor u predmemoriji, a zatim ga zamjenjujete novim sadržajem čim se pojavi ili dodajete novi sadržaj na vrh predmemoriranih stranica kao što su Facebook i Twitter.

ManifestPWA

Bez obzira na to koji se predložak koristi, uvijek postoji slučaj u kojem se odgovor ne sprema u predmemoriju i ne može se dohvatiti na mreži. U ovom slučaju, poslužuje se statična HTML stranica (koja je također u predmemoriji kao dio ljuske aplikacije) koja će reći nešto graciozno kako bi umirila korisnika, kao što je "Oprosti stari, predmemorija ti je prazna i internet ne radi." Ovo je način da se korisniku da do znanja da je nešto pošlo po zlu i da trenutačno ne postoji način posluživanja tog određenog sadržaja. To će učiniti aplikaciju sigurnom od kvarova i nastaviti raditi čak i tijekom apokalipse.

Izvanmrežna podrška iznimno je važna, ali kako bi uspješno zamijenio nativnu aplikaciju, PWA mora izgledati i ponašati se kao nativna aplikacija. To se postiže pomoću datoteke manifest.json, koja sadrži JSON formatirana svojstva aplikacije kao što su naziv, URL početne stranice, ikone za različite rezolucije, boje početnog zaslona, ​​orijentacija uređaja i tako dalje.

( "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": "image/png" ), (…), ( "src": "slike/ikone/ikona-256x256.png", "sizes": "256x256" , "type": "image/png" )], "stert_url": "/index.html" , "display": samostalan" ,//preglednik? minimalno korisničko sučelje, cijeli zaslon"background_color": "#3E4EB8 "prikaz": "2F3BA2 )

Ako aplikaciju otvorite dvaput na svom mobilnom uređaju, najmanje 5 minuta između posjeta, od vas će se tražiti da je instalirate na svoj uređaj, kao što smo već pokrili gore (naravno, pod pretpostavkom da je manifest na mjestu).

Servisni radnik

Svo predmemoriranje koje je rečeno obavlja mali pomoćnik preglednika koji se zove "Service Worker" koji u biti nije ništa drugo do JavaScript datoteka koja se nalazi u aplikaciji, ali se izvodi u zasebnom procesu, što znači da se neće dovršiti. zatvaranje aplikacije u pregledniku (ili čak i samog preglednika). Nakon registracije na početnoj stranici aplikacije, Service Worker sprema statičke informacije u ljusku aplikacije i počinje s obradom zahtjeva koje je aplikacija poslala, predmemoriranjem i posluživanjem odgovora na temelju logike programirane u njoj.

Progresivne web aplikacije pretvaraju web-mjesta i web-usluge u ono što se čini kao samostalne aplikacije. Ovaj pristup ima nekoliko prednosti, posebice korisnici mogu pokretati aplikacije izravno iz operacijskog sustava, pa čak i koristiti ih bez mrežne veze.

Izvanmrežna podrška uvelike ovisi o specifičnoj aplikaciji i funkcionalnosti koju pruža. Aplikacija Notepad trebala bi dobro raditi izvan mreže, dok usluge Spotify ili Twitter možda neće raditi ili podržavati samo ograničen skup funkcija jer je za preuzimanje podataka na uređaj korisnika potrebna aktivna internetska veza.

PWA također mogu koristiti funkcionalnost koju pruža operativni sustav. Na primjer, u sustavu Windows 10 aplikacije mogu koristiti centar za obavijesti operacijskog sustava ili poštivati ​​određena pravila i pravila operacijskog sustava.

Napomena: Korisnici Linuxa i Mac OS X-a moraju omogućiti pravilo preglednika chrome://flags/#enable-desktop-pwas postavljanjem na Omogućeno. Google planira dodati PWA podršku prema zadanim postavkama za ove sustave samo u Chrome 72.

Instalirajte PWA u Chrome

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

Korisnici Chromea trebali bi posjetiti stranicu PWA, kao što je stranica aplikacije Notepad ">Bilježnica , i odabrati iz glavnog izbornika Instaliranje aplikacije "Notepad"... za ugradnju.

Chrome zatim učitava aplikaciju u svoje izvorno sučelje i zatim je dodaje na popis instaliranih aplikacija na operativnom sustavu. Korisnici sustava Windows 10 moći će pronaći aplikaciju u početnom izborniku i pokrenuti je u bilo kojem trenutku.

Budući da je aplikacija navedena u izborniku Start, možete komunicirati s aplikacijom kao i sa bilo kojom drugom instaliranom aplikacijom. Desnom tipkom miša prikvačite aplikaciju na izbornik Start ili programsku traku, deinstalirajte aplikaciju, otvorite njezinu lokaciju ili je pokrenite kao administrator.

Chrome također navodi instalirane progresivne web aplikacije i korisnicima daje mogućnosti upravljanja. Google je donio odluku da ih integrira s aplikacijama u pregledniku. Dakle, da biste vidjeli cijeli popis instaliranih aplikacija, posjetite stranicu chrome://apps/.

Možete otvoriti bilo koju instaliranu aplikaciju klikom ili dodirom na dodirnom zaslonu. Nekoliko korisnih opcija dostupno je u izborniku desnom tipkom miša: uklonite PWA iz Chromea, stvorite prečac ili onemogućite opciju "Otvori u novom prozoru" da biste otvorili pokretač u novoj kartici preglednika.

Chrome i PWA

PWA podrška radi odmah nakon instaliranja preglednika i implementirana je za maksimalnu udobnost korisnika. Trenutačno najveće ograničenje je to što Google ne održava Progressive Web App Store ili repozitorij.

Tvrtka bi mogla dodati progresivne aplikacije u Chrome web trgovinu, ali takvi planovi trenutno nisu najavljeni.

Korisnici Chromea koji žele koristiti PWA moraju svaki put posjetiti točnu adresu aplikacije kako bi je instalirali u glavni izbornik Chromea. Takve aplikacije možete tražiti ručno ili možete koristiti popise trećih strana, na primjer, popis na "> Outweb.

Pronašli ste pogrešku? Pritisnite Ctrl+Enter

Moderna web-mjesta s progresivnim web aplikacijama (PWA) mogu pretvoriti stranicu u mobilnu aplikaciju. U trenutku posjete takvoj stranici, s mobilnog uređaja, preglednik nudi skočnu poruku " DODAJ NA POČETNI ZASLON” i ako se korisnik slaže, tada se stranica instalira kao aplikacija u pozadini. Od sada stranica na internetu ostaje stranica, a na mobilnom uređaju mobilna aplikacija.

Ne, ne griješim. Sada stranica postaje mobilna aplikacija sa svim svojim značajkama i prednostima. Nije li jako cool! Imajte na umu ovu točku, ne moramo ići u posebnu App Store ili Google Play trgovinu mobilnih aplikacija, radimo izravnu instalaciju - što je puno bolje.

Ima li ova aplikacija ograničenja? Apsolutno ne! Ograničenja mogu biti samo u funkcionalnosti, ali to ne ovisi o samoj aplikaciji, već o funkcionalnosti koja je u nju ugrađena. Zatim ćemo se dotaknuti resursa za izradu i implementaciju progresivnih web aplikacija na web-mjesta.

Pažnja. Moderna web stranica s tehnologijom Progresivne web aplikacije učitava vrlo brzo. Radi s bilo kojom internetskom vezom, bilo da se radi o 4g širokopojasnoj ili slaboj 2g, ili uopće bez interneta, offline. Izvanmrežni rad stranice temelji se na informacijama preuzetim iz prediktivnih posjeta.

Kako funkcionira takva aplikacija? Aplikacija koju smo instalirali radi offline i ne treba joj preglednik. Kada ga pokrenete, vidite istu stranicu kao na internetu sa svim njezinim značajkama: čitajte vijesti, kupujte, ostavljajte komentare. Osim toga, možete ga koristiti izvan mreže sa slabom ili bez internetske veze. Na primjer, napišete poruku ili ispunite košaricu robom, a u tom trenutku je došlo do prekida s internetom, ne brinite, vaše će se radnje pohraniti izvan mreže, a kada se veza uspostavi, prenijet će se na mjesto. Zar nije super!

Ključne prednosti web-mjesta s progresivnim web aplikacijama

1. Progresivnost. Sa svakim novim ažuriranjem dobivamo nove tehnološke inovacije. Spojivši se jednom, ostajemo, da tako kažem, u razvoju novih tehnologija.
2. Prilagodljivost. Sposobnost prilagodbe različitim operativnim sustavima uređaja, njihovim zaslonima i mogućnostima.
3. Internet veza neovisna. Autonomni rad izvan mreže - izvan mreže.
4. Kao izvorna aplikacija. Native znači imati vlastitu softversku ljusku koja se brzo učitava.
5. Sef. Rad na sigurnom HTTPS protokolu.
6. Internet pretraživ. Progresivna web aplikacija je još uvijek stranica na internetu, pretraživa je, indeksirana.
7. push tehnologija. Mogućnost komunikacije između vlasnika i korisnika slanjem poruka (push obavijesti) na uređaj.
8. Jednostavna instalacija i distribucija. Instalacija jednim klikom, zaobilazeći App Store ili Google Play trgovine aplikacijama. Možete podijeliti putem veze.

Zašto je potrebno implementirati PWA na modernim stranicama?

Nije tajna da se 2014. godine dogodio značajan događaj koji je promijenio lice interneta. Podsjetiti. Tada je broj posjetitelja interneta s mobilnih uređaja premašio publiku posjetitelja s stolnih računala. Od tada sve češće čujemo, mobilna stranica, adaptivni dizajn. Pogledajte grafikon rasta korisnika mobilnog interneta.

Tražilice su odmah odgovorile na nove zahtjeve za web stranice. Postalo je obvezno imati ili mobilnu verziju stranice ili adaptivnu verziju, inače bi stranica u najmanju ruku izgubila mobilne posjetitelje.

Više od polovice svjetske populacije trenutno je online. Broj korisnika interneta diljem svijeta svake se godine povećava za više od 20 posto.

• Dvije trećine svjetske populacije koristi pametni telefon.
• Broj jedinstvenih mobilnih posjetitelja u svijetu porastao je za 4% u godinu dana.
• Pametni telefoni su uređaji izbora za pristup internetu, čineći najveći udio korisnika weba zajedno.

Kako početi koristiti PWA na modernim web stranicama

Moderni razvoj web stranica uz WordPress

Progresivne web aplikacije (PWA) je nova tehnologija koja kombinira najbolje mobilne stranice i najbolje mobilne aplikacije za stvaranje vrhunskog mobilnog web iskustva. Instaliraju se na telefon kao obična aplikacija (web aplikacija) i može im se pristupiti s početnog zaslona.

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

Nakon što se SuperPWA instalira, korisnici koji pregledavaju vaše web-mjesto s mobilnog uređaja vidjet će obavijest "Dodaj na početni zaslon" (pri dnu zaslona) i moći će "Instalirati svoju stranicu" na početnom zaslonu svog uređaja. Svaka stranica koju posjetite pohranjena je lokalno na tom uređaju i bit će čitljiva čak i kada ste izvan mreže!

SuperPWA se lako postavlja, potrebno je manje od minute za instaliranje progresivne web aplikacije. SuperPWA vrši čistu deinstalaciju, briše svaki unos i datoteku baze podataka koju stvori. Zapravo, nijedna od zadanih postavki nije pohranjena u bazi podataka dok ih ručno ne spremite prvi put. Probaj.

Što je u kutiji

Evo trenutačnih značajki Super Progressive Web Apps:

• Postavljanje ikone za vašu progresivnu web aplikaciju.
• Postavite boju pozadine za početni zaslon svoje progresivne web aplikacije.
• Vaša će web stranica prikazati obavijest "Dodaj na početni zaslon" kada joj se pristupi u pregledniku.
• Agresivno predmemoriranje stranica pomoću CacheStorage API-ja.
• Stranice koje su jednom bile spremljene u predmemoriju poslužuju se čak i ako je korisnik izvan mreže.
• Postavite prilagođenu izvanmrežnu stranicu: ako je želite poslužiti korisniku, a nije u predmemoriji i bit će dostupna čak i kada je korisnik izvan mreže.
• Podrška za tematsku boju.
• Sada možete urediti naziv aplikacije i kratki opis.
• Postavite početnu stranicu vašeg PWA.
• Postavite Accelerated Mobile Pages (AMP) kao početnu stranicu.
• Podržani dodaci: AMP za WordPress, AMP za WP, Better AMP, AMP Supremacy, WP AMP.
• Dodana podrška za visokokvalitetni početni zaslon.
• Sada možete postaviti ikonu 512px × 512px za početni zaslon Progressive Web App.
• Super Progressive Web Apps sada poštuje ažuriranja sadržaja i ažurira predmemoriju kada se web stranica ažurira.
• Poboljšano rukovanje ažuriranjima radne površine u pregledniku.
• Sada možete postaviti zadanu orijentaciju vašeg PWA. Odaberite Bilo (Orijentacija uređaja), Portret ili Pejzaž.
• Sada možete postaviti svojstvo theme_color u manifestu.
• OneSignal integracija za push obavijesti.
• Kompatibilan s višekorisničkom mrežom WordPress.

Kako pretvoriti svoju WordPress stranicu u progresivnu web aplikaciju

Instalacija u WordPress u pet koraka:

1. Prijava WordPress Admin
2. Dodaci
3. Dodaj novi
4. U traci za pretraživanje upišite: "PWA"
5. Kliknite "Instaliraj", a zatim "Aktiviraj"

Za ručnu instalaciju:

1. Prenesite mapu Super Progressive Web Apps u direktorij /wp-content/plugins/ na vašem poslužitelju
2. Idite na WordPress Admin > Dodaci
3. Aktivirajte dodatak Super Progressive Web Apps s popisa.

Vaša progresivna web aplikacija trebala bi biti spremna za korištenje sa zadanim postavkama nakon aktivacije. Također ga možete dodatno prilagoditi i učiniti ga uistinu svojim.