Ievads progresīvās tīmekļa lietojumprogrammās

Lielākā daļa izstrādātāju ir dzirdējuši kaut ko vairāk Progressive Web Apps. Tos plaši atbalsta tādi tehnoloģiju uzņēmumi kā Google, un tie ātri kļūst par norma daudzu ierīču tīmekļa lietojumprogrammām.

Bet, kas tieši tas ir atšķirība starp tipisku un a progresīva tīmekļa lietotne?

Izstrādātājiem, tā ir visa atšķirības pasaule. Progresīvās tīmekļa lietojumprogrammas izmanto mūsdienu tīmekļa API izveidot vietējo lietotņu pieredzi pārlūkprogrammā. Tas nozīmē, ka izstrādātāji var veidot strauji iekraujošas dinamiskas lietotnes, neizmantojot hibrīdus ietvarus.

Šajā rokasgrāmatā es aptveršu progresīvo tīmekļa lietotņu pamati, dažas galvenās iezīmes un kā jūs varat sākt veidot savu.

Kas ir progresīvās tīmekļa lietojumprogrammas?

Progresīvās tīmekļa lietojumprogrammas (vai PWA) izmantot tīmekļa pārlūkprogrammas API izveidot vietējo lietotņu pieredzi jebkurā pārlūkprogrammā jebkurā ierīcē.

Galu galā Progressive Web Apps ietver a dažas tehnoloģijas ka izstrādātāji var izmantot, lai izveidotu spēcīgas vietējās lietojumprogrammas. Daudzi nāk no Web API piemēram, Pakalpojumu darbinieku API vai Push API.

Tur ir dažas prasības lai izsauktu kaut ko PWA, bet tie ir svarīgākie:

• Ir pilnīgi reaģē uz mobilo.
• Ievēro pakāpeniska uzlabošana.
• Spējīgs instalējiet lokāli viedtālruņiem un planšetdatoriem.
• Darbojas bezsaistē bez interneta, izmantojot pakalpojumu darbiniekus.
• Atdala saturu no funkcionalitātes izmantojot lietotnes apvalku.
• Built uz HTTPS lielāku drošību.
• Atklājams Google meklēšanā.
• Ir dinamiskas lietotnēm līdzīgas lapas bet katrs vēl ir savs URL.

Ja jūs esat domāt par nelielas tīmekļa lietotnes izveidi jūs varat mēģināt izveidot progresīvu tīmekļa lietotni. Tas nāk ar mazliet mācīšanās līknes, bet jums ir tik daudz lielāku kontroli pār lietotāju pieredzi rezultātā.

Iegremdēsimies progresīvo tīmekļa lietotņu pamatos un uzziniet, kas padara tos ērti.

Servisa darbinieki

Katra progresīva tīmekļa lietotne nepieciešama apkalpošanas darbinieki. Šie ir kā satiksmes virsnieki kas koordinē, kur notiek satiksme, kur dati nāk un kā tas notiek visi tiek organizēti un saglabāti kešatmiņā.

Vienkārši runājot, pakalpojumu darbinieks darbojas kā JavaScript fails un darbojas jūsu tīmekļa lietotnes fonā. Ikreiz, kad lietotājs veic notikumu, tā aicina pakalpojumu darbinieku skripts vai nu vilkt datus, saglabāt datus, vai abus!

Izmantojot Pakalpojumu darbinieku API ir būtiski lai palaistu bezsaistē atbalstītu PWA. Tādā veidā jūs pārsūta datus starp skatiem un kā jūs varat pieprasīt datus no vietējās datu bāzes. Bet tas galvenokārt ir uzlabotas lietas, ko jūs mācāt, strādājot ar PWA projektu.

Palieciet uz Pakalpojumu darbinieku pavārgrāmatu par pamata fragmenti un dzīvot demonstrācijas. Tas ir fantastisks veids, kā mācīties, pētot, ko citi ir darījuši to klonējot savās lietotnēs.

Ja jūs cerat izveidot progresīvu tīmekļa lietotni sākt ar pakalpojumu darbinieku API. Vienkārši ielieciet to un izveidojiet vienkāršu demo lokāli. Tas būs pamats turpmākam darbam veidot pielāgotas lietojumprogrammas funkcijas un lapas ka visi darbojas caur pakalpojumu darbiniekiem.

Par iesācēju ceļveži un detalizēti koda fragmenti, Es īpaši ieteiktu šos resursus:

• Darba sākšana ar pakalpojumu sniedzējiem
• Darba sākšana ar pakalpojumu darbiniekiem
• Pakalpojumu darbinieka paraugs: pielāgots bezsaistes lapas paraugs

Programmas apvalks

Lielākā daļa vietējo lietotņu sekojiet lietotnes apvalka arhitektūrai kur dati un lietotnes kods ir pilnīgi atšķiras no UI. Programmas apvalks var būt vietējā līmenī tāpēc katra lapa ielādējas neticami ātri.

Tas ir tāds pats “dzimtā lietotne” sajūta, kur saskarne vienmēr ir redzama bet saturs / funkcionalitāte ielādējas atšķirīgi katru reizi. Pārbaudiet šo lapu Google izstrādātāju vietnē, lai uzzinātu vairāk par lietotnes apvalka modelis.

Vairumam lietotņu ir ļoti vienkāršs lietotnes apvalks un jums vajadzētu veidot savu arhitektūru ar vienkāršība.

Parasti lietotnes apvalkā ir tās galvenie elementi:

• Top navigācijas joslas saites.
• Poga Atsvaidzināt (pēc izvēles).
• Lapas fona konteiners.

Šeit jūs varat atrast jauku gadījumu izpēti Google I / O progresīvās tīmekļa lietotnes apvalka arhitektūra. Viņi arī piedāvā dažus padomus, kā veidot savu apvalka arhitektūru, glabāt to kešatmiņā un automātiski velkot katru lapu.

Domājiet par korpusa arhitektūru kā visi statiskie UI elementi jūs izmantosiet katrā lapā. Tiem vajadzētu būt atdalīta no pārējā koda un kešatmiņā, lai to varētu viegli izmantot atkārtoti. Pārbaudiet arī Google intro uz tēmu ar lielu kodu fragmenti, kas palīdzēs jums sākt darbu.

Tiešsaistes un bezsaistes atbalsts

Lielākā daļa vietējo lietotņu darbojas bez interneta. Progresīvās tīmekļa lietojumprogrammas ir paredzētas, lai ievērotu šo pašu rīcību.

Ar pakalpojumu darbinieku palīdzību jūs varat veidot vietējās kešatmiņas ar JSON kodu katrai lapai. Tādā veidā lietotāji var pārlūkojiet tīmekļa lietotni lokāli. Jūs varētu arī iekļaut manifesta failu lai definētu ikonas, slīdēšanas ekrānu un citus palaišanas iestatījumus.

Ja izmantojat Pakalpojumu darbinieka API, apmeklējiet Kešatmiņas API kurš ir daļa no tās pašas sistēmas. Tas parasti ir labākais veids, kā uzglabāt datus lokāli un piekļūt no pakalpojumu darbiniekiem vēlāk.

Jūs varat arī pārbaudīt jebkuru tīmekļa lietotni izmantojot Bāka, bezmaksas rīks, lai pārbaudītu funkciju atbilstību un atbalstu PWA tehnoloģijām.

PWA vienmēr pieprasīt bezsaistes atbalstu izmantojot pakalpojumu darbinieku API, lai viņi varētu darbojas zemas savienojamības valstīs. Bāka ir labākais veids, kā pārbaudīt bezsaistes atbalstu kopā ar daudzām citām funkcijām.

Dzīvi piemēri

Dzīvo PWA studēšana un to, kā viņi strādā, ir lielisks veids, kā mācīties. Tomēr Progressive Web App tirgus ir joprojām parādās, tik daudzi no labākajiem ir izkaisīti dažādos interneta stūros.

Bet, pateicoties PWA iežu galerija, Esmu kuratējis dažus pārsteidzošus piemērus, lai parādītu, ko PWA var patiešām darīt.

1. Valūtas konvertētājs

Tas ir diezgan vienkārši valūtas konvertors ņem valūtas kursu un aprēķina pašreizējo atšķirības starp tonnu valūtu visā pasaulē.

Jūs pamanīsiet, ka šī tīmekļa lietotne ir pilnībā reaģē, atbalsta pieskārienu, un automātiskie atjauninājumi bez lapas atsvaidzināšanas.

Šīs ir tikai dažas no iespējām, kuras jūs sagaidāt jebkurā tipiska Progressive Web App. Tas lietotni var saglabāt arī lokāli lai tālrunis darbotos bezsaistē, lai gan tas savienojas ar JSON failu, lai pārbaudītu pašreizējos valūtas maiņas kursus.

2. Angļu akcenti

Es vienkārši mīlu šo tīmekļa lietotni, jo tā ir gan unikāla, gan neticami labi izstrādāta. The Angļu akcentu karte curates video tiešsaistē kur cilvēki pārvadā akcentus no konkrētiem ASV un Lielbritānijas reģioniem.

Noklikšķinot uz jebkuras vietas kartē, varat klausīties, kā cilvēki izrunā dažus vārdus dažādās pasaules daļās. App ir zibens ātri un tas ir atvērts no GitHub lai ikviens varētu to pārbaudīt.

Iekšēji darbojas React / Redux ar Firebase un API savienojums ar Google Maps. Noteikti lielisks piemērs tam, ko iesācējiem ir diezgan vienkārši mācīties un mācīties.

3. Pokedex.org

Vēl viens diezgan vienkāršs PWA ir tas Pokedex lietotne izveidoja Nolan Lawson. Viņš arī brīvi publicēja šo kodu GitHub, tā mums ir vēl viens projekts ir vērts apmesties un mācīties.

Tā kā šie dati var palikt statiski, tas ir ar vietējā dzinēja palīdzību sauc PouchDB. Visi dati nāk no PokeAPI un pēc tam saglabā kā vienkāršu JavaScript. Tas nozīmē, ka varat saglabājiet to lokāli tālrunī tāpat kā patiesa dzimtā lietotne, un tā darbosies ar vai bez interneta piekļuves. Diezgan foršs, labi?

Viss ir darbojas ar JavaScript, tā ir apliecinājums tam, cik daudz jūs varat darīt ar frontend kodu. Tā izmanto daudz kešatmiņas pakalpojumu sniedzēja API, tā tas ir crazy ātri un super viegli izmantot.

4. Flipkart

Visbeidzot un pārsteidzoši, aplūkosim Flipkarta mājas lapa. Tas ir pilns e-komercijas veikals faktiski ir progresīva tīmekļa lietotne.

Tas ir pilnībā reaģē un ielādē lapas dinamiski. Lapas URL tiek pievienoti pārlūkprogrammai, lai jūs varētu kopēt / ielīmēt un koplietot tos kā tipisku tīmekļa vietni.

Tas ir viegli vissarežģītākā PWA, ko esmu redzējis. Es esmu pārsteigts, ka izstrādātāji varēja radīt tik nevainojamu pieredzi tīmeklī visiem lietotājiem, nemaz nerunājot atbalstot vietējo bezsaistes uzglabāšanu, arī.

Un, lai gan es nevarēju atrast repo par visu Flipkart avota kodu, ir Flipkart lapa GitHub ar mazāki koda fragmenti no viņu izstrādātāju komandas.

Mācīties vairāk

Progressive Web Apps ir neticami populārs un noteikti iegūs tvaiku jo vairāk izstrādātāju pāriet no vietējām / hibrīda lietotnēm.

Ir ikgadējs samits, ko sauc par Progresīvā tīmekļa lietotņu samita un viņi publicē videoklipus vietnē YouTube, kurus var skatīties bez maksas. Tas ir lielisks veids, kā uzņemt dažas zināšanas, nemaksājot par biļeti.

Bet, ja jūs meklējat sīkāku informāciju PWA kodēšanas ceļveži noteikti izlasiet šīs konsultācijas:

• Iesācēja ceļvedis progresīvām tīmekļa lietojumprogrammām
• Veidojiet savu pirmo progresīvo tīmekļa lietotni ar React
• Progresīvās tīmekļa lietotnes izveide ar polimēru