„Progressive Web Apps 101“: kas, kodėl ir kaip

Kas yra progresyvioji žiniatinklio programa? Kodėl mums jo reikia? Kaip mes galime jį sukurti?

Ar kada naršydami svetainėje matėte reklamjuostę „Pridėti prie pagrindinio ekrano“, kaip nurodyta aukščiau? Spustelėjus mygtuką „programa“ pati įdiegia fone. Atidarę šią programą, kuri dabar yra jūsų programų stalčiuje, galite naršyti tą pačią patirtį, kurią darėte naršyklėje, bet dabar tiesiai mobiliajame telefone.

Tai, ką dabar turite, yra mobili programa, atsisiųsta iš žiniatinklio programos. Visa tai, net nereikia matyti programų parduotuvės veido.

Gauti programą buvo taip paprasta! Bet tai net ne pati geriausia dalis. Atidarę šią programą galėsite naršyti turinį, net jei neturite interneto. Jūs turite prieigą prie programos neprisijungę! Argi tai ne šaunu?

Tai, su kuo susidūrėte, yra „Progressive Web App“ (PWA). PWA leidžia jums įdiegti programą iš paties naršyklės lango, yra pasiekiama jūsų telefone kaip vietinė programa ir veikia neprisijungus, kaip ir vietinė programa.

Bet ką iš tikrųjų reiškia, kad interneto programa yra progresyvi? Panagrinėkime giliau, kas yra progresyvios žiniatinklio programos, kodėl, manau, jos yra geresnės nei vietinės, ir kuo jos skiriasi nuo tradicinių žiniatinklio programų.

Kas yra progresyvioji žiniatinklio programa (PWA)?

Terminą „Progressive Web App“ sugalvojo Alexas Russellas ir Francesas Berrimanas. Alekso žodžiais:

„Progressive Web Apps“ yra tik svetainės, kuriose buvo vartojami visi reikiami vitaminai.

Tai nėra nauja sistema ar technologija. Tai yra geriausios praktikos rinkinys, kad žiniatinklio programa veiktų panašiai kaip darbalaukyje ar mobiliajame telefone. Svajonė - turėti tokią vienodą ir vientisą patirtį, kad vartotojas negalėtų atskirti „Progressive Web App“ ir savosios mobiliosios programos.

Progresyvios žiniatinklio programos suteikia vartotojams patirties tobulinant palaipsniui. Iš esmės tai reiškia, kad PWA naujame „iPhone 8“ atliks tas pačias funkcijas, kaip ir senesnės kartos „iPhone“. Žinoma, kai kurios funkcijos gali būti nepasiekiamos, tačiau programa ir toliau veikia ir veikia taip, kaip turėtų.

Kodėl mums reikalinga progresyvioji žiniatinklio programa?

Prieš suprasdami, kodėl mums reikia progresyvios žiniatinklio programos, pakalbėkime apie kai kuriuos iššūkius, su kuriais šiandien susiduriame naudodami vietines ir žiniatinklio programas.

Interneto greitis : to galite nesuvokti priklausomai nuo jūsų gyvenamosios vietos, tačiau 60% pasaulio gyventojų vis dar naudojasi 2G internetu. Net ir JAV kai kurie žmonės turi naudotis telefono numeriu, kad pasiektų internetą.

Lėtas svetainės įkelimas: ar žinote, kiek laiko vartotojas laukia, kol spustelės mygtuką „Uždaryti X“, jei svetainė per lėta? Trys sekundės! 53% vartotojų atsisako svetainės, jei ji per lėta.

Didelė trintis: žmonės nenori diegti savųjų programų. Vidutinis vartotojas per mėnesį įdiegia 0 programų.

Vartotojo įtraukimas: vartotojai didžiąją laiko dalį praleidžia savosiose programose, tačiau žiniatinklio mobiliesiems pasiekiamumas yra beveik tris kartus didesnis nei vietinių programų. Taigi dauguma vartotojų nėra aktyviai įsitraukę. Tačiau vartotojai 80% laiko praleidžia tik savo geriausioms vietinėms programoms.

PWA padeda išspręsti šias problemas. Yra keletas progresyvios žiniatinklio programos naudojimo priežasčių, tačiau čia pateikiamos kelios geriausios jos teikiamos galimybės:

  1. F AST: PWAs teikti patirtimi, kad būtų nuosekliai greitai. Nuo to momento, kai vartotojas atsisiunčia programą, iki to momento, kai pradeda su ja bendrauti, viskas vyksta tikrai greitai. Duomenis galite išsaugoti talpykloje, todėl nepaprastai greitai paleisti programą iš naujo, net nepataikius į tinklą.
  2. ntegrated vartotojo patirtis: PWAs jaustis ir elgtis kaip gimtoji apps. Jie sėdi vartotojo pagrindiniame ekrane, siunčia tiesioginius pranešimus, pvz., Vietines programas, ir turi prieigą prie įrenginio funkcijų, pvz., Savųjų programų. Patirtis jaučiasi vientisa ir integruota.
  3. R eliable patirtis: Su paslaugų darbuotojų pagalba, mes galime patikimai nupiešti piešinį ant vartotojo ekrane, net jei tinklas nepavyko.
  4. El ngaging: Kadangi mes galime siųsti pranešimus su vartotoju, mes galime tikrai vairuoti dalyvavimą iki išlaikant vartotojui pranešta ir užsiima su app.

Trumpai tariant, tai UGNIS.

Kaip sukurti „Progressive Web App“

„Google“ paskelbė „Progressive Web“ programų elementų kontrolinį sąrašą. Peržengsiu keturis minimalius reikalavimus, kad programa būtų PWA:

1. Žiniatinklio programų manifestas

Tai tik jsonfailas, suteikiantis meta informaciją apie žiniatinklio programą. Jame yra tokia informacija kaip programos piktograma (kurią vartotojas mato įdiegęs ją savo programos stalčiuje), programos fono spalva, programos pavadinimas, trumpasis pavadinimas ir kt. Mes galime parašyti šį manifesto failą patys arba galime naudoti įrankius, kad sugeneruotume jį sau.

2. Aptarnavimo darbuotojai

Aptarnavimo darbuotojai yra įvykių valdomi darbuotojai, veikiantys programos fone ir veikiantys kaip tarpininkas tarp tinklo ir programos. Jie sugeba užfiksuoti tinklo užklausas ir talpyklos informaciją mums fone. Tai gali būti naudojama įkeliant duomenis neprisijungus. Tai javascriptscenarijus, klausantis įvykių, pvz., Atnešimo ir įdiegimo, ir jie atlieka užduotis.

Čia yra pavyzdys serviceworker.js

self.addEventListener('fetch', event => { //caching for offline viewing const {request} = event; const url = new URL(request.url); if(url.origin === location.origin) { event.respondWith(cacheData(request)); } else { event.respondWith(networkFirst(request)); } }); async function cacheData(request) 

3. Piktograma

Tai naudojama norint pateikti programos piktogramą, kai vartotojas įdiegia PWA į savo programų stalčių. JPEG vaizdas bus tiesiog puikus. Aukščiau paryškintas manifesto įrankis padeda kurti kelių formatų piktogramas, ir man tai pasirodė labai naudinga.

4. Pateikiama per HTTPS

Kad žiniatinklio programa būtų PWA, ji turi būti teikiama per saugų tinklą. Naudojant tokias paslaugas kaip „Cloudfare“ ir „LetsEncrypt“, SSL sertifikatą gauti yra labai lengva. Tai, kad esate saugi svetainė, yra ne tik geriausia praktika, bet ir sukuria jūsų žiniatinklio programą kaip patikimą svetainę, skirtą vartotojams, kurie demonstruoja pasitikėjimą ir vengia vidutinio amžiaus žmonių išpuolių.

Pastaba: tai yra 2 dalių serijos 1 dalis. Kitoje dalyje sukursime „Progressive Web App“ nuo nulio su skeletu index.html. Peržiūrėkite 2 dalį čia.

Ar sužinojai ką nors naujo? Ar turite komentarų? Žinote „DevJoke“? Čivināšana man @ shrutikapoor08

Kodėl programuotojai pasimeta tarp Helovino ir Kalėdų?

Nes UŠT 31 = 25 DEC #DevJokes #WorkChat

- Shruti Kapoor (@ shrutikapoor08) 2018 m. Birželio 22 d