În acest articol, vom dezvolta un PWA simplu folosind React, care ne va da un șablon pentru dezvoltarea de aplicații mai complexe.
Mai întâi, să creăm o aplicație de bază React utilizând aplicația create-react-app.
Accesați directorul în care veți stoca aplicația dvs. și executați următoarele comenzi:
Executați npm începe pentru a testa cererea dumneavoastră. Nu este altceva de văzut, dar pentru scopurile noastre este un început bun. Să începem să convertim toate acestea în aplicația Web progresivă.
1. Instalarea Farului
Să o instalăm în Chrome. și apoi evaluați aplicația noastră. Puteți începe auditul Lighthouse făcând clic pe pictograma din colțul din dreapta sus al browserului, apoi făcând clic pe butonul "Generați raportul".
Până în prezent, aplicația noastră este rapidă (deoarece avem foarte puțin conținut), dar nu reușește în majoritatea domeniilor cheie.
Să lucrăm cu probleme în ordine.
2. Configurarea serviciului de lucru
Pentru a începe cu Service Worker, trebuie să facem 3 lucruri:
- Creați un serviciu de fișiere-worker.js în dosarul public;
- Înregistrează-ți lucrătorul prin index.js;
- Configurați caching-ul;
Să o facem.
Al doilea pas este un pic mai complicat. Vrem să verificăm dacă browserul acceptă lucrătorii de serviciu și apoi să îl înregistrați la service-worker.js.
Pentru a face acest lucru, să adăugăm eticheta de script în fișierul public / index.html.
Reporniți aplicația cu pornire de la npm și ar trebui să vedeți următoarele în consola:
Să închidem consola și să conducem din nou auditul Lighthouse:
Facem progrese! Acum avem un angajat de serviciu înregistrat. Deoarece caching-ul este dezactivat, al doilea bifat nu este verificat încă, dar de îndată ce vom activa cache-ul va funcționa!
3. Adăugarea de îmbunătățiri progresive
În acest moment, fișierul index.html afișează o div div (#root). care preia aplicația noastră React.
În schimb, dorim să afișăm câteva coduri de bază HTML și CSS, chiar înainte de inițializarea aplicației React.
Cel mai simplu mod de a face acest lucru este să mutați câteva din structurile noastre de bază HTML în aceeași div root #. Acest cod HTML va fi suprascris odată ce ReactDOM afișează componenta App, dar va afișa utilizatorului ceva în locul unei pagini goale, care ar trebui să se uite în timp ce bundle.js este încărcat.
Iată noua noastră index.html. Rețineți că stilurile se află în cap. și HTML în div # rădăcină.
Acest lucru va construi proiectul nostru în folderul de construire. care Firebase va fi dezlănțuită.
Firebase ne va returna adresa URL. Să o deschidem în Chrome și să efectuăm auditul Farului pentru ultima oară.
Unde să mergem mai departe
Întregul punct al Aplicației Progresive Web este viteza. În acest articol, am ratat multe lucruri legate de îmbunătățirea performanței, deoarece aplicația noastră a fost schelet.
Cu toate acestea, pe măsură ce cererea dvs. crește, fișierul principal.js va crește și crește, iar Lighthouse va fi din ce în ce mai puțin mulțumit de dvs.
Fiti atenti sa nu pierdeti articolul in profunzime despre optimizarea performantelor cu React si React Router, care va fi aplicabil atat aplicatiilor Progressive Web App, cat si aplicatiilor web de moda veche.
Acum avem un schelet de lucru pentru dezvoltarea PWA și suntem pregătiți pentru viitorul aplicațiilor web.
Mulțumesc că ați citit!
Trimiteți-le prietenilor: