Tinder PWA: udany przykład progresywnej aplikacji internetowej

Jak Tinder wpływa na twoje dotychczasowe życie miłosne? A jakie masz doświadczenia z używaniem Tindera? Tym, którzy szukają tylko prawdziwych związków, Tinder może nawet nie wymknąć się im z głowy. Ale Tinder postanowił udowodnić, że się mylili i chce stać się wszechstronnym serwisem randkowym, w którym każdy znajdzie swoją prawdziwą miłość. W rezultacie powstaje Tinder PWA , aby pomóc największemu na świecie portalowi randkowemu zwiększyć jego świadomość i osiągnąć pożądany ruch, wzmianki i konwersje.

W dzisiejszym studium przypadku przedstawimy kolejną udaną adopcję PWA i sposób, w jaki pomogło to Tinderowi osiągnąć jego cele. Zaprezentujmy Tinder PWA i zbadajmy jego działanie.

Przegląd Tindera

Tinder został stworzony jako nowe rozwiązanie randkowe dla pokoleń obeznanych z technologią. Może być popularnie określany jako strona z podłączeniem, ale w istocie Tinder działa w oparciu o ideę dobierania przeciwników ponad granicami i strefami czasowymi.

Kiedy Tinder pojawił się na rynku w 2012 roku, częstymi użytkownikami Tindera byli głównie single, którzy kręcili się, aby znaleźć partnerów na przypadkowe randki. Chociaż istnienie Tindera przyczynia się do wynalezienia zestawu języków randkowych, które zachęcają do energicznych, nieodpowiedzialnych, pozbawionych sznurków relacji, Tinder jest także domem dla wielu udanych zaręczyn i małżeństw.

Aby dołączyć do Tindera, potrzebujesz odpowiedniego profilu, w tym awatara i uroczej biografii, aby przyciągnąć osoby o podobnych zainteresowaniach. Gdy zobaczysz profil, możesz przesunąć palcem w lewo lub w prawo, aby przekazać lub przejść dalej. Jeśli pasujesz do siebie, możesz dalej wymieniać wiadomości z tą osobą.

Aby tworzyć dopasowania, Tinder dostarcza użytkownikom informacje, takie jak wiek w twoim zakresie, płeć, lokalizacje w pobliżu i każdy wspólny znajomy. Pomimo starań, aby było to bezpieczne miejsce do znajdowania miłości, trwałe relacje są trudne do zdobycia za pośrednictwem Tindera i dochodzi do coraz większej liczby oszustw.

Według liczby użytkowników, Tinder pozostaje największym serwisem randkowym na świecie, przyciągając co miesiąc 75 milionów ludzi na platformie, wśród których 7,8 miliona to użytkownicy z USA.

Sytuacja prowadząca do integracji Tindera z PWA

W przeciwieństwie do innych marek, Tinder nie napotkał żadnych poważnych problemów. Mieli przyzwoitą natywną aplikację mobilną, która działa dobrze w różnych systemach operacyjnych. Ich współczynnik klikalności był świetny, ale widzieli, że mogło być lepiej.

Tinder chciał dalej się rozwijać, zdobywając nowe rynki, szukając nowych adopcji i chroniąc swoją pozycję lidera rynku wśród innych internetowych platform randkowych.

Po rozpoznaniu, że ich konkurenci oferują bardziej modne wrażenia na stronie mobilnej, Tinder postanowił zrobić to lepiej, dążąc do osiągnięcia identyczności funkcji w doświadczeniu Tindera z V1.

Jak przejście na PWA może rozwiązać prośbę Tindera?

PWA może przebić aplikacje natywne nad wykrywalnością. Może być promowany w wyszukiwarkach i działa dobrze w różnych przeglądarkach, zapewniając podobne wrażenia z aplikacji natywnych. Daje to PWA znaczną przewagę konkurencyjną, ponieważ może przyciągnąć większą grupę odbiorców w różnorodności.

Jeśli chodzi o szybkie, ale niezawodne rozwiązanie do penetracji nowych rynków i inspirowania ich do przekształcenia się w powracających użytkowników, nic nie powinno poprzedzać PWA.

Chociaż wiemy, że Tinder osiąga wiele sukcesów, wiele wysiłku włożono w zbudowanie Tindera PWA, który oferuje najwyższą wydajność szybkiego ładowania i niezwykle responsywną, bezproblemową przygodę użytkownika.

Następnie zdecydowali się na stworzenie małego PWA w porównaniu z zastąpionymi aplikacjami mobilnymi. Dzięki umiejętnemu wykorzystaniu nowoczesnej technologii aplikacji internetowych z pracownikami serwisowymi i optymalizacji wydajności JavaScript, zespół był w stanie spełnić ambitny cel Tindera.

Wpływ Tindera PWA

Jeden z najszybszych PWA, jakie kiedykolwiek zbudowano, zajęło zespołowi programistów Tinder solidne 3 miesiące, aby zrealizować potężny projekt, od początku do końca. React był używany w bibliotece interfejsu użytkownika Tinder PWA, podczas gdy Redux był odpowiedzialny za zarządzanie stanem.

Nowe środowisko internetowe, zwane również Tinder Online, okazało się mądrym posunięciem polegającym na przyjęciu PWA i dostosowaniu go do jak najlepszego wykorzystania. A wyniki były bardzo godne oczekiwania.

Pieniądze Tindera z pewnością nie lubiły się trząść. Ich wysiłek opłacił się, gdy niezbędny pakiet doświadczeń Tinder został dostarczony za zaledwie 10% początkowej inwestycji w tak kosztowne środowisko.

Przegląd doświadczeń użytkownika

• Interakcje są podejmowane w szybki, responsywny sposób.
• Intuicyjna i bezproblemowa nawigacja po witrynie, stała i uproszczona, symbolizowała dolny baner, czyniąc całą witrynę niezwykle prostą.
• Opóźnienie może się zdarzyć, gdy przesuniesz palcem w lewo za szybko i za dużo.
• Po obejrzeniu Tinder PWA poprosi Cię o dodanie go do ekranu głównego i otrzymywanie wyskakujących wiadomości.
• Doświadczenie na iOS można interweniować, ponieważ PWA wciąż nie otrzymało pełnego wsparcia z tego ekosystemu.

Wyniki

Tinder PWA przewyższał swoją natywną aplikację pod względem przeciągnięć, edycji profilu i czasu spędzonego na sesji na użytkownika. Wybranie małego rozmiaru pomogło Tinderowi wygrać z minimalnym czasem ładowania wynoszącym 4,69 s w porównaniu z poprzednimi 11,9 s, co doprowadziło do najwyższego w historii poziomu zaangażowania użytkowników, ponownego zaangażowania i większej liczby przesunięć w prawo.

Tinder PWA został okrzyknięty jedną z najlepszych progresywnych aplikacji internetowych w tej dziedzinie. W porównaniu z aplikacją mobilną wykazała lepszą wydajność, zmniejszając współczynnik odrzuceń o 15% i zwiększając współczynniki klikalności o 30%.

Dane mówiły wszystko: użytkownicy więcej przesuwają, wysyłają więcej wiadomości, częściej edytują profile i spędzają więcej czasu na PWA niż na aplikacjach natywnych. Więcej zaangażowania, mniej niepotrzebnych kroków.

Jak zbudować PWA jak Tinder?

Chcesz wiedzieć, jak Tinder wykracza poza swoje PWA? Nie mów nic więcej. Przedstawimy Ci podsumowanie tego, co zrobili.

Ujawnianie ram

Dzielenie kodu na poziomie trasy

Początkowo aplikacje Tinder wykorzystywały duże, masywne, monolityczne pakiety JavaScript, które zawierały niepotrzebny kod, i wszystkie uruchamiały się, gdy użytkownicy dokonywali podstawowych interakcji w aplikacjach.

Wtedy całe doświadczenie zostało opóźnione. Dlatego zdecydowali się użyć dzielenia kodu, aby przenieść najbardziej potrzebny kod na pierwszy plan, podczas gdy wolno ładujące się kody mogły odpocząć tyle, ile potrzebowały, zanim pojawił się czas.

Tinder liczył, że React Router i React Loadable zrealizują ten pomysł i od razu zaczął dzielić kod najwyższego poziomu, ponieważ ich aplikacje scentralizowały wszystkie trasy z renderowaniem informacji opartym na konfiguracji.

React Loadable należy do małej biblioteki Jamesa Kyle'a zorientowanej na komponenty do dzielenia kodu w React.

Jest to funkcja, która może tworzyć kolejny komponent, więc rozbicie pakietów na komponenty jest łatwe. W rezultacie powstał pakiet o rozmiarze 101 KB zamiast 166 KB, a DCL skrócono z 5,46 do 4,69.

React 16 ostatecznie musiał wydać aktualizacje, które minimalizowały rozmiar pakietu Reacta z poprzednich wersji, co jest częścią strategii lepszego pakowania za pomocą Roll-up i zastępowania nieużywanego kodu.

Tinder polegał również na CommonsChunkPlugin, popularnym pakiecie internetowym do dzielenia bibliotek na pojedyncze pliki pakietów przez długi czas na różnych trasach.

Buforowanie zasobów długoterminowych

Wyodrębnij długie użycie z danymi wyjściowymi zasobów statycznych i pakietem internetowym, używając [chunkhash], aby dołączyć do każdego pliku bufor do pomijania pamięci podręcznej.

Aby upewnić się, że wrażenia są dobrze zarezerwowane nawet na urządzeniach mobilnych z wolnym połączeniem 3G przy jednoczesnym spełnieniu celów budżetowych, Tinder ustanowił podstawowe zasady za pomocą „rzeczywistych budżetów wydajnościowych”.

Budżet 155 KB został wymuszony dla fragmentów rdzenia i dostawców, podczas gdy wolno ładujące się fragmenty były ograniczone do 55 KB, a reszta to 35 KB. Ta minimalna konfiguracja pozwoliła witrynie szybko rozpocząć pracę i zachować interaktywność.

CSS musiał mieć limit 20 KB, aby uniknąć regresu wydajności.

Strategia CSS

Tinder stworzył wysokiej jakości style CSS, które można ponownie wykorzystać w Atomic CSS, które pozostały zgodne z początkowym malowaniem i innym CSS ładującym oparty na arkuszach stylów. 20 KB spakowane gzipem jest na górze dla ważnych stylów, ale ostatnio można je przebudować do mniej niż 11 KB.

Korzystanie z Workboksa i buforowania zasobów offline

Tinder wykorzystał przechwytywanie sieci za pomocą wtyczki Workbox Webpack, buforując swoją powłokę aplikacji i główny zasób statyczny, a mianowicie CSS, a także wszystkie pakiety podstawowe, dostawców i manifestu.

W ten sposób uruchamianie aplikacji jest szybsze, gdy użytkownicy wracają po drugiego odwiedzającego w górę, a wszystkie powtarzające się wizyty są odporne na każde połączenie sieciowe.

Usługi PWA Premium

FYI, nazwa progresywnej aplikacji internetowej wynika z faktu, że PWA jest otwarte dla każdej marki, aby wykorzystać jej współczesne technologie, aby wykorzystać i dostosować każdy szczegół do właściwego użytku.

Jeśli chcesz tworzyć wysokiej jakości prace, takie jak Tinder PWA dla swojego sklepu internetowego, zacznij traktować usługi premium PWA jako priorytet. Nie każdy programista i projektant stron internetowych może czuć się komfortowo z programowaniem PWA.

Licząc na agencję PWA, wiedza i wieloletnie doświadczenie to ważne punkty do rozważenia. Tutaj w Tigren uczymy się PWA, odkąd Google wprowadził tę koncepcję na świat. Towarzyszyliśmy kilku globalnym firmom e-commerce, aby objąć prowadzenie i rozwijać się dzięki PWA.

Tigren to wietnamski dostawca oprogramowania PWA klasy premium, specjalizujący się w rozwiązaniach Magento PWA. Naszym celem jest pomoc firmom internetowym w osiągnięciu ich celu w najbardziej opłacalny sposób.

Napisz do nas na adres [email protected] , jeśli masz jakiekolwiek pytania dotyczące PWA.

Kluczowe dania na wynos

PWA uważane jest za przyszły standard działania każdej strony internetowej. Przyciąga więcej potencjalnych klientów, dociera do większej liczby odbiorców, angażuje odwiedzających i utrzymuje ich dłużej, jednocześnie upewniając się, że większość z nich dokona konwersji.

Dzięki specjalnym poprawkom w zakresie szybkości i wygody, Tinder PWA osiągnął cel, jakim jest większe przyjęcie funkcji Tindera na rynku, dzięki czemu więcej użytkowników pozostaje w interakcji z siecią, prowadząc więcej dopasowań i więcej konwerterów aplikacji.