Twitter PWA : ce que vous devez savoir

L'écart technologique entre les grandes entreprises et les petites entreprises suivantes n'a jamais été aussi proche. Avec l'application Web progressive, l'un des principaux contributeurs est la capacité financière qui a été considérablement réduite. En appliquant l'utilisation nouvelle et avancée de la technologie des applications Web qui doit profondément mentionner les travailleurs des services, les entreprises de toutes tailles peuvent adapter PWA à leurs propres besoins fonctionnels et budgets. Si vous êtes à la recherche d'inspiration des grandes adoptions de PWA dans le monde, l'étude de cas ci-dessous sur Twitter PWA est quelque chose que vous ne pouvez pas manquer.

L'histoire de Twitter avant l'intégration de PWA

En avril 2017, Twitter Lite, la nouvelle amélioration de son site sur le navigateur mobile, a été lancé après une collaboration avec Google. Le nom vient du fait qu'il est conçu pour être plus léger, plus rapide et plus utilisable.

Avance rapide jusqu'à ce jour, Twitter est le 3e site de médias sociaux le plus populaire aux États-Unis et le 15e le plus populaire dans le monde. Bien que la plupart de leurs utilisateurs se trouvent aux États-Unis, le Japon et l'Inde sont les deux plus grands représentants des utilisateurs de Twitter qui, combinés, dépassent le nombre d'utilisateurs américains.

L'histoire de Twitter Lite doit remonter de 2010 à 2017, Twitter étant en passe de devenir le premier site de médias sociaux au monde.

Twitter a connu des débuts difficiles par rapport à leur plus grand rival, Facebook, au début. Cependant, à partir de 2010, l'oiseau bleu avait été témoin d'une vue magnifique sur le graphique, une croissance constante trimestre par trimestre. Entre 2015, 2016 et 2017, le taux de croissance a ralenti.

Reconnaissant le potentiel en dehors des États-Unis, Twitter a rapidement atteint le marché international.

Dès que Google a introduit PWA, Twitter a su à quel point il pouvait se développer et acquérir de nouveaux utilisateurs. Twitter Lite était leur réponse finale, dédiée aux pays émergents avec des connexions réseau peu fiables. Le nouveau Twitter PWA occupe moins d'un mégaoctet de stockage tout en fonctionnant avec le mode d'économie de données optimisé. Images et vidéos dans un aperçu flou jusqu'à ce que les utilisateurs cliquent dessus.

Nicolas Gallagher, responsable de l'ingénierie chez Google pour Twitter Lite, a déclaré : "Twitter Lite est désormais le moyen le plus rapide, le moins cher et le plus fiable d'utiliser Twitter." Le succès de Twitter Lite a fait la une de nombreux articles concernant les PWA.

La solution de la plus grande PWA au monde - Twitter PWA

Pour vous aider à acquérir les connaissances pratiques du développement de PWA, des points cruciaux sur le cadre de Twitter PWA, ou Twitter Lite, et des méthodes innovantes personnalisées pour les demandes à la demande seront livrés ci-dessous.

Notez que l'objectif global de Twitter Lite est de garantir aux utilisateurs une excellente expérience sur site, indépendamment des mauvaises connexions Internet, entraînant des visites ultérieures et convertissant les visiteurs en utilisateurs fréquents. Grâce à la capacité de favoriser la vitesse, la fiabilité et la sécurité de PWA, vous pouvez en faire l'expérience sur mobile.twitter.com.

Idée d'architecture

Twitter Lite, à la base, est un serveur Node.js simple et de taille modeste et une application de JavaScript côté client. PWA permettra la construction d'une API pour la mise en cache et le stockage des données. Le serveur s'occupera d'abord du processus d'authentification, assemblera le premier état de l'application et transformera les codes Web en pages interactives par le rendu HTML initial dans le shell de l'application.

Une fois chargées en arrière-plan, les données seront demandées directement à partir de l'API Twitter. La simplicité de cette architecture aide Twitter PWA à offrir un service exceptionnel et fiable en termes d'efficacité, même à grande échelle.

Concevoir des performances

La facilité d'utilisation est l'une des principales priorités de Twitter Lite. Des millions, voire des centaines de millions d'utilisateurs accéderaient à ce réseau social chaque mois. Ils veulent donc créer un parcours utilisateur hautement utilisable dans toutes les circonstances de connectivité.

Les développeurs avaient utilisé une série de leviers de performance incrémentiels, le modèle PRPL, combiné aux dernières mises à jour des navigateurs modernes, pour créer Service Worker, Web Push Notifications, IndexedDB et Web App Install Banners. Ils faisaient tous partie de la vitesse de chargement impressionnante et de l'indépendance de la connexion.

Utilisation des données

S'appuyant sur des ressources mises en cache pour servir des données plus petites à l'avance, ainsi que sur le mode de sauvegarde des données, Twitter Lite est intrinsèquement configuré pour minimiser l'utilisation des données, ce qui entraîne une déduction de 40 % sur la page de chronologie. Pour charger l'image optimisée à la demande, une requête HEAD est effectuée pour afficher sa taille en un clic de bouton.

Chargement progressif

Après avoir versé la réponse HTML initiale au navigateur, des instructions sont envoyées pour précharger les ressources cruciales pour que le serveur assemble l'état interactif. Les scripts sont brisés en petits morceaux à l'aide de Webpack pour se charger uniquement sur demande.

En d'autres termes, le chargement initial de Twitter Lite est exceptionnellement rapide car seule la nécessité de la vue visible est effectuée, tandis qu'un technicien de service mettra en cache des ressources supplémentaires pour permettre l'apparition presque instantanée et une transition en douceur dans les interactions futures.

Disponibilité hors ligne

Tout comme son application native, un technicien de service rend possible une utilisation hors ligne temporaire. Toutes les pages précédemment chargées sont rouvertes instantanément via la mise en cache dans le shell de l'application HTML, les actifs statiques et certains emojis les plus courants.

Le bouton "Réessayer" est fourni en cas d'échec du chargement des données ou des scripts pour s'assurer que le problème sera pris en charge. En activant simplement la navigation hors ligne, la vitesse de chargement au démarrage et les visites ultérieures sont considérablement améliorées.

Le rendu

Oubliez les travaux de rendu coûteux ; Twitter Lite a été optimisé pour le rendu des composants. Cependant, le plus gros problème réside dans la complexité des Tweets avec les listes infinies d'exigences pour des performances supplémentaires.

Ensuite, ils ont pensé à un composant de liste virtualisé qui rendait uniquement le contenu visible pour la vue présentée ci-dessus et préservé pour le défilement sur les écrans. Une autre mise à jour consistait à reporter le rendu non crucial en mode inactif et à économiser la consommation de données par l'API requestIdleCallback.

Systèmes et vitesse dupliquée

Twitter Lite est un système de conception réactif basé sur les détails des composants pour que l'application se conforme à toutes les demandes de forme. Travailler avec des composants d'interface utilisateur avait libéré de l'espace pour une itération rapide et la réutilisation des blocs de construction établis. Il convient également de mentionner que la flexbox est fortement utilisée pour la conception de la mise en page, des nombres limités fixés sur les couleurs, les tailles de police et les longueurs.

Le résultat de Twitter PWA

Le site mobile et de bureau

Twitter PWA est censé devenir interactif dès 5 secondes et moins sur la plupart des appareils dotés d'un réseau 3G. La version Lite se charge 30 % plus rapidement et économise jusqu'à 70 % de l'utilisation des données tout en réduisant le délai d'interactivité de plus de 25 %.

Par rapport à l'ancienne application native, Twitter PWA n'occupe qu'un maximum de 3 % de la taille, une fraction de l'espace de stockage de l'appareil. Pourtant, il fonctionne profondément et puissamment. Les chronologies, l'une des fonctionnalités les plus complexes, peuvent être construites à partir d'un nombre limité de 30 lignes de configuration de code tout en attachant un module Redux à un composant React, contenu mixte.

La PWA fonctionne de manière très similaire à l'application native, avec des fonctionnalités standard telles qu'un flux régulier, des popups de notification push, une messagerie directe et des onglets de recherche. La transition est réactive à travers les pages et les éléments, bien que la réponse tactile soit sensiblement plus lente que ses applications natives. Les développeurs travaillent toujours sur l'amélioration de la convivialité et de la responsabilité dans les futures versions.

Tout est assez favorable avec la version de bureau, qui fonctionne bien dans des fenêtres étroites, par rapport aux anciennes applications officielles Twitter négligées à la fois sur Mac et Windows. Toute l'expérience est relativement légère et détendue à utiliser.

Twitter Lite prend actuellement en charge jusqu'à 42 langues, et la fonction Globalize a été créée pour faire émerger les chiffres, les dates et les messages qui correspondent aux habitants.

Les résultats en chiffres

• 65 % d'augmentation du nombre de pages par session
• Augmentation de 75 % du nombre de Tweets envoyés
• Diminution de 20 % du taux de rebond

Comment Twitter est-il devenu l'un des PWA les plus rapides ?

Grâce à l'ajustement fonctionnel des connaissances existantes des travailleurs de service, ainsi qu'à l'optimisation pour une consommation de données moindre, PWA est câblé pour gérer une vitesse de chargement plus rapide et une apparition quasi instantanée lors des visites suivantes, à la fois au début et pendant le voyage.

L'optimisation de la vitesse ne se fera pas en un jour ou deux, mais un processus répétitif de test, de suivi, de mesure, d'essai de comprendre pourquoi cela se produit et d'application de solutions possibles. Le travail sur la performance est un cercle vicieux d'observation, de mesure et d'amélioration ici et là.

Cela dit, Twitter Lite est une accumulation de petites améliorations et mises à jour sur le chargement de la première page, le rendu des composants React, la prévention du re-rendu, etc. Chacun répondant à l'amélioration des performances dans son ensemble, et tous les petits efforts accomplis jusqu'à ce que nous voyons maintenant, l'une des adoptions de PWA les plus importantes et les plus rapides au monde.

Bien sûr, pour conserver ce titre, les développeurs doivent constamment travailler pour s'assurer que tout est sous contrôle et faire évoluer le processus vers quelque chose d'encore meilleur s'il y a une chance.

Foire aux questions sur Twitter PWA et PWA

Est-ce que Twitter est une PWA ?

Absolument. Twitter a publié la nouvelle version de l'application Web progressive en collaboration avec les développeurs de Google en 2017. Le Twitter PWA s'appelle Twitter Lite, et sa construction est axée sur les utilisateurs internationaux qui peuvent souvent rencontrer des connexions instables par rapport aux États-Unis.

Est-ce cher de construire une PWA comme Twitter PWA ?

On dit que Twitter PWA est la version la moins chère de tous les officiels de Twitter, mais fonctionne à merveille sur différents navigateurs et ressemble même à certaines des meilleures fonctionnalités de l'application native.

Twitter PWA est une combinaison d'une excellente optimisation des performances et d'une application de classe mondiale de la technologie moderne de la PWA. Cela dit, la création d'une PWA exceptionnelle comme Twitter Lite dépend en grande partie de l'équipe de développement que vous embauchez ou que vous sous-traitez.

PWA est la meilleure alternative possible aux applications natives et a généralement prédit l'avenir des sites Web. Donc, si les entreprises en ligne cherchent un moyen de tirer parti de leur taux de conversion en améliorant le parcours client sur site, abandonnez les applications natives lourdes et coûteuses et recherchez plutôt PWA.

Par où commencer avec le développement PWA de votre entreprise ?

Eh bien, tout devrait commencer par où en est votre entreprise, ce dont elle a besoin et où voulez-vous qu'elle soit. Avoir du sens ? Parce que vous ne voulez pas perdre de l'argent et un temps précieux sur quelque chose qui n'est pas pertinent, n'est-ce pas ?

La prochaine étape cruciale consiste à décider si PWA s'intégrerait dans votre stratégie commerciale. Presque tout le monde cherche des moyens d'augmenter le trafic de son site, d'améliorer ses taux de conversion ou de tirer parti de sa valeur unitaire. Et une agence de développement PWA peut vous aider avec tout cela.

Ils peuvent vous aider à détecter le problème dans les zones peu performantes de votre site. Si vous ne trouvez pas la meilleure solution, contactez un service de consultation ou d'examen.

Et c'est là que nous arrivons à l'étape suivante : choisir un fournisseur de services de développement PWA fiable. Vous avez besoin d'un nom avec des années d'expertise, convaincant une équipe dynamique de développeurs s'efforçant d'offrir le meilleur à leurs clients, et bien sûr, les excellentes connaissances et compétences nécessaires pour créer une PWA hautement fonctionnelle et riche en fonctionnalités.

Tigren est la première agence d'externalisation mondiale à laquelle des milliers de PME internationales ont fait confiance au cours de la dernière décennie. Nous sommes une équipe de personnes jeunes, aspirantes et dévouées, choisies parmi les plus performantes de leur secteur.

Nous sommes spécialisés dans le développement de commerce électronique, en particulier avec les services de développement Magento et PWA. Nous voulons vous apporter la meilleure offre que vous ne pouvez pas trouver ailleurs, vous aider jusqu'au bout et atteindre l'objectif pour lequel vous venez chez nous.

Vous pouvez compter sur nous si vous avez besoin d'une solution efficace et rentable pour :

• Développement PWA entièrement eCommerce à partir de zéro
• Développement PWA partiellement e-commerce
• Solutions intégrées et améliorations sur une PWA de commerce électronique existante
• Thèmes/plugins/extensions PWA de commerce électronique prêts à l'emploi

Points clés à retenir

Le nouveau Twitter PWA apporte une bouffée d'air frais au monde du Web mobile terne et irresponsable. Le puissant partenariat entre Twitter et Google avait payé sa renommée avec une adoption transformationnelle, brisant toutes les inquiétudes et les doutes sur le potentiel des PWA. Soyez un adopteur précoce de PWA, commencez à choyer vos utilisateurs en ligne et augmentez votre retour sur investissement avec Tigren aujourd'hui avant qu'il ne soit trop tard.