Cum de a construi o aplicație web progresivă

Mobile se înregistrează acum peste jumătate din traficul web, iar aplicațiile web permit utilizatorilor să facă lucrurile în browser care rivalizează aplicații native, dar există o problemă: calitatea conexiunilor și a dispozitivelor variază masiv în întreaga lume.

Catering atât la utilizatorii de la conexiunile fulger-rapid în Seul, cât și utilizatorii din India rurală pe un telefon învechit, este cea mai recentă provocare utilizabilitate, iar aplicațiile web progresive sunt soluția.

PWAS utilizează îmbunătățirea progresivă pentru a încărca mai întâi cel mai important conținut, apoi adăugați extra fire și funcționale, după cum este necesar, ceea ce înseamnă că toți utilizatorii dvs. primesc aceeași experiență de bază cât mai repede posibil. Dacă doriți să ajungeți la cel mai larg public public, PWAS sunt calea de parcurs.

• 10 pași pentru o experiență de utilizare angajată

Deși aplicațiile web progresive aduc o mulțime de beneficii și funcționalitate pe web, ele nu necesită rescrierea întregii aplicații. Orice aplicație poate fi transformată într-o pwa adăugând câteva straturi suplimentare la ea.

Pentru cele mai bune rezultate, veți dori să puneți un accent puternic pe performanța de la început - dar este adevărat pentru orice aplicație web. Aici vom trece prin pașii pentru a vă face aplicația progresivă.

Dacă doriți să construiți un site de funcționare fără probleme, asigurați-vă că sunteți web hosting este la fața locului și folosiți un decent Builder de site-uri web .

01. Serviți asupra HTTPS

Să fim cinstiți: ar trebui să faci asta oricum. SSL adaugă un strat suplimentar de securitate pe web, ajutând utilizatorii dvs. să se simtă în siguranță în utilizarea site-ului dvs. Cu PWAS, HTTPS este esențială pentru utilizarea lucrătorilor de servicii și pentru a permite instalarea ecranului de pornire. Puteți achiziționa un certificat SSL de la registratorul de domeniu la cheltuieli mici și apoi îl configurați prin serviciul dvs. de găzduire.

02. Creați o coajă de aplicații

Shell-ul dvs. de aplicație este primul lucru care încarcă - primul lucru pe care utilizatorul îl vede. Ar trebui să existe în întregime în documentul HTML index, cu CSS inline, pentru a vă asigura că apare cât mai repede posibil și utilizatorul dvs. nu se uită la un ecran alb mai mult decât este necesar. Shell-ul aplicației face parte din modelul de îmbunătățire progresivă. Aplicația dvs. ar trebui să dea conținut de utilizator cât mai curând posibil și apoi să-l îmbunătățească progresiv ca mai multe date (probabil javascript).

Exemplul de mai jos este luat dintr-o aplicație React.js. Utilizatorul este prezentat cu o schiță a aplicației și a unui indicator de încărcare în index.html. Apoi, odată ce încărcăturile JavaScript și reacționează cizmele în sus, aplicația completă este redată în coajă.

 și lt; - index.html - & gt;
& lt; corp & gt;
& lt; div id = "rădăcină" & gt;
  & lt; div id = "container" & gt;
  & Lt; Div clasa = "container interior" & gt;
  & lt; div id = "antet" & gt;
  & lt; img src = "/ active / icon.png" alt = "logo" / & gt;
  & lt; h1 & gt; chat 

03. Înregistrați un lucrător de service

Pentru a apăsa în întregul spectru al bunurilor PwA (Notificări Push, Caching, Instalare Spends) Veți avea nevoie de un lucrător de service.

Din fericire, sunt destul de ușor de configurat. Mai jos, verificăm mai întâi dacă browserul utilizatorului acceptă lucrătorii de servicii. Apoi, dacă da, putem merge mai departe cu înregistrarea fișierului lucrătorului de service, a sunat aici Service-Worker.Js. . Rețineți că nu aveți nevoie de nimic special în interiorul acelui fișier în acest moment - poate fi gol.

Cu toate acestea, în exemplul de mai jos, arătăm cum să apăsați în cele trei evenimente de ciclu de viață ale lucrătorilor cheie. Acestea sunt "install", când utilizatorul vizitează mai întâi pagina dvs.; "Activați", chiar înainte de încheierea înregistrării; și "Fetch", când aplicația face o cerere de rețea. Ultimul este relevant pentru caching-ul și capacitatea offline.

& lt; script & gt;
  Dacă ("Serviceworker" în Navigator) {
  fereastră.addeventlistener ("încărcare", funcție () {
  navigator.serviceworker.Register ("Service-Worker.js"). Apoi (funcția (înregistrare) {
  // Înregistrarea a reușit
  consola.log ("înregistrat!");
  }, funcția (err) {
  // inregistrare esuata :(
  consola.log ("Înregistrarea lucrătorilor de servicii nu a reușit:", err);
  }). captura (funcția (err) {
  consola.log (eroare);
  });
  });
  } altfel {
  consola.log ("lucrătorul de servicii nu este acceptat");
  }
  & lt; / script & gt;
// Service-Worker.js
Self.adDeventlistener ("Instalare", funcția () {
  consola.log ('instalare!');
});
Self.AdDeventlistener ("Activați", Eveniment = & GT; {
  consola.log ("activați!");
});
Self.AdDeventlistener ("Fetch", funcția (eveniment) {
  consola.log ('Fetch!', eveniment.Request);
}); 

04. Adăugați notificări push

Lucrătorii de servicii permit utilizatorilor dvs. să primească notificări push prin intermediul Web Push API. Pentru ao accesa, puteți apăsa auto.registration.pushmanager. din fișierul de lucrător de service. Deoarece trimiterea notificărilor push se bazează foarte mult pe configurarea dvs. de backend, nu ne vom scufunda aici aici.

Dacă începeți o aplicație de la zero, Serviciul de Firebase Google vine cu comenzi de cloud FireBase pentru notificări de împingere relativ fără durere (amintiți-vă: Asigurați-vă că păstrați fișierele de design în siguranță Stocare in cloud) . Codul de mai jos arată cum să vă înregistrați pentru notificările Push prin API-ul Push.

 navigator.serviceworker.ready.then (funcția (înregistrare) {
  Dacă (! Înregistrare.pushManager) {
    alertă ("fără suport de notificări push");
    întoarce-te fals;
  }
  // să aboneze `push notificarea" de la Push Manager
  Înregistrare.pushManager.subscribe ({
  UservisibleOnly: TRUE // Afișați întotdeauna notificarea atunci când este primită
  })
  . Atunci (funcția (abonament) {
  consola.log ("subscris");
  })
  .Catch (Funcție (eroare) {
  consola.log ("eroare de abonament:", eroare);
  });
}) 

05. Adăugați o aplicație web manifestă

Pentru a vă instala aplicația, trebuie să includeți a Manifest.Json. în directorul rădăcină al aplicației. Vă puteți gândi la aceasta ca o descriere a aplicației dvs., similară cu ceea ce vă puteți trimite la App Store. Acesta include pictograme, un ecran de stropire, un nume și o descriere.

Există, de asemenea, o anumită configurație pentru modul în care apare aplicația dvs. atunci când este lansată din ecranul de pornire al utilizatorului: doriți să afișați bara de adrese în browser sau nu? Ce culoare doriți ca bara de stare să fie? Și așa mai departe. Rețineți că este corect Manifest.Json. ar trebui să includă un spectru complet de dimensiuni de pictograme pentru diverse dispozitive. Codul de mai jos este o previzualizare a unor proprietăți pe care le poate include manifestul.

 {{{{{
  "Short_name": "Chat",
  "Nume": "Chat",
  "Icoane":
  {
  "SRC": "/ Active / Icon.png",
  "Dimensiuni": "192x192",
  "Tipul": "Imagine / PNG"
  }
  ],
  "START_URL": "/? UTM_SOURCE = HOMECREEN",
  "fundal_color": "# E05A47",
  "Theme_Color": "# E05A47",
  "Afișați": "Standalone"
} 

06. Configurați promptul de instalare

Atunci când un utilizator vizitează un PWA cu un lucrător și un manifest, Chrome le va solicita automat să o instaleze la ecranul lor de start, având în vedere următoarele: utilizatorul trebuie să viziteze site-ul de două ori, cu cinci minute între vizite.

Ideea aici este de a aștepta până când utilizatorul demonstrează interesul în aplicația dvs. și apoi să le cereți să o facă un dispozitiv de fixare a dispozitivului (acest lucru este în contrast puternic cu abordarea aplicației native, care solicită investiția în sus).

Dar pot exista cazuri în care doriți să afișați solicitarea de instalare în situații diferite, cum ar fi după ce utilizatorul ia o acțiune utilă specială. Pentru a face acest lucru, interceptăm înainteInstallprompt. eveniment și salvează-o mai târziu, apoi implementați promptul atunci când considerăm potrivit.

 fereastră.AdDeventlistener ('înainteInstallprompt', E = & gt; {
  consola.log ("Evenimentul Facinstalprompt concediat");
  e.preventdefault ();
  // stați evenimentul, astfel încât acesta poate fi declanșat mai târziu.
  acest.deferedprompt = e;
  întoarce-te fals;
  });
// Când doriți să declansați prompt:
acest.deferredprompt.prompt ();
  acest.deferredprompt.userchoice.Then (alege = & gt; {
  consola.log (alegere);
  });
acest.deferredprompt = null; 

07. Analizați performanța aplicației dvs.

Performanța este inima și sufletul PWAS. Aplicația dvs. ar trebui să fie rapidă pentru utilizatori în toate condițiile de rețea. Caching-ul și capacitatea offline ajută foarte mult, dar la sfârșitul zilei, cererea dvs. ar trebui să fie rapidă chiar dacă utilizatorul nu are browserul pentru a suporta tehnologia lucrătorilor de servicii. Aceasta este definiția îmbunătățirii progresive - oferă o experiență extraordinară pentru toată lumea, indiferent de modernitatea dispozitivelor sau de condițiile de rețea.

Pentru a face acest lucru, un set util de valori este sistemul feroviar. Rail este ceea ce Google numește un "model de performanță centrică de utilizator" - un set de orientări pentru măsurarea performanței aplicației noastre.

Acronimul este de răspuns (cât timp este necesar pentru aplicația dvs. pentru a răspunde la acțiunile utilizatorilor), animație (menținerea vitezei de animație la 60fps), inactiv (folosind timpul când aplicația dvs. nu face altceva pentru a încărca și cache activele suplimentare) și Încărcați (încărcarea aplicației dvs. într-o secundă sau mai puțin).

Iată un tabel de referință semnificative pentru încărcarea aplicației, așa cum este furnizat de MEGGIN KEARNEY, scriitor tehnic la Google Fundamentele Web .

08. Auditați aplicația cu farul

Google este cel mai mare campion împingând aplicațiile web progresive ca viitor al Web-ului. Ca atare, a furnizat un instrument util pentru îndrumarea dezvoltării dvs. PWA.

Fost numit far și furnizat ca o extensie cromată, ca de la Chrome 60, este o parte a cromului DevTools, sub fila "Audit". Ceea ce face farul este executarea aplicației în condiții diferite și măsurați răspunsul și succesul în conformitate cu orientările PWA. Apoi vă oferă un scor din 100. De asemenea, vă poate înscrie aplicația pe cele mai bune practici web în același timp.

Următorul text este o listă a farului valorilor măsurată. În utilizare prezintă, de asemenea, descrieri.

• Înregistrează un lucrător de servicii
• Răspunde cu 200 când sunt offline
• Conține un anumit conținut când JavaScript nu este disponibil
• Utilizează httpss.
• Redirecționează traficul HTTP la HTTPS
• Încărcarea paginii este suficient de rapidă pe 3G
• Utilizatorul poate fi solicitat să instaleze aplicația web
• Configurat pentru un ecran de pornire personalizat
• Adresă Bara meciurilor Culori de marcă
• Are o & Lt; Meta Name = "Viewport" & GT; Etichetă cu lăţime sau scară inițială
• Conținutul este dimensionat corect pentru fereastra de vizualizare

Acest articol a apărut inițial în designerul web; Abonați-vă aici .

Articole similare:

• PWAS: Bine ați venit la revoluția mobilă
• Cum se utilizează animația în aplicațiile mobile
• 9 uimitoare secrete pwa