Ano ang Mga Progresibong Web Apps at Paano Ako Mag-install ng Isa?

Ano ang Mga Progresibong Web Apps at Paano Ako Mag-install ng Isa?

Nangingibabaw ang mga app sa iyong telepono. Sa loob ng mahabang panahon, hindi naiimpluwensyahan ng mga app ang iyong desktop o browser sa parehong paraan. Nagbago iyan sa mga nagdaang taon. Ang mga Progressive Web Apps (PWAs) ay lumalaki sa tangkad at binabago ang aming mga pakikipag-ugnayan sa lahat ng uri ng mga website.





Ngunit ano nga ba ang isang Progressive Web App? Ano ang ginagawa ng isang PWA na hindi ginagawa ng isang website? Narito ang kailangan mong malaman tungkol sa Progressive Web Apps.



Ano ang isang Progresibong Web App?

Ang mga Progressive Web Apps ay mga web application na nag-aalok ng isang regular na site sa mga gumagamit ngunit lilitaw bilang isang katutubong mobile app. Tangkaing dalhin ng PWA ang kakayahang magamit ng isang katutubong mobile app sa itinakdang tampok na modernong browser, na sinasamantala ang mga pagsulong sa parehong mga lugar ng pag-unlad.





Ano ang tumutukoy sa isang PWA, kung gayon?

  • Universal : ang isang PWA ay dapat na gumana nang maayos (mabuti, halos) para sa bawat gumagamit, anuman ang kanilang browser.
  • Tumutugon : Ang mga PWA ay dapat na gumana sa anumang aparato, tulad ng iyong laptop, tablet, smartphone, at iba pa.
  • Disenyo : dapat gayahin ng disenyo ang katutubong mga mobile app, nangangahulugang naka-streamline, madaling hanapin ang mga menu, na may simpleng kakayahang umangkop para sa mga advanced na tampok.
  • Ligtas : Dapat gumamit ang mga PWA ng HTTPS upang mapanatiling ligtas ang data ng gumagamit.
  • Natuklasan: ang mga gumagamit ay maaaring makahanap ng mga PWA, at madali silang makikilala bilang isang application (sa halip na isang 'site').
  • Pakikipag-ugnayan: dapat may access ang isang PWA sa mga tampok sa katutubong pakikipag-ugnayan tulad ng mga push notification.
  • Mga Update: Ang mga PWA ay mananatiling napapanahon, na naghahatid ng mga pinakabagong bersyon ng isang serbisyo o site.
  • Pag-install: payagan ang mga gumagamit na madaling 'mai-install' ang PWA sa kanilang home screen nang hindi nangangailangan ng isang app store.
  • Pagbabahagi: Ang mga PWA ay nangangailangan lamang ng isang solong URL upang maibahagi, nang walang anumang pag-install.

Tulad ng nakikita mo, layunin ng PWA na magbigay sa mga gumagamit ng isang buong karanasan sa website na may mga naka-streamline na tampok at disenyo ng interface ng isang katutubong app.



Paano gagana ang isang Progressive Web App?

Susi sa Progressive Web Apps ang mga manggagawa sa serbisyo ng browser.

Ang isang manggagawa sa serbisyo ay isang script na tumatakbo sa background ng iyong browser, 'hiwalay mula sa isang web page, binubuksan ang pintuan sa mga tampok na hindi nangangailangan ng isang web page o pakikipag-ugnay ng gumagamit.' Maaari kang gumamit ng mga manggagawa sa serbisyo tulad ng itulak ang mga abiso at pag-sync sa background sa ngayon, ngunit ang agarang hinaharap na PWA ay nagbibigay sa mga script na ito ng mas malaking lakas.



Tulad ng naturan, ang mga manggagawa sa serbisyo ay bumubuo ng pundasyon ng pamantayan ng PWA, gamit ang web cache para sa halos agarang mga resulta.

Bago ang mga manggagawa sa serbisyo, ang go-to browser cache script ay ang Application Cache (o App Cache). Nagtatampok ang App Cache sa isang malawak na hanay ng mga offline-first na serbisyo ngunit medyo madaling kapitan ng error. Bukod dito, ang App Cache ay may maraming kilalang mga limitasyon, bilang Isang List na Bukod nagpapaliwanag.



Ngunit ang pangunahing problema para sa mga developer ay kakulangan ng direktang pakikipag-ugnay sa eksakto kung paano gumagana ang AppCache, na humihinto sa mga developer ng tumpak na pag-aayos ng mga isyu sa kanilang paglitaw. Kaugnay nito, ang mga website at serbisyo na may ganap na pag-andar sa offline ay isang mapanganib na pagpipilian.

Gayunpaman, ang mga manggagawa sa serbisyo ay tatagal lamang hangga't kinakailangan ang kanilang aksyon. Sa isang PWA, kapag nag-click ka sa isang bagay o gumamit ng isang tampok, kumikilos ang isang manggagawa sa serbisyo. Ang manggagawa sa serbisyo (tandaan, ito ay isang script) pinoproseso ang kaganapan, na nagpapasya kung ang offline na cache ay maaaring makumpleto ang kahilingan. Ang ideya ay ang maraming mga offline na cache para mapili ng PWA, na nagbibigay ng mas malawak na hanay ng pag-andar sa offline.

Bilang karagdagan, ang cache ay hindi lamang para sa pagpapalakas ng bilis ng offline. Halimbawa, magtungo ka sa isang PWA, ngunit ang iyong koneksyon ay labis na nakakabit. Naghahain ang service worker ng dating cache, ganap na gumagana, nang hindi nakakaabala sa iyong karanasan.

Progresibong Pagsuporta sa Web App Browser

Mayroong dalawang mga kinakailangan para sa paggamit ng isang Progressive Web App: isang katugmang browser at isang serbisyo na pinapagana ng PWA.

Una, tingnan natin ang mga browser. Mayroon kang dalawang mga pagpipilian upang suriin ang suporta ng PWA browser. Ang una ay si Jake Archibald's Handa na ba ang Worker ng Serbisyo ? na madaling ipakita ang katayuang handa na PWA ng mga pangunahing browser, kasama ang Samsung internet.

Para sa isang mas detalyadong pangkalahatang ideya ng suporta sa PWA browser, dapat mong suriin Maaari ko bang gamitin , isang website na dalubhasa sa paglista ng pagpapatupad ng iba't ibang teknolohiya ng web at browser sa pamamagitan ng bersyon ng browser. Halimbawa, kung inilalagay mo ang 'mga manggagawa sa serbisyo' sa search bar, mahahanap mo ang isang talahanayan na ipinapakita ang numero ng bersyon kung saan ipinatupad ng bawat browser ang mga manggagawa sa serbisyo ng PWA.

Kinukumpirma ng talahanayan ng Can I Use Service Workers na ang mga pangunahing browser ay suportado ng lahat ng mga PWA. Inilalarawan din nito ang mga suporta ng PWA para sa maraming mga kahaliling browser ng desktop at mga mobile browser.

Masira ito nang kaunti pa:

  • Desktop browser (Buong Suporta): Chrome, Firefox, Opera, Edge, Safari
  • Desktop browser (Bahagyang Suporta / Hindi napapanahong Bersyon): QQ Browser, Baidu Browser
  • Mobile browser (Buong Suporta): Chrome, Firefox, Safari, UC Browser, Samsung internet, Mint Browser, Wechat
  • Mobile browser (Bahagyang Suporta / Hindi napapanahong Bersyon): QQ Browser, Android Browser, Opera Mobile

Kaya, ang mga pangunahing browser ay sumusuporta sa lahat ng mga PWA. Ang Microsoft Edge at Safari ang pinakabagong mga karagdagan sa buong listahan ng suporta. Sa kabaligtaran, ang parehong QQ Browser at Baidu Browser ay gumagamit na ngayon ng hindi napapanahong mga bersyon at tulad nito ay bumaba sa ikalawang baitang.

Paano Makahanap at Mag-install ng isang Progressive Web App

Ngayon na alam mo kung aling browser ang gagamitin, maaari mong isipin ang tungkol sa paghahanap at pag-install ng isang PWA. Para sa halimbawang ito, gagamit ako ng isang Samsung Galaxy S8 sa Google Chrome.

Nasa saanman ang mga progresibong Web Apps. Maraming mga kumpanya ang inangkop ang kanilang mga site at serbisyo upang mag-alok ng isang progresibong bersyon ng Web App. Sa maraming mga kaso, makakasalubong mo muna ang isang PWA kapag nagtungo ka sa homepage o mobile site ng serbisyo, na nagpapalitaw ng Idagdag sa Home Screen dialog box.

Suriin ang video sa ibaba upang makita kung ano ang nangyayari kapag binisita mo ang Twitter mobile site .

Siyempre, ang pagbisita sa hindi mabilang na mga site at pag-asang makita ang trigger ng home screen ay hindi kapaki-pakinabang. Sa katunayan, ito ay talagang gugugol ng oras. Sa kabutihang palad, hindi mo kailangang gawin iyon dahil mayroong isang pares ng mga site na nakatuon sa pag-catalog ng mga PWA.

Una, subukan outweb . Naglilista ito ng isang disenteng hanay ng mga PWA, na may mga bagong pagpipilian na madalas na lilitaw. Susunod, subukan ang pwa.rocks. Mayroon itong mas maliit na pagpipilian, ngunit ang ilang mga madaling gamiting PWA na nais mong idagdag sa iyong aparato.

Bukod dito, noong Enero 2019, ang Chrome 72 para sa Android ay naipadala gamit ang Pinagkakatiwalaang Aktibidad sa Web (TWA). Pinapayagan ng TWA na buksan ang mga tab ng Chrome sa isang standalone mode. Kaugnay nito, pinapayagan nitong magtampok ng mga PWA sa Google Play app store. Ang mga unang ilang PWA na lumitaw sa Google Play ay Twitter Lite , Instagram Lite, at Google Maps Go , na may higit na nakatakda upang lumitaw sa paglipas ng panahon.

Gallery ng Larawan (2 Mga Larawan) Palawakin Palawakin Isara

Papalitan ba ng Progressive Web Apps ang Mga Katutubong Aplikasyon?

Ang Progressive Web Apps ay isang mahusay na hybrid na hakbang sa pagitan ng iyong browser at isang katutubong mobile app. Papalitan ba ng buong PWA ang mga katutubong app? Iyon ay isang mahirap na hindi mula sa akin. Ang mga PWA ay mahusay bilang isang magaan na alok, ngunit dahil na sa kasalukuyan ay nakararami silang nakatuon sa pagtiklop ng mga mayroon nang mga site at serbisyo, hindi nila papalitan ang mga katutubong app.

Hindi bababa sa, hindi para sa pansamantala.

kung saan maaari i dowload ng musika para sa libreng

Gumagana man ang mga PWA. Ang data na magagamit sa PWA Stats ay nai-back up din ito. Narito ang ilang mga kagiliw-giliw na numero na naglalarawan kung paano binabago ng mga PWA ang aming mga pakikipag-ugnayan sa mga karaniwang ginagamit na mga website:

  • Nakita ng Trivago ang isang 150 porsyento na pagtaas ng pakikipag-ugnayan para sa mga gumagamit na nagdaragdag ng kanilang PWA sa isang home screen.
  • Ang homepage ng Forbes 'PWA' ay ganap na naglo-load sa loob lamang ng 0.8 segundo, 'habang ang mga impression sa bawat pagbisita ay umabot sa 10 porsyento. Nakita din ng PWA ng Forbes na doble ang session ng gumagamit.
  • Nakita ng Twitter Lite ang isang 65 porsyento na pagtaas sa mga pahina bawat session, na may napakalaking 75 porsyento na pagtaas sa mga tweet. Interactive din ito 'sa mas mababa sa 5 segundo sa paglipas ng 3G.'
  • Nakita ng Alibaba ang isang 76 porsyento na pagtaas sa mga conversion sa mobile.

Ang mga PWA ay hindi pa mainstream. Ngunit sa napakaraming hanay ng mga benepisyo na ibinibigay nila, tulad ng pag-save ng puwang sa iyong aparato, maririnig mo pa ang tungkol sa mga ito sa hinaharap.

Magbahagi Magbahagi Mag-tweet Email Isang Gabay ng Baguhan sa Animating Speech

Ang animating pagsasalita ay maaaring maging isang hamon. Kung handa ka nang magsimulang magdagdag ng diyalogo sa iyong proyekto, sisirain namin ang proseso para sa iyo.

Basahin Susunod Mga Kaugnay na Paksa Tungkol sa May-akda Gavin Phillips(945 Mga Artikulo Na-publish)

Si Gavin ay ang Junior Editor para sa Windows at Technology na Ipinaliwanag, isang regular na nag-aambag sa Tunay na Kapaki-pakinabang na Podcast, at isang regular na tagasuri ng produkto. Siya ay mayroong isang BA (Hons) Contemporary Writing na may Mga Digital Art na Kasanayan na nakawan mula sa mga burol ng Devon, pati na rin ng higit sa isang dekada ng propesyonal na karanasan sa pagsulat. Masisiyahan siya sa maraming halaga ng tsaa, mga board game, at football.

Higit pa Mula sa Gavin Phillips

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