Facebook PWA: Ce trebuie să știți

Platforma de social media cu cea mai rapidă creștere la nivel global s-a alăturat oficial transformării PWA. Cel mai recent articol al nostru vă vine cu un studiu de caz mult dorit al Facebook PWA.

Vom detalia de ce a trebuit Facebook să treacă la un PWA și ce rezultate le-a adus PWA acestei gigantice companie de tehnologie. Să intrăm direct.

O privire de ansamblu asupra Facebook

În 2004, Mark Zuckerberg, absolvent de Harvard, a fondat Facebook cu misiunea de a construi o comunitate în care oamenii din întreaga lume să se poată conecta, să împărtășească opinii și să interacționeze între ei în cadrul postărilor. Iar restul este istorie.

Încă astăzi, Facebook îi ajută pe oameni să rămână conectați, să primească actualizări zilnice de la prieteni și familie și să descopere ce se întâmplă în lume.

În prezent, este cea mai mare platformă de socializare de pe această planetă, cu aproximativ 2,93 miliarde de utilizatori activi lunar, date preluate din primul trimestru al anului 2022.

Spre deosebire de LinkedIn sau Twitter cu un anumit segment țintă, Facebook a crescut pentru că nu se limitează la niciun grup, ci ajunge la o varietate de oameni, satisfacând multe tipuri de nevoi și conținut, încorporând numeroase aspecte media diferite.

Rolul PWA în viitor

Ce ar trebui să știm despre PWA când auzim povestea Facebook care își lansează versiunea PWA? În primul rând, este vorba despre prezența PWA în viitor.

Nu este o întrebare dacă, ci o chestiune de când proprietarii de site-uri web vor începe să integreze sau să construiască PWA. Pentru că pur și simplu, dacă Facebook, Twitter, Uber, Tinder, Starbuck, AliExpress și Alibaba adoptă toate PWA în strategia lor digitală, trebuie să fie un lucru.

În al doilea rând, știm că PWA este încă relativ proaspăt, așa că performanța sa poate fi în urmă în comparație cu aplicațiile native. Dar 95% dintre funcțiile native ale Facebook pot fi recreate pentru PWA, iar dezvoltatorii sunt optimiști cu privire la această transformare.

Se preconizează că va fi un lucru de mâine. Aproape orice aplicație ar putea fi deja integrată într-un PWA. Lista de funcții PWA continuă să se extindă la acele aplicații native și multe altele.

Pentru a vă îndepărta de tot zgomotul ineficient din jurul PWA, cu cuvinte la modă și afirmații bizare, iată valoarea pe care o aduce lumii.

PWA se naște sub conceptul de a face web-ul un loc mai bun pentru a petrece timp, pentru a-l face semnificativ pentru grupurile de oameni care contează.

Există o tendință uriașă în aplicația zilnică de a folosi obiceiuri pentru utilizatorii finali. Majoritatea oamenilor folosesc până la maximum 6 aplicații și interacționează serios cu 2-3 aplicații numai în fiecare zi.

Deci, utilizatorii nu au nevoie de mai multe aplicații, deoarece datele arată că cea mai mare frustrare a lor față de aplicații este consumul de spațiu de stocare prea mare. De aceea, faptul că utilizatorii stau pe o singură platformă ușoară și totuși creând un impact de durată cu aceștia face ca aplicațiile native să rămână scurte.

Când utilizatorii preferă PWA, economisește efortul și resursele companiilor și dezvoltatorilor pentru a produce o prezență online profitabilă.

Este mai logic să ai o experiență perfectă pe toate dispozitivele decât să fii nevoit să accepti 2 aplicații native separate plus un site web.

În plus, construirea unui PWA încă funcționează chiar dacă mărcile dețin deja o aplicație nativă, doar că este potrivită pentru nume mari. Asta i-ar ajuta să atragă toate perspectivele posibile în mijlocul debutului PWA.

Provocările Facebook înainte de integrarea PWA

Spre surprinderea și încântarea multor oameni, Facebook a renunțat la dezvoltarea aplicației sale web pentru mobil în 2020. S-a spus că aplicația originală nu este suficient de ușor de utilizat, iar Facebook a căutat o șansă de a trece la PWA.

Cele două situații împărțite au fost închise la scurt timp de experiența de tip aplicație a PWA care rulează peste browsere. Acesta evoluează în avânt, devenind o alternativă fezabilă la aplicațiile native pentru mulți în ultimii ani.

Facebook poate spune, de asemenea, că tehnologia este pe cale să domine peisajul digital, în special în comerțul electronic. Cu toate acestea, ca aplicație web, PWA este încă nou și are nevoie de mai multă muncă asupra funcționalităților sale.

Rezultatele PWA Facebook

Despre Design

Există o ușoară modificare în designul siglei Facebook PWA și non-PWA atunci când apare pe ecranul de pornire. Pe desktop, cel obișnuit este afișat cu un marcaj Chrome în partea de jos, în timp ce PWA arată exact ca o pictogramă de aplicație nativă.

Cu un non-PWA, obțineți vechea vizualizare a filei noi, cu o bară de meniu și adrese de top. Experiența diferă cu PWA când veți vedea un ecran de deschidere înainte ca site-ul real să apară și să înceapă să se încarce, exact ca o aplicație. Browserul dispozitivului este în continuare cel care se ocupă de lucru, dar apare într-un mod care seamănă mai mult cu o aplicație fără bara de sus.

Facebook PWA rulează independent în comutatorul de prezentare generală pentru ca dvs. să continuați afacerea anterioară. În afară de asta, nu există multe diferențe în ceea ce privește conținutul sau aspectul.

Despre experiența utilizatorului

• Viteza de încărcare: rapidă și lină
• Tranziția între pagini și elemente: receptiv cu apariție instantanee
• Experiența generală: ușoară, simplă și rapidă

7 sfaturi pentru a construi un PWA ca Facebook

Principiul KISS (Păstrați-l simplu, prost)

Ecranul mobil este mult mai mic și consumă mult mai puține date și energie decât desktopul. Aceasta înseamnă că dezvoltatorii ar avea mai puțin conținut cu care să lucreze.

Așa că păstrați-l simplu, esențial și util. Lăsați încăperea pentru anumite spații, în loc să le conduceți pentru a fi copleșiți de designul dvs. Faceți un test A/B pentru a elimina elementele inutile, ceea ce duce la puncte de angajare scăzute.

Utilizarea fonturilor complicate poate costa multă putere de încărcare a site-ului, încetinind astfel procesul. O regulă generală este să acordați prioritate fonturilor implicite atunci când puteți.

Facebook a reușit acest lucru cu vechiul font Helvetica, astfel încât atenția să poată atrage asupra postărilor oamenilor fără a pierde elementele de identitate a mărcii.

Asigurați o navigare lină

O prioritate bună în prealabil este evitarea simultană a tuturor factorilor de interacțiune bazați pe web, cum ar fi anteturile sau subsolurile. Folosind Facebook fie în aplicație, fie în browserul mobil, veți descoperi că totul rămâne la fel acolo unde vă așteptați să fie.

În loc de funcționalitățile browserului, faceți-l să depășească cu un mod fără margini și tratați-vă PWA la fel ca și construiți o aplicație nativă.

Deși gesturile tactile ar trebui folosite cu piese de schimb, acestea nu sunt neapărat dorite în timp ce sunt dificil de executat.

Funcționalitate cross-browser

Merită să luați în considerare capacitatea fiecărui browser cu funcțiile PWA pentru a evalua compatibilitatea acestora în faza de proiectare.

Chrome și Firefox sunt cele două browsere care acceptă cel mai mult funcționalitățile PWA, în timp ce Safari refuză în continuare să sprijine lucrătorii de service în PWA.

Lipsa acestei tehnologii de bază PWA a dus la lipsa funcțiilor primare, cum ar fi notificările push și navigarea offline. Puteți vedea în continuare Facebook PWA pe toate produsele Apple, dar nu este optimizat ca în alte browsere.

Păstrați un mod offline Snoop

Cu toții ne amintim de infamul Google Dinozaur care ne ține ocupați și distrați cu privire la motivul pentru care conexiunea la internet este oprită. Același truc se poate aplica aici atunci când conținutul are nevoie de puțin mai mult timp pentru a se încărca.

Înlocuirea rotorului de încărcare cu altceva mai puțin frustrant, ceva care îi face să uite de încărcare îi va face să creadă că site-ul este mai rapid decât este.

O altă utilizare excelentă pentru a face încărcarea să pară mult mai scurtă sunt ecranele Skeleton, care aruncă utilizatorilor o privire la ce și la ce să nu se aștepte, în același timp, ghidându-i către fiecare punct de interes de pe pagină. Cu toate acestea, nu lăsați afară Service Workers, care permit site-ului dvs. să stocheze date generate de utilizatori și să le memoreze în cache în mod corespunzător, fără o conexiune la internet.

Optimizați pentru SEO

Când Google actualizează algoritmii, există un nou set de reguli de urmat pentru a se clasa de către motorul de căutare. Așadar, proiectați-vă pagina atât în ​​favoarea accesării cu crawlere a mașinii, cât și a vizitatorilor reali din spatele ecranului. Fiecare ar trebui să fie disponibil printr-o adresă URL.

Fără ajutorul PWA, postările de pe Facebook cu greu pot apărea pe toate motoarele de căutare pentru cuvintele cheie relevante. Ei tind să fie foarte prezentați în primele poziții.

Iată câteva puncte de observat pentru un site prietenos cu SEO:

• Conținutul redat pe partea de server este necesar pentru valul inițial de indexare și utilizați-l ori de câte ori este posibil. Când nu este, vă puteți baza pe servicii de redare dinamică furnizate de terți.
• Specificați adresa URL canonică prin etichete canonice pe fiecare pagină.
• Evitați disimularea de către roboții de căutare sau difuzarea aceluiași conținut.
• Asigurați-vă că site-ul dvs. este încărcat rapid în 5 secunde, crescând timpul pe pagină și foarte securizat.

Funcționează cu diferite tipuri de intrări

Dacă intenționați să proiectați declanșatorul pentru o interacțiune cu efect de hover, asigurați-vă că utilizatorii dau clic sau ating pentru a-l activa. Nu uitați să utilizați elementele semantice precise și HTML non-semantic și veți fi acoperit.

Un alt lucru este să păstrați zona pentru tastatură departe de camera pentru mesaje, ceea ce este obișnuit atunci când PWA este în vizualizare peisaj. Facebook PWA a făcut o treabă fantastică pentru a se asigura că utilizatorii săi primesc interacțiuni exacte pe diferite dispozitive.

Validați-vă PWA cu instrumentul Google Lighthouse

Când trebuie să evaluați performanța PWA în timpul procesului de realizare sau după lansare, vă puteți baza pe Lighthouse, un site web de auditare a instrumentelor open-source de la Google. Lighthouse clasifică site-urile web pe baza a 5 parametri pe o scară de la 1 la 100.

Numele mari testează întotdeauna pe măsură ce se dezvoltă pentru a se asigura că totul este acoperit. PWA este, de asemenea, un factor utilizat pentru a clasifica dacă un site web este PWA.

Și când este sigur, PWA va fi măsurat în diverși termeni de viteză, securitate, design receptiv, cache, performanță offline, indexare, notificări push și experiență de utilizator.

Recomandări cheie

Pentru a scoate în evidență tot ce este mai bun din ambele lumi, adoptând cele mai bune aplicații native pe site-uri web, permițând astfel PWA un avantaj imens în viitorul apropiat. Viitorul peisajului online compromite impactul PWA.

Rolul de pionierat al Facebook PWA a accelerat cu siguranță revoluția PWA, în timp ce le-a readus o experiență ușoară și o platformă robustă pentru ca utilizatorii de pe tot globul să se alăture conversației, în ciuda diferenței în capacitatea de conexiune la internet.

Dacă sunteți în căutarea unui nume de expert care să vă ofere un sentiment complet de fiabilitate pentru a vă ajuta să vă ocupați de transformarea PWA, Tigren este cel de care aveți nevoie.

Discutați cu noi astăzi pentru servicii PWA de comerț electronic premium de înaltă calitate, care vin la dvs. la un preț rezonabil. Începeți să câștigați bani mai devreme și creșteți-vă rentabilitatea investiției astăzi.