Cum să construiți o aplicație web React Progressive?

Colosii tehnologici precum Google și Microsoft au deschis calea pentru aplicații web progresive (sau PWA) de acum 4-5 ani. Acum, PWA a devenit o tehnologie obligatorie pentru companiile mari și startup-urile mici. Twitter, Starbucks, Google și AliExpress folosesc creatorii de aplicații web progresivi pentru a-și îmbunătăți imaginea online.

PWA este o aplicație web care surprinde avantajele aplicațiilor native și web. Acesta oferă funcții hardware și este inclus în corpul principal de aplicații multiplatforme. În comparație cu aplicațiile native, este mai rapid, mai simplu și mai puțin costisitor de creat și întreținut.

PWA acceptă funcții care nu sunt accesibile pentru site-urile normale. Încorporează lucru offline, notificări push, acces la locație geografică, cameră, microfon etc. PWA poate funcționa chiar și în afara browserului, utilizând un shell de aplicație local care poate fi expediat la pornire.

• Studiile Statista spun că peste 40% dintre întreprinderi și programatori independenți din întreaga lume preferă să lucreze cu React, făcându-l cel mai popular cadru web în anul 2021.
• React este, de asemenea, menționată ca tehnologia vedetă pe GitHub, cu 85 de depozite colective făcându-l cel mai accesibil cadru open-source.
• Conform unor rapoarte și studii efectuate de raportul celor mai importante 30 de PWA , a existat o rată medie de conversie cu 36% mai mare pentru creatorii de aplicații web react progresiv decât cea pentru aplicațiile mobile native.
• Potrivit Smashing Ideas, companiile cu PWA au o creștere cu 50% a angajamentului clienților .
• Același raport de idei zdrobitoare afirmă, de asemenea, o scădere cu 33% a dezvoltării și întreținerii . Raportul oferă, de asemenea, informații despre economiile de dezvoltare și întreținere care pot fi mai mari de 33% dacă PWA poate satisface toate nevoile de web mobil, eliminând nevoia de aplicații noi sau existente.

PWA și React

Din moment ce știi importanța PWA. Există mai multe moduri de a crea o aplicație react PWA sau aplicații web progresive. Puteți utiliza vanilla JS, HTML, CSS cu ușurință și vă puteți alege cadrul și bibliotecile. Unele opțiuni populare sunt Ionic, Vue, Angular, Polymer și, desigur, React.

Tehnologii web pentru PWA:

• manifeste web
• Agenți de service
• Carcasă de aplicație
• HTTPS

Cum se creează aplicația React?

Pentru a începe cu cum să construiți o aplicație web, asigurați-vă mai întâi că aveți instalate versiunea recentă a Node și un editor de cod familiar. În cea mai mare parte, Visual Studio Code este folosit de mulți ca o alegere populară.

Dar, dacă aveți o aplicație web de reacții pe care trebuie să o combinați cu funcții progresive, atunci este uimitor. Dacă nu, atunci asigurați- vă că instalați pentru a beneficia pe deplin de dezvoltarea aplicației native React . Instrumentul CreateReactApp de la Facebook poate ajuta în acest sens. Puteți chiar importa aplicații de răspuns gata făcute din GitHub.

Construirea unui PWA cu aplicația Create-React

Configurați o aplicație React simplă

Primul pas este construirea PWA. Pentru aceasta, trebuie să utilizați aplicația create-react așa cum sa discutat în paragraful de mai sus. Dacă nu o aveți instalată în sistemul dvs., atunci puteți rula această comandă folosind codul de mai jos:

npm i create-react-app -g

Pentru a construi o aplicație TypeScript React folosind create-react-app, introduceți comanda npx dată mai jos:

npx create-react-app pwa-react-typescript –template typescript

Acești pași vor crea o aplicație web React creată pentru tine cu TypeScript, care poate fi testată local cu:

cd pwa-react-dactilograf

începutul firului

O altă metodă de a crea o aplicație React este cu:

create-react-app react-pwa

Imaginea de mai jos vă arată fișierele care vor fi construite în folderul react-app.

Înregistrați un lucrător de servicii

Create-react-app (CRA) oferă instrumentele pentru a oferi soluții la întrebarea - cum să creați o aplicație PWA cu React pentru afacerea dvs. ?

Dar dacă vă gândiți cum să construiți o aplicație web progresivă rulabilă în modul offline? Apoi trebuie să configurați fișierul de lucrător al serviciului generat automat.

Directorul proiectului nou creat conține fișierul index.js. Când îl deschideți, veți găsi codul de mai jos:

În fișier este posibil să vedeți serviciul Lucrător, care nu este înregistrat. Pentru a-l înregistra, trebuie să schimbați apelul unregister() cu unul register().

Astfel, întrebarea cum să creați o aplicație react sau să creați o aplicație PWA cu un lucrător de service folosind React este rezolvată?

Configurați manifestul aplicației web

Ar trebui să știți că manifest.js din folderul public conține metadatele, adică informații care controlează modul în care aplicația îi apare utilizatorului și explică aspectul acesteia la lansare.

Manifest.json este conectat în fișierul public/index.html:

<link rel="manifest” href="%PUBLIC_URL%/manifest.json” />

Notă: utilizarea lui %PUBLIC_URL% în etichetele de mai sus. Se va schimba cu adresa URL a folderului public în timpul dezvoltării. De asemenea, rețineți că numai fișierele care se află în folderul public pot fi preluate din HTML.

Chrome necesită un manifest.json pentru a adăuga PWA pe ecranul de pornire.

ServiceWorker.js înregistrează fișierul nostru de lucrător al serviciului. Pentru a răspunde la întrebarea dvs. unde se va înregistra dosarul lucrătorului? Fișierul va fi generat cu CRA atunci când aplicația este construită, adică atunci când se construiește pentru producție:

npm run build

Explicând componenta fișierului, aici mergem:

• Comanda construiește proiectul și stochează în folderul de compilare.
• Toate fișierele js și css sunt deținute de folderul static.
• Index.html este pagina principală care încarcă toate fișierele React stocate în folderul static/js și, de asemenea, CSS-ul care este stocat în folderul static/css.
• În fișierul service-worker.js este stocat tot codul service worker.
• Toate fișierele pe care lucrătorul de serviciu le memorează într-o matrice sunt deținute de fișierul precache-man aifest.*.js.
• Pentru ca totul să decurgă conform planului, trebuie să încărcați folderul de compilare în browser, dar mai întâi veți avea nevoie de un browser. Instalați serverul http
• Următorul pas este să adăugați start în secțiunea de scripturi din package.json.

Testarea PWA

După ce a făcut un React PWA. Următorul pas este legat de testarea aplicației.

Pentru a rula aplicația în modul producție, tastați următoarele comenzi prezentate în figura de mai jos:

Acum v-ați construit aplicația și este timpul să o testați. Google a creat o listă de verificare pentru PWA și vă puteți evalua aplicația web folosind Lighthouse. Este un instrument situat în fila Chrome DevTools.

De ce să alegeți React pentru crearea de aplicații web progresive?

React fiind o bibliotecă open-source pentru JavaScript creată inițial de Jordan Walke de la Facebook în 2013, a fost creată pentru dezvoltarea interfețelor de utilizare într-un mod rapid, de bază și adaptabil. Grupul Facebook ține pasul cu biblioteca și în prezent este executat în articolele lor precum Facebook și Instagram.

React este popular cu cantitatea de descărcări JavaScript care atinge locul de peste 8 milioane de descărcări în fiecare săptămână. Unul dintre multele motive pentru care oamenii se îndreaptă spre dezvoltarea de aplicații native .

Notă de final

Dezvoltarea PWA React pentru startup-uri este în tendință, deoarece permite proiectarea, dezvoltarea, transmiterea și publicarea PWA-urilor pentru miliarde de dispozitive care utilizează tehnologii cu care sunt familiarizați. Aplicațiile React existente pot fi, de asemenea, schimbate într-un PWA.

PWA cu ajutorul companiei de dezvoltare a aplicațiilor pwa sunt ușor de creat și distribuit și cresc valoarea clienților, oferind o perspectivă locală, un angajament mai bun prin intermediul componentelor, de exemplu, adăugare la ecranul de pornire, mesaje pop-up și multe altele fără stabilire. interacţiune.

În cazul în care aveți nevoie de asistență pentru construirea de aplicații web progresive care reacţionează pentru afacerea dvs., echipa noastră de companie cu experienţă în dezvoltarea de aplicaţii web progresive este pregătită să vă înţeleagă întrebarea și să vă sfătuiască cu privire la dezvoltarea de aplicaţii web progresive. De asemenea, puteți găsi una dintre investigațiile noastre contextuale numărul unu PWA.