Twitter PWA: co musisz wiedzieć

Luka technologiczna między czołowymi firmami a małymi firmami następczymi nigdy nie była bliższa. Dzięki progresywnej aplikacji internetowej jednym z największych wkładów jest znaczne ograniczenie możliwości finansowych. Stosując nowe i zaawansowane wykorzystanie technologii aplikacji internetowych, która musi koniecznie wspomnieć o pracownikach serwisowych, firmy każdej wielkości mogą dostosować PWA do własnych potrzeb funkcjonalnych i budżetów. Jeśli szukasz inspiracji ze świetnych światowych zastosowań PWA, poniższe studium przypadku na Twitterze PWA to coś, czego nie możesz przegapić.

Historia Twittera przed integracją z PWA

W kwietniu 2017 r., po współpracy z Google, uruchomiono Twitter Lite, nowe ulepszenie witryny w przeglądarce mobilnej. Nazwa wzięła się z faktu, że jest lżejsza, szybsza i bardziej użyteczna.

Po dziś dzień Twitter jest trzecim najpopularniejszym serwisem społecznościowym w USA i piętnastym najpopularniejszym na świecie. Chociaż większość ich demograficznych użytkowników znajduje się w Stanach Zjednoczonych, Japonia i Indie są dwoma największymi przedstawicielami użytkowników Twittera, którzy łącznie przekraczają liczbę użytkowników z USA.

Historia Twitter Lite musi sięgać lat 2010-2017, a Twitter jest na dobrej drodze, by stać się najpopularniejszym serwisem społecznościowym na świecie.

Twitter miał trudny początek w porównaniu z ich największą rywalizacją, Facebookiem, na początku. Jednak od 2010 r. niebieski ptak był świadkiem wspaniałego widoku na wykresie, stałego wzrostu z kwartału na kwartał. W latach 2015, 2016 i 2017 tempo wzrostu uległo spowolnieniu.

Dostrzegając potencjał poza Stanami Zjednoczonymi, Twitter szybko docierał na rynek międzynarodowy.

Gdy tylko Google wprowadził PWA, Twitter wiedział, jak może się rozwijać i pozyskiwać nowych użytkowników. Twitter Lite był ich ostateczną odpowiedzią, dedykowaną krajom wschodzącym z zawodnymi połączeniami sieciowymi. Nowy Twitter PWA zajmuje mniej niż megabajt pamięci, a jednocześnie działa w zoptymalizowanym trybie oszczędzania danych. Obrazy i filmy w niewyraźnym podglądzie, dopóki użytkownicy ich nie klikną.

Nicolas Gallagher, kierownik ds. inżynierii w Google ds. Twittera Lite, stwierdził: „Twitter Lite to obecnie najszybszy, najtańszy i najbardziej niezawodny sposób korzystania z Twittera”. Sukces Twittera Lite trafił na nagłówki wielu artykułów dotyczących PWA.

Rozwiązanie największego na świecie PWA – Twitter PWA

Aby pomóc Ci w uzyskaniu praktycznej wiedzy na temat rozwoju PWA, poniżej zostaną przedstawione kluczowe punkty dotyczące struktury Twitter PWA lub Twitter Lite oraz innowacyjne metody dostosowane do żądań na żądanie.

Zwróć uwagę, że całym celem Twitter Lite jest zapewnienie użytkownikom doskonałego doświadczenia na stronie, niezależnie od słabych połączeń internetowych, co prowadzi do kolejnych wizyt i przekształcania odwiedzających w częstych użytkowników. Dzięki możliwości zwiększania szybkości, niezawodności i bezpieczeństwa PWA możesz tego doświadczyć na mobile.twitter.com.

Pomysł na architekturę

Twitter Lite, w swej istocie, jest prostym serwerem Node.js o skromnych rozmiarach i aplikacją JavaScript po stronie klienta. PWA umożliwi budowę API do buforowania i przechowywania danych. Serwer najpierw zajmie się procesem uwierzytelniania, zmontuje najwcześniejszy stan aplikacji i przekształci kody internetowe w strony interaktywne poprzez początkowe renderowanie HTML w powłoce aplikacji.

Po załadowaniu w tle dane będą pobierane bezpośrednio z interfejsu API Twittera. Prostota tej architektury pomaga Twitterowi PWA zapewnić wyjątkową i niezawodną usługę o wydajności nawet na dużą skalę.

Projektowanie wydajności

Łatwy w użyciu jest jednym z głównych priorytetów Twittera Lite. Miliony, jeśli nie setki milionów użytkowników, co miesiąc uzyskują dostęp do tej sieci społecznościowej. Chcą więc stworzyć ścieżkę użytkownika, która jest wysoce użyteczna w każdych okolicznościach łączności.

Deweloperzy wykorzystali szereg przyrostowej dźwigni wydajności, wzorzec PRPL, w połączeniu z najnowszymi aktualizacjami nowoczesnych przeglądarek, aby zbudować Service Worker, powiadomienia Web Push, IndexedDB i banery instalacji aplikacji internetowych. Wszystkie one były częścią imponującej szybkości ładowania i niezależności od połączenia.

Wykorzystanie danych

Opierając się na zasobach z pamięci podręcznej do obsługi mniejszych danych z góry, wraz z trybem zapisywania danych, Twitter Lite jest z natury ustawiony tak, aby minimalizować wykorzystanie danych, co skutkuje 40% odliczeniem na stronie osi czasu. Aby załadować zoptymalizowany obraz na żądanie, wykonywane jest żądanie HEAD w celu wyświetlenia jego rozmiaru za pomocą kliknięcia przycisku.

Ładowanie progresywne

Po przesłaniu początkowej odpowiedzi HTML do przeglądarki wysyłane są instrukcje wstępnego załadowania kluczowych zasobów dla serwera w celu utworzenia stanu interaktywnego. Skrypty są rozbijane na drobne kawałki za pomocą webpacka, który ładuje się tylko wtedy, gdy zostaniesz o to poproszony.

Innymi słowy, początkowe ładowanie z Twitter Lite jest wyjątkowo szybkie, ponieważ przeprowadzana jest tylko konieczność widocznego widoku, podczas gdy pracownik serwisu wstępnie buforuje dodatkowe zasoby, aby umożliwić niemal natychmiastowy wygląd i płynne przejście w przyszłych interakcjach.

Dostępność offline

Podobnie jak jego natywna aplikacja, Service Worker umożliwia tymczasowe korzystanie w trybie offline. Wszystkie wcześniej załadowane strony są natychmiast ponownie otwierane dzięki buforowaniu w powłoce aplikacji HTML, zasobom statycznym i niektórym najczęstszym emotikonom.

Przycisk „Ponów” jest dostępny, gdy wystąpi błąd podczas ładowania danych lub skryptów, aby zapewnić, że problem zostanie rozwiązany. Wystarczy włączyć przeglądanie w trybie offline, szybkość ładowania podczas uruchamiania i kolejnych wizyt znacznie się zwiększa.

Wykonanie

Zapomnij o kosztownych pracach renderujących; Twitter Lite został zoptymalizowany pod kątem renderowania komponentów. Jednak większy problem tkwi w złożoności tweetów z nieskończoną listą wymagań dotyczących dodatkowej wydajności.

Następnie pomyśleli o zwirtualizowanym komponencie listy, który renderował zawartość widoczną tylko dla widoku przedstawionego powyżej i zachowaną do przewijania na ekranach. Kolejna aktualizacja polegała na odroczeniu renderowania niekluczowego do trybu nieaktywnego i zapisaniu zużycia danych przez requestIdleCallback API.

Systemy i zduplikowana prędkość

Twitter Lite to responsywny system projektowania zbudowany na podstawie szczegółów komponentów, aby aplikacja była zgodna z dowolnymi żądaniami kształtu. Praca z komponentami interfejsu użytkownika pozwoliła zwolnić miejsce na szybką iterację i ponowne wykorzystanie ustalonych bloków konstrukcyjnych. Warto również wspomnieć, że flexbox jest mocno uzależniony od projektowania układu, ograniczonych liczb ustalonych na kolory, rozmiary czcionek i długości.

Wynik Twittera PWA

Witryna mobilna i komputerowa

Twierdzi się, że Twitter PWA jest interaktywny już przez 5 sekund i mniej na większości urządzeń z siecią 3G. Wersja Lite ładuje się o 30% szybciej i oszczędza do 70% wykorzystania danych, jednocześnie redukując opóźnienie między interakcją o ponad 25%.

W porównaniu ze starą natywną aplikacją Twitter PWA zajmuje maksymalnie 3% rozmiaru, co stanowi ułamek miejsca w pamięci urządzenia. A jednak działa głęboko i potężnie. Osie czasu, jedna z najbardziej złożonych funkcji, mogą być skonstruowane z ograniczonych 30 linii kodu konfiguracyjnych, dołączając moduł Redux do komponentu React, zawartość mieszana.

PWA działa bardzo podobnie do aplikacji natywnej, ze standardowymi funkcjami, takimi jak zwykły kanał, wyskakujące okienka powiadomień push, wiadomości bezpośrednie i zakładki wyszukiwania. Przejście jest responsywne na stronach i elementach, chociaż reakcja na dotyk jest zauważalnie wolniejsza niż w aplikacjach natywnych. Deweloperzy wciąż pracują nad zwiększeniem użyteczności i odpowiedzialności w przyszłych wydaniach.

Wszystko jest całkiem korzystne w wersji na komputery stacjonarne, która działa dobrze w wąskich oknach, w porównaniu ze starymi zaniedbanymi oficjalnymi aplikacjami Twittera zarówno na Macu, jak i Windowsie. Całe doświadczenie wydaje się stosunkowo lekkie i zrelaksowane w użyciu.

Twitter Lite obsługuje obecnie do 42 języków, a funkcja Globalize została stworzona, aby wyświetlić liczby, daty i wiadomości pasujące do mieszkańców.

Wyniki w liczbach

• 65% wzrost liczby stron na sesję
• 75% wzrost liczby wysyłanych tweetów
• 20% spadek współczynnika odrzuceń

Jak Twitter PWA stał się jednym z najszybszych PWA?

Dzięki funkcjonalnemu usprawnieniu istniejącej wiedzy pracowników usług, a także optymalizacji pod kątem mniejszego zużycia danych, PWA jest przystosowane do obsługi szybszej prędkości ładowania i prawie natychmiast pojawia się przy kolejnych wizytach, zarówno na początku, jak i podczas podróży.

Optymalizacja pod kątem szybkości nie będzie trwać dzień lub dwa, ale powtarzalny proces testowania, śledzenia, mierzenia, próba zrozumienia, dlaczego tak się dzieje, i stosowania możliwych rozwiązań. Praca nad wydajnością to błędne koło oglądania, mierzenia i ulepszania tu i tam.

Mając to na uwadze, Twitter Lite to zbiór drobnych ulepszeń i aktualizacji dotyczących ładowania pierwszej strony, renderowania komponentów React, zapobiegania ponownemu renderowaniu i tak dalej. Każdy z nich uwzględnia poprawę wydajności jako całości i wszystkie niewielkie wysiłki, które składają się na to, co widzimy teraz, jedną z największych i najszybszych na świecie adopcji PWA.

Oczywiście, aby utrzymać ten tytuł, deweloperzy muszą nieustannie pracować, aby upewnić się, że wszystko jest pod kontrolą i ewoluować proces do czegoś jeszcze lepszego, jeśli jest szansa.

Często zadawane pytania dotyczące Twittera PWA i PWA

Czy Twitter to PWA?

Absolutnie. Twitter wydał nową, progresywną wersję aplikacji internetowej we współpracy z programistami Google w 2017 roku. Twitter PWA nosi nazwę Twitter Lite, a jego kompilacja koncentruje się na obsłudze międzynarodowych użytkowników, którzy często mogą doświadczać niestabilnych połączeń w porównaniu z USA.

Czy tworzenie PWA jak Twitter PWA jest drogie?

Mówi się, że Twitter PWA jest najtańszą wersją wszystkich urzędników Twittera, ale działa wspaniale w różnych przeglądarkach, a nawet przypomina niektóre z najlepszych funkcji natywnej aplikacji.

Twitter PWA to połączenie doskonałej optymalizacji wydajności i światowej klasy zastosowania nowoczesnej technologii PWA. Mając to na uwadze, zbudowanie wyjątkowego PWA, takiego jak Twitter Lite, zależy w dużej mierze od zespołu programistów, którego zatrudniasz lub zlecasz.

PWA to najlepsza możliwa alternatywa dla aplikacji natywnych i popularnie przepowiadająca przyszłość stron internetowych. Jeśli więc firmy internetowe szukają sposobu na wykorzystanie współczynnika konwersji poprzez poprawę podróży klienta na miejscu, porzuć ciężkie i drogie aplikacje natywne i zamiast tego szukaj PWA.

Od czego zacząć rozwój PWA Twojej firmy?

Cóż, wszystko powinno zaczynać się od tego, gdzie znajduje się Twoja firma, czego potrzebuje i gdzie chcesz, aby była. Ma sens? Bo nie chcesz tracić pieniędzy i cennego czasu na coś nieistotnego, prawda?

Kolejnym kluczowym krokiem jest podjęcie decyzji, czy PWA będzie pasować do Twojej strategii biznesowej. Prawie każdy szuka sposobów na zwiększenie ruchu w witrynie, poprawę współczynników konwersji lub wykorzystanie wartości jednostki. A agencja rozwoju PWA może Ci w tym pomóc.

Mogą pomóc w wykryciu problemu w obszarach o niskiej skuteczności w Twojej witrynie. Jeśli nie możesz znaleźć najlepszego rozwiązania, skorzystaj z usługi konsultacji lub badania.

I wtedy dochodzimy do kolejnego kroku: wybierz wiarygodnego dostawcę usług rozwoju PWA. Potrzebujesz nazwy z wieloletnim doświadczeniem, przekonującej dynamicznym zespołem programistów dążących do tego, co najlepsze dla swoich klientów, oraz oczywiście doskonałej wiedzy i umiejętności potrzebnych do stworzenia wysoce funkcjonalnego i bogatego w funkcje PWA.

Tigren to wiodąca na świecie agencja outsourcingowa, której zaufały tysiące globalnych małych i średnich firm w ciągu ostatniej dekady. Jesteśmy zespołem młodych, aspirujących i oddanych osób, wybranych spośród najlepszych w swojej branży.

Specjalizujemy się w rozwoju eCommerce, szczególnie w usługach rozwoju Magento i PWA. Chcemy zaproponować Ci najlepszą ofertę, której nie znajdziesz nigdzie indziej, pomóc Ci do końca i zrealizować cel, po który do nas przyszedłeś.

Możesz na nas liczyć, jeśli potrzebujesz skutecznego i opłacalnego rozwiązania dla:

• W pełni eCommerce PWA programowanie od podstaw
• Częściowo rozwój eCommerce PWA
• Wbudowane rozwiązania i ulepszenia w istniejącym eCommerce PWA
• Premium gotowe do użycia motywy/wtyczki/rozszerzenia eCommerce PWA

Kluczowe dania na wynos

Nowy Twitter PWA wnosi powiew świeżego powietrza do nudnego i niereagującego świata mobilnego internetu. Silne partnerstwo między Twitterem a Google przyniosło sławę transformacyjną adopcją, przełamując wszelkie obawy i wątpliwości dotyczące potencjału PWA. Odnieś sukces we wczesnym wdrażaniu PWA, zacznij rozpieszczać swoich użytkowników online i przyspiesz wzrost ROI z Tigren już dziś, zanim będzie za późno.