Un ghid despre cum să convertiți un site web în aplicație web progresivă (PWA)

Publicat: 2018-07-02

Într-un interval de timp foarte scurt, PWA-urile au făcut o amprentă foarte proeminentă în industria aplicațiilor mobile.

Conceptul, despre care Google vrea să știți , este un răgaz pentru industria care a făcut în mod constant aceleași plângeri de nenumărate ori –

În ceea ce privește site-urile web: viteză lentă de încărcare și rată de rezonanță scăzută

În ceea ce privește aplicațiile mobile: aplicațiile care ocupă mult spațiu de memorie, depind de conexiunea la rețea și pașii lungi pe care utilizatorii vor trebui să ia de la găsirea unei aplicații până la începerea utilizării acesteia.

Deoarece Progressive Web Apps (PWA) sunt descărcate direct de pe un site web și rulează și ca site web, utilizatorii beneficiază de trei moduri:

Aceștia pot economisi timpul necesar pentru a găsi mai întâi o aplicație în magazin, a o instala și apoi a introduce informații pentru a începe.
Deoarece Progressive Web Apps funcționează ca un site web, ocupă spațiu minim de stocare pe dispozitiv și
Deoarece funcționează în primul rând ca un site web, conceptul de cache este valabil, ceea ce permite aplicației să ruleze chiar și acolo unde nu există conexiune la rețea.

Motive pentru a converti site-ul dvs. existent în PWA

Pe lângă faptul că oferă utilizatorilor aceste beneficii evidente, Progressive Web Apps – combinația ideală de site-uri web și aplicații mobile – au apărut și ca formula rentabilă a succesului în afaceri. Acesta este motivul pentru care oamenii așteaptă cu nerăbdare să convertească pagina web în aplicație.

Beneficiile pe care PWA-urile le aduc afacerilor prin faptul că sunt ușor de descoperit, prin ocuparea mai puțin spațiu de memorie, prin costuri reduse de dezvoltare și, în sfârșit, prin rularea offline la o viteză mare, pot fi măsurate observând schimbarea numărului de creștere a acestor mărci celebre. –

Beneficiile pe care aplicația-web-progresive le aduce afacerilor

Poveștile de succes ca acestea și multe dintre ele din industrie sunt suficiente pentru a face ca fiecare afacere mobilă modernă să caute cea mai bună companie de dezvoltare progresivă a aplicațiilor web și să caute modalități de a converti site-urile web în PWA.

Dacă și dumneavoastră intenționați să convertiți site-ul web într-o aplicație web progresivă și să profitați de toate avantajele costurilor reduse ale investițiilor pe care le oferă conceptul, sunteți în locul potrivit.

Iată pașii exacti pentru Cum să convertiți site-ul web PHP în PWA sau cum să transformați un site într-o aplicație , așa cum sunt împărtășiți de Google echipei noastre de dezvoltatori progresivi de aplicații web (unul dintre avantajele de a fi una dintre agențiile oficiale de dezvoltare Google) .

Dar primul lucru mai întâi. Cunoașteți elementele de care aveți nevoie pentru a crea PWA de pe un site web sau dacă doriți să transformați pagina web în aplicație.

Cum să transformi un site web în PWA

Pentru a converti site-ul web în PWA , iată cele trei lucruri necesare -

Un dispozitiv Android atașat care rulează Chrome 52 sau o versiune ulterioară,
O înțelegere de bază a Git și Chrome DevTools,
Exemplul de cod și
Un editor de text

Odată ce le aveți gata, pregătiți-vă să convertiți web în PWA sau convertiți site-ul web în aplicație web.

Pasul 1: Încărcați adresa URL

Primul pas în migrarea site-ului dvs. la PWA este clonarea depozitului GitHub din linia de comandă:

 $ git clone https://github.com/googlecodelabs/migrate-to-progressive-web-apps.git

Acest lucru va ajuta la dezvoltarea unui director Migrare la PWA cu codul completat pentru fiecare pas. Pentru acest laborator de codare specific, încărcați fișierul de lucru și apoi faceți modificările acolo.

Odată ce codul dvs. a fost verificat, utilizați „Simple HTTP Server Application” pentru a servi fișierul de lucru pe portul 8887.

După aceasta, veți putea încărca adresa URL pentru a converti site-ul în PWA.

Pasul 2: Vizualizați site-ul pe mobil

Acesta este al doilea pas pentru a transforma site-ul web într-o aplicație web progresivă. În cazul în care aveți un dispozitiv Android conectat la desktop, introduceți acest lucru în adresa URL - chrome://inspect. Acest lucru vă va permite să setați un port forward cu ajutorul portului pe care l-ați scris anterior către același port de pe dispozitiv.

Apăsați Enter pentru a salva.

Acum veți putea accesa versiunea de bază a site-ului dvs. la – http://localhost:8887/ pe telefonul Android conectat.

Pasul 3: Adăugați etichetele moderne pentru cap

Pentru a converti site-ul web în aplicație mobilă, primul lucru pe care va trebui să-l faceți este să faceți site-ul web prietenos cu dispozitivele mobile și, în al doilea rând, va trebui să adăugați un Web App Manifest. Manifestul va descrie metainformațiile site-ului într-un mod în care ar apărea pe ecranul de pornire al utilizatorului.

Dacă nu aveți un sistem de șabloane, adăugați aceste rânduri -

 <cap>

<meta name= „viewport” content="width=device-width, user-scalable=no” />

<link rel= „manifest” href= „manifest.json” />

</cap>

Viewport – Prima linie constă dintr-o metaetichetă care specifică viewport. Acest element vă va ajuta cu receptivitate. După ce ați scris linia de cod odată ce reîncărcați site-ul, veți găsi site-ul potrivit pentru dispozitivul dvs.
Manifest - În a doua linie a codului dvs. ați făcut referire la fișier - o mișcare care este necesară pentru a controla modul în care site-ul este adăugat la ecranele de start.

După ce ați terminat, deschideți un editor de text. Este timpul să scrieți JSON. În secțiunea nume_scurt, specificați ce se va afișa pe ecranul de pornire și încercați să îl păstrați în maximum 15 caractere .

Apoi, salvați fișierul ca nomenclatură manifest.json și reîncărcați pagina pe dispozitivul Android și mergeți la meniul din dreapta sus și optați pentru „ Adăugați la ecranul de pornire ”. Acum vei putea vedea pictograma ta pe ecranul de start!

Pasul 4: Adăugați un lucrător de service

Service Worker este scriptul de fundal pe care browserul îl poate rula în timp ce utilizatorul nu este pe pagină. Este elementul care oferă suport offline și devine activ atunci când notificarea este împinsă.

Creați un lucrător de service

Copiați acest cod într-un fișier nou și apoi salvați-l ca sw.js.

 /** Un lucrător de service gol! */

self.addEventListener („preluare”, funcție(eveniment)

{

/** Un handler de preluare gol! */

});

Si asta e.

Înregistrați lucrătorul de serviciu

Va trebui să înregistrați codul în codul site-ului dvs. pentru a transforma pagina web în aplicație, pentru aceasta, deschideți fișierul site.js și lipiți acesta -

 navigator.serviceWorker && navigator.serviceWorker.register('./sw.js').then(function(registration) { console.log('Excelent, inregistrat cu scope: ', registration.scope);});

Acum, codul va fi executat la fiecare încărcare a paginii. Verificați dacă funcționează corect reîncărcând pagina și apoi verificând – chrome://serviceworker-internals/

Acum, site-ul dvs. web va putea solicita utilizatorilor să-l instaleze pe ecranele lor de pornire și, în al doilea rând, veți putea face site-ul dvs. capabil să accepte notificări push și chiar să funcționeze offline.

Pasul 5: Faceți ca site-ul să funcționeze offline

Primul pas ar fi să deschideți scriptul sw.js și să obțineți obiectul cache. Odată ce aveți asta, actualizați codul și aplicați întregul site web în cache.

Încercați cum funcționează acum. Dezinstalați aplicația prezentă și încărcați-o pe Chrome. Apoi, reîmprospătați pagina și selectați „ Adăugați la ecranul de pornire ” în meniul din colțul din dreapta.

Pentru a respecta regula conform căreia, atunci când Service Worker se schimbă, pagina ar trebui să o reîncărcați și să o reinstalați, tot ce va trebui să faceți este să adăugați o componentă care are „versiunea” lucrătorului de service. Când se schimbă, mișcarea de instalare are loc din nou, memorând în cache resursele care s-ar fi schimbat.

Felicitări, acum știți cum să convertiți aplicația web în PWA și, dacă ați urmat pașii unul lângă altul, acum ați migrat chiar site-ul dvs. într-o aplicație web progresivă!

*Disclaimer*: Acești pași vă vor oferi, dezvoltatorului, o idee exactă despre cum va trebui să completați spațiile libere și să treceți de la Punctul A în cadrul procesului la Punctul C. Dacă citiți acest lucru ca un antreprenor entuziast care dorește să convertiți wordpress într-o aplicație web progresivă sau doriți să faceți o aplicație dintr-un site web, aș spune, nu o faceți fără a avea sprijinul unui furnizor de servicii de dezvoltare progresivă de aplicații cu experiență.

Deși acești pași sunt explicativi în ceea ce privește modul de a transforma site-ul într-o aplicație sau de a converti aplicația web în aplicație web progresivă, există o serie de elemente care apar ca parte a procesului atunci când stai cu procesul real de dezvoltare . Așadar, în loc să vă încercați pașii pentru a crea aplicația de pe site și să găsiți un rezultat diferit pentru că nu erați sigur de elementele dintre linie, dați slujba unei companii de dezvoltare PWA care are specializare în domeniu. Experții vor răspunde la toate întrebările legate de cum se transformă un site web într-o aplicație, cum se transformă un site într-o aplicație.