Ce este o aplicație web progresivă? De ce avem nevoie de unul? Cum putem construi unul?

Ați văzut vreodată un banner „Adăugați la ecranul de pornire”, ca mai sus, în timp ce navigați pe un site web? Când faceți clic pe buton, „aplicația” se instalează în fundal. Când deschideți această aplicație care se află acum în sertarul de aplicații, puteți răsfoi aceeași experiență pe care o făceați în browser, dar acum chiar pe telefonul mobil.

Ceea ce aveți acum este o aplicație mobilă care a fost descărcată dintr-o aplicație web. Toate acestea, fără a fi nevoie să văd măcar fața unui magazin de aplicații.

Obținerea aplicației a fost atât de ușoară! Dar asta nu este nici măcar partea cea mai bună. Când deschideți această aplicație, veți putea naviga prin conținut chiar și atunci când nu aveți internet. Aveți acces offline la aplicație! Cat de tare e asta?

Ceea ce ați întâlnit este o aplicație web progresivă (PWA). Un PWA vă permite să instalați aplicația din fereastra browserului în sine, este disponibil pe telefonul dvs. ca o aplicație nativă și funcționează offline, la fel ca o aplicație nativă.

Dar ce înseamnă cu adevărat pentru o aplicație web să fie progresivă? Să analizăm mai profund ce sunt aplicațiile web progresive, de ce cred că sunt mai bune decât aplicațiile native și ce le face diferite de aplicațiile web tradiționale.

Ce este o aplicație web progresivă (PWA)?

Termenul Progressive Web App a fost inventat de Alex Russell și Frances Berriman. În cuvintele lui Alex:

Aplicațiile web progresive sunt doar site-uri web care au luat toate vitaminele potrivite.

Nu este un cadru sau o tehnologie nouă. Este un set de cele mai bune practici pentru ca o aplicație web să funcționeze similar cu o aplicație desktop sau mobilă. Visul este să ai o experiență atât de uniformă și uniformă încât utilizatorul să nu poată face diferența dintre o aplicație web progresivă și o aplicație mobilă nativă.

Aplicațiile web progresive oferă experiențe utilizatorilor prin îmbunătățirea progresivă. În esență, înseamnă că un PWA va îndeplini aceleași funcții pe un nou iPhone 8 ca și pe un iPhone de generație mai veche. Sigur, este posibil ca unele funcții să nu fie disponibile, dar aplicația continuă să funcționeze și să funcționeze așa cum ar trebui.

De ce avem nevoie de o aplicație web progresivă?

Înainte de a înțelege de ce avem nevoie de o aplicație web progresivă, să vorbim despre unele dintre provocările cu care ne confruntăm astăzi cu aplicațiile native și web.

Viteza internetului: este posibil să nu vă dați seama de acest lucru în funcție de locul în care locuiți, dar 60% din populația lumii folosește încă internetul 2G. Chiar și în SUA, unii oameni trebuie să utilizeze dialup pentru a accesa internetul.

Încărcare lentă a site-ului web: Știți cât timp așteaptă un utilizator să facă clic pe butonul „Închideți X” dacă un site web este prea lent? Trei secunde! 53% dintre utilizatori abandonează un site web dacă este prea lent.

Frecare mare: Oamenii nu vor să instaleze aplicații native. Un utilizator mediu instalează 0 aplicații într-o lună.

Implicarea utilizatorului: Utilizatorii își petrec cea mai mare parte a timpului în aplicații native, dar acoperirea web mobilă este de aproape trei ori mai mare decât cea a aplicațiilor native. Prin urmare, majoritatea utilizatorilor nu sunt implicați activ. Cu toate acestea, utilizatorii își petrec 80% din timp doar pentru primele trei aplicații native.

Programe web progresive 101 ce de ce si cum
Implicarea utilizatorilor pe aplicațiile web mobile

PWA-urile ajută la rezolvarea acestor probleme. Există mai multe motive pentru utilizarea unei aplicații web progresive, dar iată câteva dintre capabilitățile de top pe care le oferă:

  1. Fast: PWA oferă experiențe care sunt în mod constant rapide. Din momentul în care un utilizator descarcă o aplicație până în momentul în care începe să interacționeze cu ea, totul se întâmplă foarte repede. Deoarece puteți cache datele, este extrem de rapid să porniți din nou aplicația chiar și fără să atingeți rețeaua.
  2. Euexperiență de utilizator integrată: PWA-urile se simt și se comportă ca aplicații native. Acestea stau în ecranul de start al unui utilizator, trimit notificări push, cum ar fi aplicații native și au acces la funcționalitățile unui dispozitiv, cum ar fi aplicațiile native. Experiența se simte fără probleme și integrată.
  3. Rexperiență ușurată: Cu ajutorul lucrătorilor din service, putem picta în mod fiabil o imagine pe ecranul unui utilizator chiar și atunci când rețeaua a eșuat.
  4. Einteracțiune: deoarece putem trimite notificări unui utilizator, putem stimula cu adevărat implicarea, ținându-l pe utilizator notificat și implicat în aplicație.

Pe scurt, este FOC.

Programe web progresive 101 ce de ce si cum

Cum să creați o aplicație web progresivă

Google a publicat un lista de verificare a articolelor pentru aplicațiile web progresive. Voi depăși patru cerințe minime pentru ca o cerere să fie PWA:

1. Manifestul aplicației web

1611202926 297 Programe web progresive 101 ce de ce si cum
Un exemplu de fișier manifest.json

Acesta este doar un json fișier care oferă metainformații despre aplicația web. Are informații precum pictograma aplicației (pe care o vede utilizatorul după ce a instalat-o în sertarul său de aplicații), culoarea de fundal a aplicației, numele aplicației, numele scurt și așa mai departe. Putem scrie noi singuri acest fișier manifest sau îl putem folosi instrumente pentru a genera unul pentru noi.

1611202926 938 Programe web progresive 101 ce de ce si cum
Puteți genera automat fișierul manifest utilizând instrumentele Google.

2. Lucrători de servicii

Lucrătorii de servicii sunt lucrători conduși de evenimente care rulează în fundalul unei aplicații și acționează ca un proxy între rețea și aplicație. Aceștia sunt capabili să intercepteze cererile de rețea și să memoreze informații cache în fundal. Aceasta poate fi utilizată pentru a încărca date pentru utilizare offline. Ei sunt javascript script care ascultă evenimente precum preluarea și instalarea și efectuează sarcini.

Iată un eșantion 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) {
    const cachedResponse = await caches.match(request);
    return cachedResponse || fetch(request);
}

3. Pictogramă

Aceasta este utilizată pentru a furniza o pictogramă a aplicației atunci când un utilizator instalează PWA în sertarul de aplicații. O imagine jpeg va fi bine. Instrumentul manifest pe care l-am evidențiat mai sus ajută la generarea de pictograme pentru mai multe formate și mi s-a părut foarte util.

4. Servit prin HTTPS

Pentru a fi PWA, aplicația web trebuie să fie servită într-o rețea sigură. Cu servicii precum Cloudfare și LetsEncrypt, este foarte ușor să obțineți un certificat SSL. A fi un site securizat nu este doar o bună practică, ci și stabilește aplicația dvs. web ca un site de încredere pentru utilizatori, demonstrând încredere și fiabilitate și evitând atacurile de mijloc.

Notă: Aceasta este partea 1 din seria 2 părți. În partea următoare, vom crea o aplicație web progresivă de la zero, cu un schelet index.html. Consultați partea 2 aici.

Ai învățat ceva nou? Ai comentarii? Cunoașteți un DevJoke? Trimite-mi un Tweet @ shrutikapoor08