Twitter PWA: Ce trebuie să știți

Publicat: 2022-07-03

Decalajul tehnologic dintre companiile de top și companiile mici care urmează nu a fost niciodată mai aproape. Cu aplicația web progresivă, unul dintre cei mai mari contributori este capacitatea financiară a fost redusă enorm. Prin aplicarea utilizării noi și avansate a tehnologiei aplicației web, care trebuie să menționeze profund lucrătorii de servicii, companiile de toate dimensiunile pot adapta PWA la propriile nevoi funcționale și bugete. Dacă sunteți în căutarea inspirației din marile adopții PWA din lume, studiul de caz de mai jos pe Twitter PWA este ceva ce nu poate fi ratat.

Cuprins

Povestea Twitter înainte de integrarea PWA

În aprilie 2017, Twitter Lite, noua îmbunătățire a site-ului său pe browserul mobil, a fost lansată după o colaborare cu Google. Numele provine de la faptul că este construit pentru a fi mai ușor, mai rapid și mai utilizabil.

Până în prezent, Twitter este al treilea cel mai popular site de socializare din SUA și al 15-lea ca popular la nivel mondial. Deși majoritatea demografică a utilizatorilor lor se află în SUA, Japonia și India sunt cei mai mari reprezentanți ai utilizatorilor Twitter care, combinate, depășesc numărul de utilizatori din SUA.

Povestea Twitter Lite trebuie datată din 2010 până în 2017, Twitter fiind pe cale să devină cel mai important site de socializare din lume.

Twitter a avut un început dur în comparație cu cea mai mare rivalitate a lor, Facebook, în primele zile. Cu toate acestea, din 2010 încoace, pasărea albastră a asistat la o priveliște minunată pe grafic, o creștere constantă trimestru cu trimestru. Între 2015, 2016 și 2017, ritmul de creștere a încetinit.

Recunoscând potențialul din afara SUA, Twitter ajungea rapid pe piața internațională.

De îndată ce Google a introdus PWA, Twitter a știut cum se poate extinde și obține noi utilizatori. Twitter Lite a fost răspunsul lor final, dedicat țărilor emergente cu conexiuni de rețea nesigure. Noul Twitter PWA ocupă mai puțin de un megaoctet de stocare în timp ce funcționează cu modul optimizat de economisire a datelor. Imagini și videoclipuri într-o previzualizare neclară până când utilizatorii dau clic pe ele.

Nicolas Gallagher, directorul de inginerie la Google pentru Twitter Lite, a declarat: „Twitter Lite este acum cel mai rapid, mai puțin costisitor și mai fiabil mod de a folosi Twitter”. Succesul Twitter Lite a făcut titluri pentru multe articole despre PWA.

Soluția celui mai mare PWA din lume – Twitter PWA

Pentru a vă ajuta cu cunoștințele acționale despre dezvoltarea PWA, mai jos vor fi furnizate puncte cruciale despre cadrul Twitter PWA sau Twitter Lite și metode inovatoare personalizate pentru solicitările la cerere.

Observați că întregul scop al Twitter Lite este acela de a asigura utilizatorilor o experiență excelentă pe site, indiferent de conexiunile slabe la internet, ceea ce duce la vizite ulterioare și la conversia vizitatorilor în utilizatori frecventi. Datorită capacității de a promova viteza, fiabilitatea și securitatea PWA, o puteți experimenta pe mobile.twitter.com.

Idee de arhitectură

Twitter Lite, în esență, este un server Node.js simplu, de dimensiuni umile și o aplicație de JavaScript pe partea clientului. PWA va permite construirea de API pentru stocarea și stocarea în cache a datelor. Serverul se va ocupa mai întâi de procesul de autentificare, va asambla prima stare a aplicației și va transforma codurile web în pagini interactive prin redarea HTML inițială în shell-ul aplicației.

Odată încărcate în fundal, datele vor fi solicitate direct din API-ul Twitter. Simplitatea acestei arhitecturi ajută Twitter PWA să ofere un serviciu remarcabil și de încredere în eficiență, chiar și la o scară de amploare.

Performanță de proiectare

Ușor de utilizat este una dintre prioritățile de top pentru Twitter Lite. Milioane, dacă nu sute de milioane de utilizatori, ar accesa această rețea de socializare în fiecare lună. Așa că doresc să creeze o călătorie a utilizatorului care este foarte utilizabilă în orice circumstanțe de conectivitate.

Dezvoltatorii au folosit o serie de pârghii de performanță incrementale, modelul PRPL, combinat cu cele mai recente actualizări de la browserele moderne, pentru a construi Service Worker, Web Push Notifications, IndexedDB și Web App Install Banners. Toate au făcut parte din viteza impresionantă de încărcare și independența față de conexiune.

Utilizarea Datelor

Bazându-se pe resursele stocate în cache pentru a furniza date mai mici în avans, împreună cu modul de salvare a datelor, Twitter Lite este setat în mod inerent să minimizeze utilizarea datelor, rezultând o deducere de 40% pe pagina cronologică. Pentru a încărca imaginea optimizată la cerere, se efectuează o solicitare HEAD pentru a-i afișa dimensiunea printr-un clic pe buton.

Încărcare progresivă

După turnarea răspunsului HTML inițial către browser, sunt trimise instrucțiuni pentru a preîncărca resursele cruciale pentru ca serverul să asambla starea interactivă. Scripturile sunt sparte în bucăți fine folosind webpack pentru a se încărca numai atunci când sunt solicitate.

Cu alte cuvinte, încărcarea inițială de la Twitter Lite este excepțional de rapidă, deoarece doar necesitatea vederii vizibile este efectuată, în timp ce un lucrător de service va precachea resurse suplimentare pentru a permite aspectul aproape instantaneu și tranziția lină în interacțiunile viitoare.

Disponibilitate offline

La fel ca aplicația sa nativă, un lucrător de servicii face posibilă utilizarea temporară offline. Toate paginile încărcate anterior sunt redeschise instantaneu prin memorarea în cache în shell-ul aplicației HTML, activele statice și unele emoji-uri cele mai comune.

Butonul „Reîncercați” este furnizat atunci când există o eroare în încărcarea datelor sau a scripturilor pentru a vă asigura că problema va fi rezolvată. Pur și simplu activând navigarea offline, viteza de încărcare la pornire și vizitele ulterioare este mult îmbunătățită.

Redare

Uitați de munca costisitoare de randare; Twitter Lite a fost optimizat pentru randarea componentelor. Cu toate acestea, problema mai mare constă în complexitatea Tweet-urilor cu listele infinite de cerințe pentru performanță suplimentară.

Apoi s-au gândit la o componentă de listă virtualizată care făcea doar conținut vizibil pentru vizualizarea prezentată mai sus și păstrat pentru defilarea pe ecrane. O altă actualizare a fost prin amânarea redării neesențiale în modul inactiv și economisirea consumului de date de către API-ul requestIdleCallback.

Sisteme și viteză duplicată

Twitter Lite este un sistem de design receptiv construit pe baza detaliilor componentelor pentru ca aplicația să se conformeze oricăror solicitări de formă. Lucrul cu componentele UI a eliberat spațiu pentru o iterație rapidă și reutilizarea blocurilor de construcție stabilite. De asemenea, merită menționat faptul că flexbox-ul este foarte bine bazat pentru designul aspectului, un număr limitat de culori, dimensiuni de font și lungimi.

Rezultatul Twitter PWA

Site-ul pentru mobil și desktop

Se pretinde că Twitter PWA devine interactiv de cel puțin 5 secunde pe majoritatea dispozitivelor cu o rețea 3G. Versiunea Lite se încarcă cu 30% mai rapid și economisește până la 70% din utilizarea datelor, reducând în același timp timpul de întârziere până la interactivitate cu mai mult de 25%.

În comparație cu vechea aplicație nativă, Twitter PWA ocupă doar maximum 3% din dimensiune, o fracțiune din spațiul de stocare al dispozitivului. Cu toate acestea, funcționează profund și puternic. Timeline, una dintre cele mai complexe caracteristici, poate fi construită dintr-un număr limitat de 30 de linii de configurare a codului în timp ce atașați un modul Redux la o componentă React, conținut mixt.

PWA funcționează foarte asemănător cu aplicația nativă, cu funcții standard, cum ar fi un feed obișnuit, ferestre pop-up de notificare push, mesagerie directă și file de căutare. Tranziția este receptivă între pagini și elemente, deși răspunsul la atingere este raportat că este mai lent decât aplicațiile sale native. Dezvoltatorii încă lucrează la îmbunătățirea gradului de utilizare și a responsabilității în versiunile viitoare.

Totul este destul de favorabil cu versiunea desktop, funcționând bine în ferestre înguste, în comparație cu vechile aplicații oficiale Twitter neglijate atât în Mac, cât și în Windows. Întreaga experiență se simte relativ ușoară și relaxată de utilizat.

Twitter Lite acceptă în prezent până la 42 de limbi, iar funcția Globalize a fost creată pentru a evidenția numerele, datele și mesajele care se potrivesc localnicilor.

Rezultatele în cifre

Creștere cu 65% a paginilor pe sesiune
Creștere cu 75% a numărului de Tweeturi trimise
Scădere cu 20% a ratei de respingere

Cum a devenit Twitter PWA una dintre cele mai rapide PWA?

Odată cu modificarea funcțională a cunoștințelor existente ale lucrătorilor din service, împreună cu optimizarea pentru un consum mai mic de date, PWA este conectat pentru a gestiona o viteză mai mare de încărcare și apare aproape instantaneu la vizitele ulterioare, atât la început, cât și în timpul călătoriei.

Optimizarea pentru viteză nu va fi într-o zi sau două, ci un proces repetitiv de testare, urmărire, măsurare, încercare de a înțelege de ce se întâmplă și aplicarea posibilelor soluții. Munca asupra performanței este un cerc vicios de urmărire, măsurare și îmbunătățire ici și colo.

Acestea fiind spuse, Twitter Lite este o acumulare de mici îmbunătățiri și actualizări la încărcarea primei pagini, randarea componentelor React, prevenirea redării și așa mai departe. Fiecare se referă la îmbunătățirea performanței în ansamblu și la tot efortul mic pentru ceea ce vedem acum, una dintre cele mai mari și mai rapide adoptări PWA din lume.

Desigur, pentru a menține acest titlu, dezvoltatorii trebuie să lucreze în mod constant pentru a se asigura că totul este sub control și pentru a evolua procesul către ceva și mai bun dacă există o șansă.

Întrebări frecvente despre Twitter PWA și PWA

Este Twitter un PWA?

Absolut. Twitter a lansat noua versiune a aplicației web progresive în colaborare cu dezvoltatorii Google în 2017. Twitter PWA se numește Twitter Lite, iar construcția sa se concentrează pe deservirea utilizatorilor internaționali care pot experimenta adesea conexiuni instabile în comparație cu SUA.

Este costisitor să construiești un PWA ca Twitter PWA?

Se spune că Twitter PWA este cea mai ieftină versiune a tuturor oficialilor Twitter, dar funcționează minunat în diferite browsere și chiar seamănă cu unele dintre cele mai bune caracteristici ale aplicației native.

Twitter PWA este o combinație de optimizare excelentă a performanței și aplicare de clasă mondială a tehnologiei moderne PWA. Acestea fiind spuse, construirea unui PWA excepțional precum Twitter Lite depinde în mare măsură de echipa de dezvoltare pe care o angajați sau la care externalizați.

PWA este cea mai bună alternativă posibilă la aplicațiile native și a prezis în mod popular viitorul site-urilor web. Deci, dacă companiile online caută o modalitate de a-și valorifica rata de conversie prin îmbunătățirea călătoriei clienților la fața locului, renunțați la aplicațiile native grele și costisitoare și căutați în schimb PWA.

De unde să începi cu dezvoltarea PWA a afacerii tale?

Ei bine, totul ar trebui să înceapă cu locul în care se află afacerea dvs., de ce are nevoie și unde doriți să fie. Are sens? Pentru că nu vrei să pierzi bani și timp prețios pentru ceva irelevant, nu?

Următorul pas crucial este să decideți dacă PWA s-ar potrivi în strategia dvs. de afaceri. Aproape toată lumea caută modalități de a-și crește traficul pe site, de a-și îmbunătăți ratele de conversie sau de a-și valorifica valoarea unitară. Și o agenție de dezvoltare PWA vă poate ajuta cu toate acestea.

Ele vă pot ajuta să detectați problema în orice zone cu performanțe scăzute pe site-ul dvs. Dacă nu puteți găsi cea mai bună soluție, apelați la un serviciu de consultanță sau de examinare.

Și atunci ajungem la următorul pas: alegeți un furnizor de servicii de dezvoltare PWA de încredere. Ai nevoie de un nume cu ani de experiență, care să convingă o echipă dinamică de dezvoltatori care se străduiește să obțină ce este mai bun pentru clienții lor și, desigur, cunoștințele și abilitățile excelente necesare pentru a crea un PWA extrem de funcțional și bogat în funcții.

Tigren este agenția de outsourcing lider la nivel mondial în care mii de IMM-uri globale au avut încredere în ultimul deceniu. Suntem o echipă de oameni tineri, aspiranți și dedicați, aleși dintre cei mai performanti din industria lor.

Suntem specializați în dezvoltarea comerțului electronic, în special cu serviciile de dezvoltare Magento și PWA. Dorim să vă aducem cea mai bună ofertă pe care nu o puteți găsi altundeva, să vă asistăm până la final și să îndepliniți scopul pentru care vii la noi.

Puteți conta pe noi dacă aveți nevoie fie de o soluție eficientă și rentabilă pentru:

Dezvoltare PWA de comerț electronic complet de la zero
Dezvoltare parțial eCommerce PWA
Soluții încorporate și îmbunătățiri ale unui PWA de comerț electronic existent
Teme/pluginuri/extensii PWA de comerț electronic premium gata de utilizare

dezvoltarea site-ului web de afaceri online

Recomandări cheie

Noul Twitter PWA aduce o gură de aer proaspăt lumii web mobile plictisitoare și iresponsive. Parteneriatul puternic dintre Twitter și Google și-a plătit faima printr-o adoptare transformațională, depășind toate preocupările și îndoielile cu privire la potențialul PWA. Fiți un utilizator de succes al PWA, începeți să vă răsfățați utilizatorii online și împingeți-vă creșterea rentabilității investiției cu Tigren astăzi, înainte de a fi prea târziu.