Ce este PWA? O explicație ușoară pentru cei non-tehnologi

Ar trebui să știți dinainte că această postare este scrisă din punctul de vedere al unui marketer. (Ei bine, pot să citesc și să scriu ceva HTML și CSS, pot înțelege Javascript într-o oarecare măsură, dar asta nu mă face un tehnic).

Ce este PWA?

PWA ( Progressive Web A pps ) permite unui browser web să aibă aspectul și senzația unei aplicații mobile native (adică aplicații descărcate din magazinele iOS și Android). Aceste aplicații native sunt optimizate pentru o experiență mobilă fluidă, având în același timp unele funcționalități unice, cum ar fi notificările push web. Tehnologia PWA valorifică experiența de navigare pe web pe browsere precum Chrome și Safari, astfel încât să se apropie de cea a unei aplicații native. Acest lucru, ca rezultat, îmbunătățește traficul și implicarea față de web.

Termenul a fost introdus pentru prima dată de Google în 2015. Partea „progresivă”, potrivit lui Pete LePage – Google Developer Advocate, poate fi explicată ca „ pe măsură ce utilizatorul construiește progresiv o relație cu aplicația în timp, aceasta devine din ce în ce mai puternică. ”.

Este PWA la fel cu un site web?

Da, Progressive Web Applications sunt site-uri web.

Cu toate acestea, datorită tehnologiei web moderne, ele arată și se simt ca o aplicație. Acest lucru înseamnă că utilizatorii vor naviga în aplicațiile web progresive în browser-ul lor cu o adresă URL la fel ca pe orice site web, dar imediat după ce ajung pe PWA, au experiența utilizării unei „aplicații”, chiar în browser, fără a fi nevoie să descarca si instaleaza.

A fi o „aplicație” nu înseamnă că PWA se limitează la mobil. Ele pot fi implementate și pe desktop. De fapt, sunt șanse să fi vizitat frecvent PWA înainte fără să-ți dai seama. Dacă ați răsfoit vreodată Instagram, Pinterest sau Tinder pe laptop, atunci felicitări! Ați întâlnit unii dintre cei mai de succes adoptatori ai PWA pe web.

Să aruncăm o privire la un exemplu de site web PWA, deoarece vă poate ajuta să înțelegeți mult mai ușor PWA.

Un exemplu de PWA

Site-ul de comerț electronic G-SP este un PWA. Când vizitați site-ul pe mobil, puteți adăuga de fapt adresa URL a site-ului pe ecranul de pornire al telefonului.

Apoi, ori de câte ori doriți să revedeți site-ul, acesta este chiar acolo, cu o pictogramă pe ecranul dvs. de pornire, la fel ca orice alte aplicații precum Facebook sau Linkedin.

Deschizând aplicația web G-SP de pe ecranul de pornire, puteți vedea că site-ul web este acum pe ecran complet, fără bara de căutare a browserului. De asemenea, există un meniu de navigare asemănător unei aplicații în partea de jos a acestuia. În plus, atunci când derulați și atingeți, se simte la fel de fin ca untul, ceea ce este diferit de o experiență de navigare pe web pe care ați avut-o înainte.

 Lectură recomandată:
- Studiu de caz G-SP PWA: o transformare pentru o experiență mobilă de top
- Top 3 cazuri de utilizare a PWA

Sfaturi pentru a spune dacă un site web este un PWA

Cu excepția cazului în care sunteți dezvoltator și nu căutați codul sursă al site-ului, nu există o modalitate sigură de a spune exact dacă un site web este construit pe tehnologia PWA.

Acestea fiind spuse, există câteva trucuri care, deși nu garantează un rezultat exact, vă pot da câteva semne că un anumit site web este un PWA.

Site cu o singură pagină

Acesta este cel mai simplu mod de a afla dacă un site web poate fi un PWA. Se bazează pe natura PWA: Progressive Web Apps sunt din punct de vedere tehnic un site web cu o singură pagină. Acest lucru nu înseamnă că un site web construit pe PWA are doar o singură pagină. Înseamnă că evenimentul de vizualizare a paginii are loc o singură dată, când un utilizator încarcă inițial site-ul web. Ulterior, toate încărcările paginilor sunt gestionate de Javascript. Acest lucru este diferit de site-urile web obișnuite, unde fiecare modificare a paginii determină o reîncărcare a paginii împreună cu întreaga sa sursă HTML.

Deci, cum funcționează asta? Ei bine, foarte simplu: aruncați o privire la fila activă a browserului dvs. Dacă site-ul este un PWA, atunci când schimbați paginile site-ul nu se reîncarcă, ceea ce înseamnă că nu există animație de „încărcare” în fila browserului.

Putem spune că site-ul The New York Times nu este un PWA:

Să aruncăm o privire pe site-ul nostru, SimiCart, ca exemplu:

Intelegi ce vreau sa spun? Site-ul nu se reîncarcă când schimbi paginile! Din punct de vedere tehnic, rămâneți doar pe o „pagină” tot timpul. De aceea, paginile PWA se încarcă atât de rapid și ușor. Toate paginile sunt pre-încărcate prima dată când vizitați site-ul și vi se livrează ulterior. Acestea nu depind de viteza rețelei dvs. și pot funcționa chiar și offline!

Lucrători de servicii

Nu, nu sunt lucrători umani. Service Workers este numele tehnologiei din spatele unei aplicații web progresive, care îi alimentează capacitatea offline, notificările push și stocarea în cache a resurselor. Potrivit Google, lucrătorii de servicii sunt în centrul tehnicilor PWA. Deci, dacă ne putem da seama dacă un site web folosește tehnologia Service Workers, putem spune dacă site-ul poate fi un PWA.

Dacă utilizați browsere bazate pe Chrome, puteți verifica acest lucru cu ușurință utilizând Instrumentul Inspector. Faceți clic dreapta pe site-ul web pe care doriți să îl verificați, faceți clic pe Inspectați element. Apoi, accesați fila Aplicație > Lucrători de servicii. Puteți vedea cu ușurință dacă există lucrători de service pe acel site.

Din nou, acest truc vă oferă doar un indiciu despre posibilitatea ca un anumit site web să fie PWA. Deși este o parte esențială a PWA, Service Workers nu este exclusiv PWA. Site-urile web non-PWA pot profita de asemenea de Service Workers pentru a-și îmbunătăți funcționalitatea.

Dacă doriți să aflați mai multe despre PWA Service Worker, avem un articol exclusiv pentru a afla totul despre această tehnologie uimitoare.

Origine securizată HTTPS

Cu toate acestea, puteți spune exact dacă un site web nu este un PWA uitându-vă la adresa URL a acestuia. Dacă adresa URL a unui site web începe cu http:// în loc de https:// , nu este o PWA. Acest lucru se datorează faptului că PWA poate funcționa numai pe site-uri web care rulează pe un domeniu securizat, care este HTTPS .

Cât de popular este PWA?

După cum sugerează Google, PWA este „viitorul aplicației mobile”, PWA câștigă popularitate, mai întâi printre jucătorii mari, apoi între întreprinderile și organizațiile mai mici.

Determină competiții aproape peste tot, de la platforma Windows până la piețele majore de aplicații, cum ar fi Google Play Store

Puteți descoperi că multe site-uri web ale numelor mari sunt PWA, cum ar fi Telegram, AliExpress, FlipBoard și chiar versiunile PWA ale jocurilor PWA familiare, cum ar fi 2048 sau Web Flap.

Beneficii PWA: Ce pot face Progressive Web Apps?

În momentul în care a fost scris acest articol, PWA poate deja să facă cele mai multe lucruri anterior exclusive pentru aplicațiile native. Aceasta include accesul la funcționalitățile la nivel de dispozitiv, cum ar fi cameră și microfon, GPS, modul offline, acces la fișiere și multe altele. Pentru a obține o imagine de ansamblu asupra de ce este capabil PWA, puteți arunca o privire la https://whatpwacando.today/ .

Prin urmare, aplicația web este o alegere excelentă pentru cei care doresc să îmbunătățească experiența mobilă a mărcii lor online, fără a investi într-o aplicație mobilă.

Să ne aprofundăm puțin în beneficiile PWA față de aplicațiile mobile normale și site-urile web responsive:

PWA vs site responsive

În comparație cu, de exemplu, un site web , un PWA este superior din următoarele motive:

• Viteză: având în vedere același conținut, PWA se încarcă mai repede decât site-urile web obișnuite datorită tehnologiei Service Workers . Este rapid la prima încărcare și chiar mai rapid la a doua încărcare, deoarece pre-memorează în cache tot conținutul și le livrează atunci când este necesar.
• Modul offline: Disponibilitatea offline este posibilă și cu tehnologia Service Workers. Cu lucrătorii de service integrați corespunzător, toate conținuturile sunt preîncărcate prima dată când vizitați PWA și sunt livrate ulterior folosind Javascript, făcând din PWA noua abordare de bază pentru site-urile web a căror experiență neîntreruptă este o necesitate . Avem un ghid despre Cum să vă faceți PWA să funcționeze offline, în cazul în care aveți vreodată nevoie de unul.
• Notificare push web: la fel ca o aplicație mobilă nativă, PWA poate trimite notificări push pe ecranul de pornire al utilizatorilor chiar din browserele web mobile. Acest lucru este util în special pentru magazinele de comerț electronic pentru a trimite oferte și oferte personalizate clienților lor. Web Push pentru PWA Android a fost activat de secole și, din fericire, va veni la PWA iOS foarte curând.
• Adăugați la ecranul de pornire : Această funcție le solicită utilizatorilor de telefonie mobilă să „instaleze” PWA. După ce utilizatorul acceptă solicitarea, PWA va fi adăugat la ecranul său de pornire mobil și va rula ca orice altă aplicație instalată. Iată ghidul nostru pentru PWA Add to Home Screen. Nu ratați!

Vechea solicitare „Adăugați la ecranul de pornire” pe Chrome va arăta cam așa:

 >> Lectură recomandată: PWA vs Responsive Website comparație completă

PWA vs aplicația nativă

Și nu numai că PWA este mai bună decât site-urile web, dar și mărcile aleg acum PWA-urile în locul aplicațiilor native din cauza următoarelor avantaje pe care le aduc PWA-urile:

• Multiplatformă : odată ce PWA este construit, acesta poate fi accesat prin orice platformă mobilă precum Android, iOS sau Windows, deoarece PWA este bazat pe browser, nu pe sistemul de operare.
• Actualizat: modificările aduse PWA vor intra în vigoare imediat, de îndată ce utilizatorii reîmprospătează pagina.
• Indexabilitate : Deoarece PWA este încă un site web din punct de vedere tehnic, conținutul său poate fi indexat și descoperit pe motoarele de căutare precum Google. Acest lucru deschide oportunități pentru practicile SEO (Search Engine Optimization), ceea ce permite PWA să ajungă la o bază mai mare de utilizatori în comparație cu aplicația nativă.
• Nu este nevoie să publicați : cu aplicațiile native, procesul de publicare în magazinele de aplicații poate fi uneori o adevărată durere. Imaginați-vă că vă trimiteți aplicația la magazinele de aplicații, așteptând cu entuziasm 5 zile, doar pentru a primi o respingere cu un motiv care vă ia de 10 ori să recitiți și încă nu știți despre ce vorbește. Și, în unele cazuri, aplicația dvs. poate să nu fie acceptată niciodată, niciodată. (Magazine de sex sau produse de vape, cineva?). Cu PWA, nu există nicio trimitere a aplicației. Ce ușurare! În cazul în care doriți să vă publicați PWA-urile în Apple Appstore, Google Play și Microsoft Store, iată cum!
• Cost redus de dezvoltare : Deoarece PWA poate fi dezvoltat o singură dată și apoi poate fi disponibil pentru orice platformă mobilă și browser care îl acceptă, costul de dezvoltare pentru PWA este relativ mic în comparație cu aplicațiile native. Un alt motiv este că PWA folosește limbaje și tehnologii de programare care sunt mai frecvent înțelese și au o bază de dezvoltatori mult mai mare.

 Lectură recomandată:
- Aplicație web progresivă vs aplicație nativă: care ți se potrivește mai bine?
- Beneficiile PWA pentru comerțul electronic

Dezavantajul PWA

Evident, toate acestea sună prea bine pentru a fi adevărate; iar când ceva pare prea frumos pentru a fi adevărat, oamenii întreabă adesea „Bine, care este problema”.

PWA, în ciuda caracteristicilor sale definitorii din industrie, are încă dezavantajele sale:

• Accesibilitate

Având în vedere că tehnologia este încă nouă și totul, nu există o piață actuală de aplicații pentru PWA, care, la rândul său, îi reduce capacitatea de a ajunge la o gamă mai largă de audiențe într-un fel. Cu toate acestea, există mișcări de la companii cunoscute, cum ar fi Microsoft, cu încorporarea lor de PWA în Microsoft Store, a face un viitor al tuturor lucrurilor PWA în Windows 10 nu pare atât de exagerat.

• Comunicarea cu alte aplicații instalate :

Deoarece PWA este încă în mod fundamental și în esență o pagină web asemănătoare unei aplicații, poate fi limitată în multe feluri. Cea mai mare limitare ar putea fi faptul că este limitată comunicabilitatea între aplicații , ceea ce ar putea reprezenta o problemă pentru dezvoltatori.

FAQ

Pentru ce se utilizează PWA?

O aplicație web rapidă, fiabilă și plăcută de utilizat poate fi folosită în mai multe scopuri. De exemplu, Tik Tok, PWA-urile Aliexpress îi fac pe oameni să se familiarizeze cu site-urile, astfel încât să-i solicite să descarce aplicațiile native. Spotify folosește PWA pentru a optimiza performanța și capacitatea de răspuns a site-ului lor în continuare, oferind astfel utilizatorilor o altă opțiune pe lângă descărcarea aplicației. Jocuri precum pacman sau 2048 folosesc, de asemenea, PWA pentru a ajunge la mai mulți utilizatori web.

Care este diferența dintre PWA și o aplicație obișnuită?

Din punct de vedere tehnic, o aplicație nativă trebuie să fie descărcată din magazinul său de aplicații, în timp ce puteți accesa PWA prin browser web. Din punct de vedere al afacerii, PWA poate fi mai prietenos cu SEO, mai ieftin și mai rapid de dezvoltat. Între timp, o aplicație nativă este încă cea mai bună pentru proiecte mobile complicate, de asemenea, poate crea o credibilitate mai puternică a mărcii.

PWA funcționează numai pe dispozitive mobile?

Nu, PWA funcționează atât pe desktop, mobil și tabletă.

Care este limbajul de programare al PWA?

PWA este construit cu un limbaj de programare popular și tehnologii web, inclusiv HTML, CSS, Javascript și WebAssembly.

Concluzie

„PWA va înlocui aplicațiile native?”

Credem că nu.

Inca.

În al patrulea trimestru al anului 2019, există aproape 3 milioane de aplicații pe Google Play și peste 2 milioane de aplicații în Apple App Store (Statista, 2019). Acest număr este în continuare în creștere și nu se pare că toate acele aplicații vor fi înlocuite în curând. Obiceiul utilizatorului este un lucru și nu este ușor de schimbat.

Acestea fiind spuse, Progressive Web Apps au un mare potențial. La SimiCart, credem că Progressive Web Apps este viitorul. Cu viteza, flexibilitatea aspectului și capacitatea sa de caracteristici, PWA este destinat să înlocuiască site-ul desktop, site-ul mobil, aplicațiile mobile native și chiar aplicațiile Windows native. Da, ai auzit bine, aplicații Windows . Numai în lumea comerțului electronic, Progressive Web App este în prezent abordarea de bază pentru proprietarii de magazine care doresc o experiență ușoară, receptivă și captivantă pentru cumpărătorii online.

De fapt, statisticile arată că o întârziere de o lună în implementarea PWA poate duce la pierderi de până la 1,4 milioane de dolari în venituri și alte 6,8 milioane de dolari dacă mărcile decid să o amâne cu șase luni.

Pentru proprietarii de magazine de comerț electronic care caută o soluție Magento PWA perfectă, aici, la SimiCart, oferim un pachet complet pentru tine și magazinul tău.