Kako izraditi A + progresivnu web aplikaciju s Reactom

Trenutno postoji veliko uzbuđenje zbog progresivnih web aplikacija (PWA) jer dobavljači preglednika (uključujući Safari) dodaju Service Workers i druge API-je za progresivno poboljšanje. Što točno čini web aplikaciju progresivnom?

Google definira PWA kao iskustva koja kombiniraju najbolje od weba i najbolje od aplikacija. Oni trebaju biti:

  • Brzo - brzo reagirajte na interakciju s korisnicima
  • Integrirano - korisnik ne mora ići putem preglednika
  • Pouzdano - učitajte se odmah, čak i ako je izvan mreže / loše mreže
  • Angažiranje - nastavite da se korisnik vraća s velikim UX-om

Ovo je sve izvrsno, ali nejasno. Google također nudi praktičan popis progresivnih web aplikacija, ali čak i tako da nema definitivnog odgovora o tome što je PWA i što je sjajno.

Osnovni PWA

Na najosnovnijoj razini PWA je definirana tehničkim svojstvima koja omogućuju pregledniku da otkrije da web mjesto ispunjava određene kriterije i da ih je vrijedno dodati na početni zaslon. Ako su kriteriji ispunjeni, može se prikazati promptna natpis "Dodaj na početni zaslon".

Primjer Dodaj u početni zaslon

Tri zlatna pravila za prikaz natpisa "Instalacija aplikacije" jesu:

  1. Aplikacija mora poticati iz sigurnog podrijetla
    Dakle, mora se posluživati ​​preko SSL / HTTPS.
  2. Aplikacija se mora učitati kada je offline
    Trebao bi funkcionirati izvan mreže (čak i ako je prilagođena izvanmrežna stranica ili osnovno predmemoriranje). To znači da će biti instaliran serviser.
  3. Aplikacija se mora odnositi na manifest web aplikacije
    Jednostavna JSON datoteka koja opisuje vašu aplikaciju.

Relativno je trivijalni zadatak dodati ovu funkcionalnost svojoj postojećoj web aplikaciji, a tehnički imate PWA. Nažalost, to ne mora nužno zadovoljavati početnu definiciju brzog, integriranog, pouzdanog i privlačnog. Ako svoju aplikaciju pokrenete putem Googleovog kontrolnog popisa ili putem Google Audit alata za reviziju, vjerojatno ćete naći veliki popis problema.

Ako imate web mjesto na kojem je poslužitelj, tada ćete oštro shvatiti da ćete imati problema s popravljanjem popisa problema o kojima vam svjetionik govori. U web aplikaciji koju pruža poslužitelj kada korisnik dodirne gumb ili vezu, čeka se početak na trenutnom zaslonu prije nego što naglo skoči na potpuno novi zaslon sadržaja. To je neprihvatljivo za PWA jer izdaje ideju da se sama aplikacija pokreće lokalno na uređaju.

Ako zaista želite pretvoriti svoju web aplikaciju u PWA, potrebno je prebaciti ravnotežu snage s web aplikacije na poslužitelju na web aplikaciju klijenta. Ukratko, potrebna je nova arhitektura aplikacija.

App Shell

Uzorak ljuske aplikacije preslikava arhitekturu izvorne aplikacije, učinkovito pružajući paket koda sličan onome koji biste preuzeli iz App Store-a u matičnoj aplikaciji.

Ključna razlika je u tome što ovaj paket treba preuzeti servisni radnik prvi put kada korisnik posjeti aplikaciju, a ne posredno iz trgovine aplikacija. To znači da vaš PWA mora biti brz. U stvari vrlo brzo, jer ne želite da vaši korisnici gledaju prazan ekran 5-10 sekundi dok vam PWA preuzima kuhinjski sudoper samo zato da bi prikazao prvi ekran.

Okvir aplikacije trebao bi sadržavati korisničko sučelje skeleta i osnovne komponente potrebne za aplikaciju. Općenito je odgovoran za usmjeravanje, ali ne bi trebao sadržavati podatke.

Uzorak školjke aplikacije

Učitavanje država

Jednom kada imate Shell aplikacije gdje su podaci odvojeni od prezentacije i klijent je odgovoran za prikazivanje korisničkog sučelja, koncept učitavanja stanja postaje prirodni obrazac dizajna.

Kad se zatraži URL, klijent može u početku donijeti stanje učitavanja koje se odmah učitava kao dio ljuske aplikacije. U isto vrijeme klijent podnosi zahtjev za dohvaćanjem podataka, nakon što ga primi, klijent stvara dovršeni zaslon i zamjenjuje stanje učitavanja.

Učitavanje država

Krajnji rezultat je za korisnika puno bolje iskustvo od pritiskanja veze, zadržavanja na stranici 3–4 sekunde, gledanja bljeskalice i stranice kako se polako prikazuju kao u web aplikaciji na kojoj se pruža server.

Podjela koda

Obrazac Shell aplikacije ide ruku pod ruku s dijeljenjem koda. U standardnoj aplikaciji React vaš se kôd povezuje u jednu JavaScript datoteku. U PWA-u trebamo učitati prvi zaslon što je brže moguće, pa nam treba i manji paket, također trebamo keširati svaku rutu zasebno. Ukratko, moramo podijeliti svoj JavaScript. Webpack vam može pomoći u tome ili možete upotrijebiti nešto poput Preact koji nudi automatsko dijeljenje koda.

Kôd aplikacije Shell podijeljen je i odvojen od sadržaja, možete početi u potpunosti iskoristiti prednosti uslužnih radnika. Značajke koje su prije bile nepraktične mogu se ponuditi s lakoćom, na primjer:

  • Offline podrška
  • Pre-cache korisničko sučelje aplikacije
  • Dinamično predmemoriranje mrežnih podataka / sredstava

Servisni radnici s radnom kutijom

Da biste implementirali ove značajke, potrebno je dublje istražiti servisne radnike. Potpuno je moguće pisati servisne radnike ručno, međutim, Google je učinio puno teškog podizanja za vas s Workboxom.

Sretan medij je korištenje dodatka InjectManifest s WebPackom. To će vam omogućiti da kombinirate vlastiti kod radnika za rad s Workboxom. U najmanju ruku trebali biste implementirati:

  • Prethodno predmemoriranje aplikacije Shell
  • Ručno vrijeme predmemoriranja traženih podataka i sredstava

Puno je više usluga koje radnici mogu učiniti iako uključuju:

  • Pozadinska sinkronizacija
  • Push Obavijesti
  • Offline Analytics

Servisni radnici s radnom kutijom velika je osobna tema. Ako želite znati više, napisao sam zaseban članak o Workbox with Preact.

PRPL uzorak

Vaša bi se aplikacija trebala brzo učitati. Ima aplikacijsku ljusku, dijeljenje koda i sve je spremljeno u servisnom radniku. Zapravo smo implementirali PRPL obrazac koji Google preporučuje za PWA. PRPL ima naglasak na uspješnosti isporuke i pokretanja aplikacija. Zalaže se za:

  • Pritisnite kritične resurse za početni put
  • Postavi početnu rutu
  • Prehranite preostale rute
  • Lagano se učitajte i stvorite preostale rute na zahtjev

Iako će ovo funkcionirati u HTTP / 1, vjerojatno ćete htjeti istražiti web host s HTTP / 2. HTTP / 2 omogućuje multipleksiranje preuzimanja putem jedne veze, tako da se više malih datoteka može učinkovitije preuzimati.

Renderiranje na strani poslužitelja vs pretpregled i CDN

Možete na strani poslužitelja prikazati početnu rutu zajedno s podacima i dopustiti klijentu da nakon toga preuzme renderiranje. To može dati početno povećanje brzine, no može biti složeno za konfiguriranje. Općenito nisam obožavatelj zbog složenosti koju dodaje u bazi podataka.

Po mom mišljenju, bolje rješenje je unaprijed prikazati statičku web stranicu i ugostiti je na HTTP / 2 mreži za dostavu sadržaja (CDN) pružajući nevjerojatnu brzinu i jednostavnost baze podataka. Kao bonus samo ste smanjili složenost svog hostinga jer vam je potreban samo statički web hosting!

Postoji mnogo mogućnosti za pred-prikazivanje, uključujući:

  • Preact
  • Reagirati statično
  • Gatsby

Da biste postigli najbolju brzinu, nakon toga možete rasporediti svoju statičku web stranicu koristeći CDN davatelja poput Netlifyja.

Zamotati

Ako svoju aplikaciju pokrenete putem Svjetionika s takvom arhitekturom, trebali biste dobiti puno bolju ocjenu. Također ćete primijetiti kako je vaša aplikacija brza i daje izvrsno korisničko iskustvo.

Progresivne web aplikacije fantastičan su prijedlog koji je jednostavniji za kreiranje i implementaciju od izvornih aplikacija, ali ipak mogu ponuditi mnogo iskustva koje korisnici vole i očekuju od matičnih aplikacija.

I dalje postoje upitnici oko podrške koju će Safari nuditi u pogledu PWA-e, ali oni rade na nizu stavki, a servisni radnici bit će dostupni u iOS 11.3, tako da izgleda obećavajuće.

Ako želite prijeći daljnju kilometražu, postoji nekoliko dodatnih API-ja koji se provode (opet moramo vidjeti što će Safari implementirati) koji mogu vašem korisniku ponuditi još bolja iskustva, uključujući:

  • Push Notifications API
  • API za web plaćanja
  • API vjerodajnica

Koliko god volim React Native, i to će i dalje biti najbolja opcija za korisničko iskustvo u mnogim slučajevima, osobno ulažem puno vremena i energije u PWA jer vjerujem da imaju svijetlu budućnost!

Moje ime je Dave Hudson, ja sam UX pedant koji proizvodi proizvod koji vodi razvojne timove i piše kôd.
Savjetujem u okviru Applification Ltd i dostupan sam za sve stvari React, agilni i razvoj proizvoda!