Facebook PWA : ce que vous devez savoir

La plate-forme de médias sociaux à la croissance la plus rapide au monde a officiellement rejoint la transformation PWA. Notre dernier article vous parvient avec une étude de cas très recherchée sur Facebook PWA.

Nous expliquerons pourquoi Facebook devait passer à une PWA et quels résultats PWA avait apportés à cette entreprise technologique géante. Entrons directement.

Un aperçu de Facebook

En 2004, Mark Zuckerberg, décrocheur de Harvard, a fondé Facebook avec pour mission de créer une communauté où les gens du monde entier peuvent se connecter, partager des opinions et interagir les uns avec les autres sous des publications. Et le reste est de l'histoire.

À ce jour encore, Facebook aide les gens à rester connectés, à obtenir des mises à jour quotidiennes de leurs amis et de leur famille et à découvrir ce qui se passe dans le monde.

Il s'agit actuellement de la plus grande plate-forme de médias sociaux de cette planète, avec environ 2,93 milliards d'utilisateurs actifs par mois, données tirées du premier trimestre 2022.

Contrairement à LinkedIn ou Twitter avec un segment cible spécifique, Facebook s'est développé car il ne se limite à aucun groupe mais s'adresse à une variété de personnes, répondant à de nombreux types de besoins et de contenus, incorporant de nombreux aspects médiatiques différents.

Le rôle des PWA dans le futur

Que faut-il savoir sur PWA quand on entend l'histoire de Facebook qui lance sa version PWA ? Tout d'abord, il s'agit de la présence de PWA dans le futur.

Il ne s'agit pas de savoir si, mais de savoir quand les propriétaires de sites Web commenceront à intégrer ou à créer des PWA. Parce que tout simplement, si Facebook, Twitter, Uber, Tinder, Starbuck, AliExpress et Alibaba adoptent tous PWA dans leur stratégie numérique, ce doit être une chose.

Deuxièmement, nous savons que PWA est encore relativement récent, donc ses performances peuvent être en retard par rapport aux applications natives. Mais 95% des fonctionnalités natives de Facebook peuvent être recréées pour PWA, et les développeurs sont optimistes quant à cette transformation.

Il est prévu que ce soit demain. Presque toutes les applications peuvent déjà être intégrées à une PWA. La liste des fonctionnalités PWA continue de s'étendre à ces applications natives et plus encore.

Pour vous couper de tout le bruit inefficace autour de PWA, avec des mots à la mode et des affirmations bizarres, voici la valeur qu'il apporte au monde.

PWA est né sous le concept de faire du Web un meilleur endroit pour passer du temps, pour le rendre significatif pour les groupes de personnes qui comptent.

Il y a une énorme tendance dans l'application quotidienne à utiliser les habitudes des utilisateurs finaux. La plupart des gens utilisent jusqu'à un maximum de 6 applications et n'interagissent sérieusement qu'avec 2 à 3 applications chaque jour.

Ainsi, les utilisateurs n'ont pas besoin de plus d'applications car les données révèlent que leur plus grande frustration avec les applications consomme trop de stockage. C'est pourquoi le fait que les utilisateurs traînent sur une seule plate-forme légère tout en créant des impacts durables avec eux rend les applications natives insuffisantes.

Lorsque les utilisateurs préfèrent PWA, cela permet aux entreprises et aux développeurs d'économiser des efforts et des ressources pour produire une présence en ligne rentable.

Il est plus logique d'avoir une expérience transparente sur tous les appareils que d'avoir à prendre en charge 2 applications natives distinctes plus un site Web.

De plus, la création d'une PWA fonctionne toujours même si les marques possèdent déjà une application native, sauf qu'elle convient mieux aux grands noms. Cela les aiderait à attirer toutes les perspectives possibles au milieu des débuts de PWA.

Les défis de Facebook avant l'intégration de PWA

À la surprise et au plaisir de nombreuses personnes, Facebook a cessé de développer son application Web mobile en 2020. L'application d'origine n'était pas assez conviviale et Facebook cherchait une chance de passer à PWA.

Les deux situations divisées ont été rapidement fermées par l'expérience de type application de PWA fonctionnant sur tous les navigateurs. Il évolue dans l'élan, devenant une alternative réalisable aux applications natives pour beaucoup ces dernières années.

Facebook peut également dire que la technologie est en passe de dominer le paysage numérique, en particulier dans le commerce électronique. Cependant, en tant qu'application Web, PWA est encore nouvelle et nécessite plus de travail sur ses fonctionnalités.

Les résultats de Facebook PWA

À propos de la conception

Il y a une légère modification dans la conception du logo de Facebook PWA et non-PWA lorsqu'il apparaît sur l'écran d'accueil. Sur le bureau, le signet standard est affiché avec un signet Chrome en bas, tandis que le PWA ressemble à une icône d'application native.

Avec un non-PWA, vous obtenez le bon vieux nouvel onglet avec une barre de menus et les meilleures adresses. L'expérience diffère avec PWA lorsque vous verrez un écran de démarrage avant que le vrai site n'apparaisse et ne commence à se charger, exactement comme une application. C'est toujours le navigateur de votre appareil qui gère le travail, mais il apparaît d'une manière qui ressemble plus à une application sans la barre supérieure.

Facebook PWA s'exécute indépendamment dans le sélecteur de vue d'ensemble pour que vous puissiez continuer l'activité précédente. En dehors de cela, peu de différences sont apportées sur le contenu ou la mise en page.

À propos de l'expérience utilisateur

• La vitesse de chargement : rapide et fluide
• La transition entre pages et éléments : responsive avec émergence instantanée
• L'expérience globale : simple, directe et rapide

7 conseils pour créer une PWA comme Facebook

Le principe KISS (Keep It Simple, Stupid)

L'écran mobile est beaucoup plus petit et consomme beaucoup moins de données et d'énergie que le bureau. Cela signifie que les développeurs auraient moins de contenu avec lequel travailler.

Alors restez simple, essentiel et utile. Laissez la place à certains espaces plutôt que de les conduire à se laisser submerger par votre conception. Effectuez un test A/B pour supprimer les éléments inutiles, ce qui entraîne de faibles points d'engagement.

L'utilisation de polices compliquées peut coûter beaucoup de puissance à votre site à charger, ralentissant ainsi le processus. Une règle d'or consiste à donner la priorité aux polices par défaut lorsque vous le pouvez.

Facebook a cloué cela avec la bonne vieille police Helvetica afin que l'attention puisse attirer l'attention sur les messages des gens sans perdre les éléments d'identité de la marque.

Assurer une navigation fluide

Une bonne priorité est d'éviter à la fois tous les facteurs d'interaction basés sur le Web tels que les en-têtes ou les pieds de page. En utilisant Facebook sur l'application ou le navigateur mobile, vous constaterez que tout reste le même là où vous vous attendez à ce qu'ils soient.

Au lieu des fonctionnalités du navigateur, faites-le déborder avec un mode sans bord et traitez votre PWA de la même manière que la création d'une application native.

Bien que les gestes tactiles doivent être utilisés avec des pièces de rechange, ils ne sont pas nécessairement souhaités car ils sont difficiles à exécuter.

Fonctionnalité multi-navigateurs

Il vaut la peine de considérer la capacité de chaque navigateur avec les fonctionnalités PWA pour évaluer leur compatibilité dans la phase de conception.

Chrome et Firefox sont les deux navigateurs qui prennent le plus en charge les fonctionnalités PWA, tandis que Safari refuse toujours de prendre entièrement en charge les techniciens de service dans PWA.

L'absence de cette technologie de base PWA a entraîné l'absence de fonctionnalités primordiales telles que les notifications push et la navigation hors ligne. Vous pouvez toujours voir Facebook PWA sur tous les produits Apple, mais il n'est pas optimisé comme sur les autres navigateurs.

Gardez un espion en mode hors ligne

Nous nous souvenons tous du tristement célèbre dinosaure Google qui nous tient occupés et nous amuse à comprendre pourquoi la connexion Internet est coupée. La même astuce peut s'appliquer ici lorsque le contenu a besoin d'un peu plus de temps pour se charger.

Remplacer le spinner de chargement par quelque chose de moins frustrant, quelque chose qui leur fait oublier le chargement leur fera penser que le site est plus rapide qu'il ne l'est.

Une autre excellente utilisation pour rendre le chargement beaucoup plus court est les écrans Skeleton, qui donnent aux utilisateurs un aperçu de ce à quoi s'attendre et de ce qu'il ne faut pas attendre, en même temps, les guidant vers chaque point d'intérêt de la page. Cependant, n'oubliez pas les Service Workers, qui permettent à votre site de stocker les données générées par les utilisateurs et de les mettre en cache correctement sans connexion Internet.

Optimiser pour le référencement

Lorsque Google met à jour les algorithmes, il existe un nouvel ensemble de règles à suivre pour se classer par le moteur de recherche. Concevez donc votre page à la fois en faveur de l'exploration de la machine et des vrais visiteurs derrière l'écran. Chacun doit être disponible via une URL.

Sans l'aide de PWA, les publications Facebook peuvent difficilement apparaître sur tous les moteurs de recherche pour les mots-clés pertinents. Ils ont tendance à être fortement présentés dans les postes supérieurs.

Voici quelques points à noter pour un site SEO-friendly :

• Le contenu rendu côté serveur est requis pour la vague d'indexation initiale et utilisez-le chaque fois que possible. Lorsque ce n'est pas le cas, vous pouvez compter sur des services de rendu dynamique fournis par des tiers.
• Spécifiez l'URL canonique par des balises canoniques sur chaque page.
• Évitez de vous camoufler par des robots de recherche ou de diffuser le même contenu.
• Assurez-vous que votre site est chargé rapidement en 5 secondes, ce qui augmente le temps passé sur la page et est hautement sécurisé.

Fonctionne avec différents types d'entrées

Si vous avez l'intention de concevoir le déclencheur pour une interaction avec un effet de survol, assurez-vous que les utilisateurs cliquent ou touchent pour l'activer. N'oubliez pas d'utiliser les éléments sémantiques précis et le code HTML non sémantique, et vous serez couvert.

Une autre chose est de garder la zone du clavier éloignée de la salle des messages, ce qui est courant lorsque PWA est en mode paysage. Facebook PWA a fait un travail fantastique pour s'assurer que ses utilisateurs reçoivent les interactions exactes sur différents appareils.

Validez votre PWA avec l'outil Lighthouse de Google

Lorsque vous avez besoin d'évaluer les performances de votre PWA pendant le processus de création ou après le lancement, vous pouvez compter sur Lighthouse, un site Web d'audit d'outils open source de Google. Lighthouse classe les sites Web en fonction de 5 paramètres sur une échelle de 1 à 100.

Les grands noms testent toujours au fur et à mesure de leur développement pour s'assurer que tout est couvert. PWA est également un facteur utilisé pour classer si un site Web est PWA.

Et quand c'est certain, la PWA sera mesurée en termes de vitesse, de sécurité, de conception réactive, de mise en cache, de performances hors ligne, d'indexation, de notifications push et d'expérience utilisateur.

Points clés à retenir

Pour faire ressortir le meilleur des deux mondes, adopter le meilleur des applications natives sur les sites Web, permettant ainsi à PWA un énorme avantage dans un avenir proche. L'avenir du paysage en ligne compromet l'impact des PWA.

Le rôle de pionnier de Facebook PWA a sûrement accéléré la révolution PWA tout en leur ramenant une expérience légère et une plate-forme robuste permettant aux utilisateurs du monde entier de se joindre à la conversation malgré la différence de capacité de connexion Internet.

Si vous recherchez un nom d'expert qui vous donne un sentiment de fiabilité pour vous aider à prendre en charge la transformation PWA, Tigren est celui qu'il vous faut.

Contactez-nous dès aujourd'hui pour bénéficier de services PWA de commerce électronique premium de haute qualité à un prix raisonnable. Commencez à gagner de l'argent plus tôt et augmentez votre retour sur investissement dès aujourd'hui.