Ano ang Mga Application ng Single-Page at Progressive Web Apps?

Ang mga application na solong pahina (SPA) at mga Progressive web app (PWAs) ay nagbabago sa web. Pareho silang mga teknolohiyang nobela na magkamukha, ngunit hindi. Sa mukha, ang mga tao ay madalas na gumagamit ng mga ito palitan.

Hukayin natin ang mga pangunahing tampok at arkitektura ng bawat isa sa kanila upang higit na maunawaan ang mga ito.

Ano ang Mga Application ng Single-Page?

Ang mga SPA, tulad ng tunog nito, ay mga website na naglo-load ng nilalaman nang pabago-loob sa loob ng isang pahina. Sa kakanyahan, ang bawat anyo ng nilalaman at sangkap na kailangan mo upang makipag-ugnay sa mga umaabot sa isang pahina. Nangangahulugan iyon na hindi mo kailangang mag-load ng magkakahiwalay na Mga Modelong Bagay ng Dokumento (DOM) kapag nagna-navigate sa naturang website.

Sinabi nito, ang layunin ay panatilihin ang mga gumagamit sa parehong pahina sa pamamagitan ng paglo-load ng lahat ng kailangan nila upang magamit at makita nang sabay-sabay. Nagsasalin ito sa isang mas mahusay na karanasan ng gumagamit.

Ang interface ng gumagamit, sa kabilang banda, ay nakasalalay sa kung paano mo dinisenyo at ayusin ang iyong SPA. Napapailalim ito sa kung bakit maaari mong paganahin ang nabuong pahina sa mga pag-navigate. At hindi ito pipigilan na maging isang solong pahina, dahil ang nilalaman ay naglo-load pa rin nang isang beses.

Kaya, kapag nag-navigate ka sa isang SPA, nagba-browse ka ng naka-preload na nilalaman sa isang solong DOM at hindi bumibisita sa iba't ibang mga DOM na maaaring maling pinaniniwalaan mo.

Ang paghiwalay sa isang SPA sa magkakahiwalay na mga seksyon ng nilalaman ay karaniwang nagsasangkot sa pagbibigay sa bawat isa sa kanila ng isang URL gamit ang mga view ng JavaScript. Ang link ng data ina-link ng konektor ang mga seksyong iyon sa pangunahing DOM at pinapayagan kang ma-access ang mga ito nang hindi asynchronous.

Bagaman kagaya ng ibang mga teknolohiya Bilang at elm-spa paparating na, ang JavaScript pa rin ang pinakakaraniwang wika sa pagprograma para sa paggawa ng mga SPA.

Kaugnay: Mga Framework ng JavaScript Na Worth Learning

Gumagamit ang JavaScript ng isang async / naghihintay pagpapaandar na nagbibigay-daan sa iyo upang mai-load ang parehong mga dinamiko at static na nilalaman nang hindi sinasabay nang walang isang input na humahadlang sa output ng isa pang kahilingan. Kaya, nagpapatakbo ang mga SPA sa isang hindi nagba-block na input-output (I / O) system.

Sinabi nito, ang mga balangkas ng JavaScript tulad ng ReactJS, Vue.js, AngularJS, Ember.js, at Backbone.js ay sumusuporta sa mabilis na pag-unlad ng mga SPA. Upang makapagsimula, maaari kang dumaan sa pangkalahatang ideya ng nagsisimula sa Vue.js.

Dahil binibigyan nito ang bilis, karamihan sa mga apps ng enterprise ay nagpatibay ng ideya ng pagbabago ng kanilang mga website sa isang solong pahina. Ang Netflix, YouTube, PayPal, Facebook, Instagram, Twitter, at Pinterest ay pawang mga halimbawa ng SPA.

Ano ang Mga Progresibong Web Apps?

Ang PWA ay isang web application o software na gumagamit ng pamantayan at umuusbong na mga alituntunin sa web browser sa pagpapaandar nito. Ang mga PWA, hindi katulad ng mga SPA, ay ibinase ang kanilang arkitektura sa ilang hanay ng mga alituntunin na ginagawang masusukat, madaling ibagay ng gumagamit, napakabilis, mai-install, at katulad ng katutubong.

Ipinakilala noong 2015 ng Google, ang layunin ng isang PWA ay upang bumuo ng mga app na direkta at progresibong nakikipag-usap sa mga gumagamit nito. Nilalayon nitong panatilihing dumadaloy ang mga gumagamit sa app, kahit na may isang mahirap o walang umiiral na koneksyon sa network.

Palaging, ang isang PWA ay naghahatid ng lahat ng kailangan mo sa isang iglap. Hindi ito dumaan sa tipikal na paunang katangian ng paglo-load ng nilalaman ng isang SPA.

Dahil dito, nakikipag-ugnay ang isang gumagamit sa app na para bang katutubong ito. Bagaman ang pangunahing katangian ng PWAs ay mai-install, maaari mo pa ring ma-access ang mga ito sa mabilisang pamamagitan ng iyong web browser nang walang anumang pag-install. Sinabi na, tulad ng anumang ibang website, ang isang PWA ay dapat ding magkaroon ng isang URL.

Kaugnay: Ano ang Mga Progresibong Web Apps at Paano Mo I-install ang Isa?

Ang mga progresibong web app ay natatangi sa mayroon silang mga tagatulong sa background na naghahatid ng nilalaman sa loob ng isang kisap-mata. Kaya, bago pa man makarating sa web app, ang nilalaman at mga sangkap ay madaling magagamit para magamit mo. Ginagawa silang napakabilis at mas maaasahan.

Ang mga app tulad ng Spotify, Slack, at Uber, bukod sa iba pa, ay mga halimbawa ng PWA.

Ang mga PWAs sa pangkalahatan ay may isang karaniwang patakaran sa arkitektura. Para sa isang PWA na gumana sa paraang dapat, dapat mayroong mga sumusunod na katangian:

1. Isang Manggagawa

Ang mga manggagawa sa serbisyo ay madaling maghatid ng nilalaman sa mga PWA. Tinitiyak nila na ang iyong app ay maaaring mag-load ng relatable na naka-cache na data kapag walang koneksyon sa network. Posible ito sa tulong ng Cache API, na nag-iimbak ng mga tugon sa iyong mga offline na kahilingan. Samakatuwid, ang isang manggagawa ay nakagagambala sa mga nabigasyon at mga kahilingan ng gumagamit.

Kaugnay: Paano Gumagana ang CPU Cache?

Gamit ang pangako object, maaaring maghatid ang isang manggagawa ng na-download na nilalaman sakaling isang panghuli na hiling ng isang gumagamit (kahit na naka-offline sila). Gayunpaman, ang isang manggagawa sa serbisyo ay nagbibigay ng isang hindi nakaharang na pag-aari sa mga PWA.

2. Isang Ligtas na Konteksto

Ang isang manggagawa sa serbisyo ay nangangailangan ng isang ligtas na koneksyon (HTTPS) para sa pagiging kompidensiyal ng naihatid na nilalaman. Kapag nagpadala ka ng isang kahilingan, ang isang manggagawa ay nagtatatag ng ligtas na komunikasyon sa pagitan ng PWA at ng browser. Samakatuwid, ang isang ligtas na konteksto, ay pumipigil sa mga paglabag sa pagiging kompidensiyal tulad ng isang pag-atake ng tao-sa-gitna (MITM) sa mga PWA.

3. Isang Web Application Manifest File

Ang isang web manifes ay isang JSON file na tumutukoy sa mga katangian ng isang PWA. Detalye nito ang mga kinakailangan para sa pag-access, pagtuklas, at paggamit ng nilalaman ng isang PWA. Karaniwan itong may kasamang pangalan ng iyong app, ang URL, at mga bahagi nito. Sa huli, naglalaman ang isang manifest file ng impormasyong kinakailangan upang gawing nai-install na application ang iyong web app.

Ano ang Mga Pagkakatulad sa Pagitan ng PWAs at SPAs?

Habang magkakaiba ang lohika sa background ng mga PWA at SPA, nagbabahagi pa rin sila ng ilang mga bagay na pareho. Bagaman maaaring magkakaiba ang bilis ng kanilang paghahatid, ang mga maginoo na website ay mahuhuli pa rin sa kanila sa bilis at kakayahang mai-access.

Parehong nilalayon nilang mapabuti ang karanasan ng gumagamit sa pamamagitan ng pagbibigay ng isang tumutugong interface.

Sapagkat pareho silang naghahatid ng isang karanasan sa app, madali itong ihalo, at halos hindi mo masabi kung alin sa kung kailan ka nakikipag-ugnay sa kanila. Sa wakas, sa tala na ito, kapwa kailangan ng isang URL bago mo ma-access ang mga ito.

Ang Pangunahing Mga Pagkakaiba sa Pagitan ng mga SPA at PWA

Ang PWAs at SPAs ay maaaring magbahagi ng ilang kapansin-pansin na mga katangian na pareho, ngunit ang mga ito ay dalawang magkakaibang bagay. Narito ang mga pangunahing pagkakaiba ng tampok na dapat mong tandaan:

Pangunahing Mga Tampok ng Mga Application na Single-Page

Maa-access lamang sila sa pamamagitan ng browser.
Bagaman hindi inirerekomenda, maaari mong ihatid ang mga ito sa isang insecure network (HTTP).
Hindi nila kailangan ang mga manggagawa sa serbisyo.
Ang mga SPA ay walang isang JSON manifest file, na nangangahulugang hindi mai-uninstall ang mga ito.
Dapat ay isang pahina sila.
Hindi ma-access kapag walang network.

Pangunahing Mga Tampok ng Progressive Web Apps

Ang pag-access sa kanila sa pamamagitan ng browser ay isang pagpipilian dahil mai-install ang mga ito.
Ang lahat ng mga PWA ay nangangailangan ng mga manggagawa sa serbisyo at dapat silang humiling sa pamamagitan ng isang ligtas na network (HTTPS).
Ang mga sagot ay nai-cache at naihatid sa pamamagitan ng a pangako bagay
Naa-access ang mga ito kahit na sa kawalan ng isang koneksyon sa network.
Mas mabilis sila kaysa sa mga SPA.
Palagi silang may isang manifest file, kaya maaari silang mag-download, mai-install, at madaling ma-access.
Ang isang PWA ay maaaring hindi isang solong-pahinang aplikasyon.

Ang mga SPA at PWA ay Nakakaimpluwensya sa Paghahatid ng Website

Gamit ang maraming mga website ng enterprise na ngayon ay gumagamit ng mga bagong teknolohiyang ito, mayroon nang positibong pagbabago patungo sa kanilang paghahatid ng serbisyo.

Mas mahalaga, ang pag-aampon ng mga PWA ay nagpapabuti sa pangkalahatang karanasan ng gumagamit, na dahil dito ay binabawasan ang mga rate ng bounce at pinapataas ang kita para sa karamihan ng mga app ng enterprise. Ang SPAs, sa kabilang banda, ay nagbago rin ng social media, na ginagawang madali para sa mga tao na makipag-ugnay sa web nang hindi mabagal ang pag-load ng pahina.

ano ang isang .apk file

Magbahagi Magbahagi Mag-tweet Email Synchronous vs. Asynchronous Programming: Paano Magkaiba ang Iyon?

Dapat mo bang gamitin ang magkasabay o asynchronous na programa para sa iyong susunod na proyekto? Alamin dito.

Basahin Susunod Mga Kaugnay na Paksa

Programming
Programming
Pag-unlad ng App

Tungkol sa May-akda Idisou Omisola(94 na artikulong nalathala)

Si Idowu ay madamdamin tungkol sa anumang matalinong tech at pagiging produktibo. Sa kanyang libreng oras, naglalaro siya kasama ang pag-coding at paglipat sa chessboard kapag siya ay naiinip, ngunit gusto din niya ang paglayo mula sa nakagawiang gawain sa isang sandali. Ang kanyang hilig sa pagpapakita sa mga tao ng paraan sa paligid ng modernong tech ay nag-uudyok sa kanya na magsulat pa.

Higit pa Mula sa Idowu Omisola

Mag-subscribe sa aming newsletter

Sumali sa aming newsletter para sa mga tip sa tech, pagsusuri, libreng ebook, at eksklusibong deal!

Mag-click dito upang mag-subscribe