Tinder PWA: Contoh Sukses Aplikasi Web Progresif

Bagaimana pengaruh Tinder terhadap kehidupan cinta Anda sejauh ini? Dan bagaimana pengalaman Anda menggunakan Tinder? Bagi mereka yang hanya mencari hubungan yang tulus, Tinder mungkin tidak akan luput dari perhatian mereka. Tetapi Tinder memutuskan untuk membuktikan bahwa mereka salah dan bertujuan untuk menjadi situs kencan serbaguna bagi semua orang untuk menemukan cinta mereka yang sah. Akibatnya, Tinder PWA lahir untuk membantu situs kencan terbesar di dunia memperluas kesadarannya dan mencapai lalu lintas, sebutan, dan konversi yang mereka inginkan.

Dalam studi kasus hari ini, kami akan memperkenalkan adopsi PWA lain yang berhasil dan bagaimana hal itu membantu Tinder mencapai tujuannya. Mari ungkap PWA Tinder dan jelajahi kinerjanya.

Sekilas Tentang Tinder

Tinder dibangun sebagai solusi kencan baru untuk generasi yang paham teknologi. Ini mungkin secara populer disebut sebagai situs hookup, tetapi pada intinya, Tinder bekerja berdasarkan ide membuat perjodohan lintas batas dan zona waktu.

Kembali ketika Tinder memasuki pasar pada tahun 2012, kebanyakan lajang menjadi pengguna Tinder yang sering, berkeliaran untuk mencari pasangan untuk kencan santai. Meskipun keberadaan Tinder menambah penemuan seperangkat bahasa kencan yang mendorong hubungan cepat, tidak bertanggung jawab, tanpa ikatan, Tinder juga merupakan rumah bagi banyak pertunangan dan pernikahan yang sukses.

Untuk bergabung dengan Tinder, Anda memerlukan profil yang sesuai, termasuk avatar dan bio yang menawan, untuk menarik minat mereka yang memiliki minat yang sama. Saat Anda melihat profil, Anda dapat menggesek ke kiri atau kanan untuk meneruskan atau melanjutkan. Jika Anda cocok satu sama lain, Anda dapat terus bertukar pesan dengan orang itu.

Untuk membuat kecocokan, Tinder memberi pengguna informasi seperti usia di sekitar jangkauan Anda, jenis kelamin, lokasi yang dekat dengan Anda, dan teman bersama yang tersedia. Terlepas dari upayanya untuk menjadikannya tempat yang aman untuk menemukan cinta, hubungan yang berkelanjutan sulit diperoleh melalui Tinder, dan peningkatan penipuan telah terjadi.

Menurut jumlah pengguna, Tinder tetap menjadi situs kencan terbesar secara global, menarik 75 juta orang di platform setiap bulan, di antaranya 7,8 juta adalah pengguna AS.

Situasi Menuju Integrasi PWA Tinder

Tidak seperti merek lain, Tinder tidak menghadapi masalah yang berarti. Mereka memiliki aplikasi asli seluler yang layak yang berkinerja baik di seluruh sistem operasi. Rasio klik-tayang mereka bagus, tetapi mereka melihatnya bisa lebih baik.

Tinder ingin berkembang lebih jauh, menempati pasar baru, mencari adopsi baru, dan melindungi posisinya sebagai pemimpin pasar di antara platform kencan online lainnya.

Setelah menyadari bahwa pesaing mereka menawarkan pengalaman yang lebih trendi di situs seluler, Tinder memutuskan untuk melakukan yang lebih baik, bercita-cita untuk mencapai paritas fitur dalam pengalaman Tinder dengan V1.

Bagaimana Beralih ke PWA Dapat Menyelesaikan Permintaan Tinder?

PWA dapat mengalahkan aplikasi asli karena dapat ditemukan. Itu dapat dipromosikan di mesin pencari dan bekerja dengan baik di seluruh browser sambil memberikan pengalaman serupa ke aplikasi asli. Hal ini memungkinkan PWA memiliki keunggulan kompetitif yang signifikan karena dapat menarik kelompok audiens yang lebih besar dalam berbagai variasi.

Ketika datang ke solusi cepat namun andal untuk menembus pasar baru dan menginspirasi mereka untuk berubah menjadi pengguna berulang, tidak ada yang harus dilakukan sebelum PWA.

Meskipun kami tahu Tinder adalah orang yang berprestasi tinggi, upaya besar didedikasikan untuk membangun PWA Tinder yang menawarkan kinerja pemuatan cepat-cepat tertinggi dan petualangan pengguna yang sangat responsif dan bebas repot.

Kemudian mereka pergi dengan solusi untuk mengembangkan PWA kecil dibandingkan dengan aplikasi seluler yang diganti. Dengan memanfaatkan teknologi aplikasi web modern dengan terampil dengan pekerja layanan dan mengoptimalkan kinerja JavaScript, tim dapat memenuhi tujuan ambisius Tinder.

Dampak PWA Tinder

Salah satu PWA tercepat yang pernah dibuat membutuhkan waktu 3 bulan bagi tim pengembang Tinder untuk menyelesaikan proyek yang hebat, dari awal hingga akhir. React digunakan untuk perpustakaan UI Tinder PWA, sementara Redux bertanggung jawab atas manajemen negara bagian.

Juga disebut sebagai Tinder Online, pengalaman web baru telah membuktikan langkah bijak untuk mengadopsi PWA dan menyesuaikannya untuk penggunaan terbaik. Dan hasilnya sangat sesuai dengan ekspektasi.

Uang Tinder pasti tidak suka bergoyang. Upaya mereka terbayar ketika paket pengalaman Tinder yang penting dikirimkan dengan biaya serendah 10% dari investasi di muka untuk lingkungan yang mahal datanya.

Ulasan Pengalaman Pengguna

• Interaksi dilakukan secara cepat dan responsif.
• Navigasi situs yang intuitif dan mudah, diperbaiki dan disederhanakan, melambangkan spanduk bawah, membuat seluruh situs menjadi sangat sederhana.
• Lagging dapat terjadi ketika Anda menggesek ke kiri terlalu cepat dan terlalu banyak.
• Setelah berkeliling, Tinder PWA akan meminta Anda untuk menambahkannya ke layar beranda dan menerima pesan sembulan.
• Pengalaman di iOS dapat diintervensi karena PWA masih belum menerima dukungan penuh dari ekosistem ini.

Hasil

Tinder PWA mengungguli aplikasi aslinya dalam hal gesekan, pengeditan profil, dan waktu yang dihabiskan per sesi per pengguna. Menggunakan ukuran kecil telah membantu Tinder menang dengan waktu pemuatan yang diminimalkan 4,69 detik dari 11,9 detik sebelumnya, yang mengarah ke tingkat keterlibatan pengguna yang tinggi sepanjang masa, keterlibatan kembali, dan lebih banyak gesekan ke kanan.

Tinder PWA telah disebut sebagai salah satu aplikasi web progresif terbaik di bidangnya. Dibandingkan dengan aplikasi seluler, ini menunjukkan kinerja yang unggul dengan mengurangi rasio pentalan sebesar 15% dan meningkatkan rasio klik-tayang sebesar 30%.

Data memberi tahu semuanya: Pengguna lebih banyak menggesek, mengirim lebih banyak pesan, membuat profil mengedit lebih banyak, dan menghabiskan waktu lebih lama di PWA daripada di aplikasi asli. Lebih banyak keterlibatan, lebih sedikit langkah yang tidak perlu.

Bagaimana Cara Membuat PWA Seperti Tinder?

Ingin tahu bagaimana Tinder melampaui dan melampaui PWA-nya? Jangan katakan lagi. Kami akan memberikan ringkasan tentang apa yang telah mereka lakukan.

Mengungkap Kerangka

Pemecahan kode di tingkat rute

Pada awalnya, aplikasi Tinder menggunakan bundel besar JavaScript monolitik yang berisi kode yang tidak perlu, dan semuanya berjalan ketika pengguna membuat interaksi inti pada aplikasi.

Saat itulah seluruh pengalaman tertunda. Oleh karena itu, mereka memutuskan untuk menggunakan pemecahan kode untuk mentransfer kode yang paling dibutuhkan ke muka sementara kode yang memuat lambat dapat beristirahat sebanyak yang mereka butuhkan sebelum waktu untuk muncul.

Tinder mengandalkan React Router dan React Loadable untuk menjalankan ide dan langsung mulai membagi kode tingkat atas saat aplikasi mereka memusatkan semua rute dengan rendering info berbasis konfigurasi.

React Loadable milik perpustakaan kecil komponen-sentris James Kyle untuk pemecahan kode di React.

Ini adalah fungsi yang dapat membuat komponen lain, jadi memecah bundel menjadi komponen itu mudah. Hasilnya adalah bundel berukuran 101KB bukannya 166KB, dan DCL dipersingkat dari 5,46 detik menjadi 4,69 detik.

React 16 akhirnya harus merilis upgrade yang meminimalkan ukuran bundel React dari versi sebelumnya, bagian dari strategi untuk pengemasan yang lebih baik dengan Roll-up dan mengganti kode yang tidak digunakan.

Tinder juga mengandalkan CommonsChunkPlugin, webpack populer untuk library chunking ke file bundel tunggal untuk waktu yang lama di seluruh rute.

Caching aset jangka panjang

Ekstrak penggunaan lama dengan output sumber daya statis dan webpack menggunakan [chunkhash] untuk melampirkan cache-buster ke setiap file.

Untuk memastikan pengalaman itu dipesan dengan baik bahkan di perangkat seluler dengan koneksi 3G yang lambat sambil memenuhi tujuan penganggaran, Tinder menetapkan aturan dasar dengan “anggaran kinerja dunia nyata.”

Anggaran 155KB diberlakukan untuk bongkahan inti dan vendor, sementara bongkahan yang memuat lambat dibatasi hingga 55KB, dan sisanya 35KB. Penyiapan minimum ini memungkinkan situs untuk memulai dan tetap interaktif dengan cepat.

CSS harus berada pada batas 20 KB untuk menghindari kemunduran kinerja.

Strategi CSS

Tinder menciptakan gaya CSS berkualitas tinggi yang dapat digunakan kembali oleh Atomic CSS, yang tetap sejalan dengan cat awal dan CSS pemuatan berbasis stylesheet lainnya. 20KB gzip berada di atas untuk gaya penting, tetapi mereka dapat dibangun kembali akhir-akhir ini menjadi kurang dari 11KB.

Penggunaan Workbox dan cache aset offline

Tinder memanfaatkan intersepsi jaringan dengan plugin Workbox Webpack, men-cache App Shell mereka dan aset statis utama, yaitu CSS, dan semua bundel inti, vendor, dan manifes.

Dengan cara ini, memulai aplikasi menjadi lebih cepat ketika pengguna kembali untuk pengunjung kedua ke atas, dan semua kunjungan berulang tahan dengan koneksi jaringan apa pun.

Layanan PWA Premium

FYI, nama aplikasi web progresif berasal dari fakta bahwa PWA terbuka untuk setiap merek untuk memanfaatkan teknologi kontemporernya guna memanfaatkan dan menyesuaikan setiap detail untuk penggunaan yang tepat.

Jika Anda ingin menghasilkan karya berkualitas tinggi seperti PWA Tinder untuk toko online Anda, mulailah menjadikan layanan PWA premium sebagai prioritas. Tidak semua pengembang dan perancang web merasa nyaman dengan pengembangan PWA.

Saat mengandalkan agen PWA, keahlian dan pengalaman bertahun-tahun adalah poin penting untuk dipertimbangkan. Di sini, di Tigren, kami telah mempelajari PWA sejak Google memperkenalkan konsep tersebut kepada dunia. Kami telah menemani beberapa bisnis e-niaga global untuk memimpin dan berkembang bersama PWA.

Tigren adalah penyedia pengembangan PWA premium berbasis di Vietnam yang berspesialisasi dalam solusi PWA Magento. Tujuan kami adalah membantu bisnis online mencapai tujuan mereka dengan cara yang paling hemat anggaran.

Kirim pesan kepada kami di [email protected] jika Anda memiliki pertanyaan tentang PWA.

Takeaways Kunci

PWA dianggap sebagai standar masa depan dari setiap operasi situs web. Ini menarik lebih banyak prospek, menjangkau audiens yang lebih besar, terlibat dengan pengunjung, dan membuat mereka bertahan lebih lama sambil memastikan mayoritas dari mereka berkonversi.

Dengan penyesuaian khusus pada kecepatan dan kenyamanan, PWA Tinder telah mencapai tujuan adopsi pasar yang lebih besar untuk fitur-fitur Tinder, dengan lebih banyak pengguna yang tetap berinteraksi di web, mendorong lebih banyak kecocokan yang dibuat, dan lebih banyak pengonversi aplikasi.