Faire de Web App progressive (PWA) votre meilleur ami

«PWA est un révolutionnaire pour le développement Web. Il contribue à augmenter votre productivité en offrant une expérience utilisateur exceptionnelle combinant les avantages des applications Web et mobiles à un coût minimal. ”
Une poignée de main est une bonne pratique

Un shake avec PWA maintient votre client engagé. Et PWA est toujours prêt à devenir votre meilleur ami, alors pourquoi n'envoyons-nous pas une demande d'ami à PWA?

Il est temps de faire un pas en avant vers le PWA et je vais vous expliquer en quoi votre amitié est bénéfique pour vous avec le PWA!

Ne pas confondre avec PWA

Pour certaines raisons, beaucoup de gens pensent que les PWA sont des applications à page unique (SPA).
C'est faux, vraiment très faux (avec le code d'état 400).

Un SPA peut être un PWA, mais un PWA ne doit pas nécessairement être un SPA.

PWA aime travailler avec tout le monde

Un site Web construit sur n’importe quel framework ou bibliothèque comme ReactJs, Angular, VueJS ou même en HTML peut être un PWA.

En termes simples, une Web Progressive Web App est un site Web mobile transformé avec des fonctionnalités et des fonctionnalités supplémentaires qui lui confèrent un aspect «d’application». Il fonctionne à l'aide d'une instance de Browser et utilise service worker pour assurer un fonctionnement optimal, même sans connexion Internet fiable.

Si vous avez un mythe selon lequel PWA est une technologie Google, ces informations sont suffisantes pour effacer votre mythe. Les applications Web progressives sont basées sur les normes Web. Cela fonctionne avec tous les navigateurs et toutes les plateformes.

Il s’agit donc d’un site Web, mais il ressemble à une application mobile native, avec un écran de démarrage, un écran de chargement personnalisé, des animations plus fluides, des notifications push et aucune barre de navigation. Vos utilisateurs finaux moyens peuvent appeler cela une application mobile.

Les applications Web progressives sont des sites Web qui doivent satisfaire à trois exigences techniques:

  • Doit être servi avec HTTPS (Secure)
  • Avoir un fichier manifeste Web valide avec un ensemble d'icônes spécifique minimal
  • Devrait inscrire un technicien de service valide et une assistance hors ligne minimale

Nulle part rien dans ces exigences n'indique que le site Web doit utiliser JavaScript. En bref, vous devez inscrire le technicien de service à l’aide de JavaScript côté client.

PWA prend en charge les fonctionnalités suivantes:

  • Épingler à un écran d'accueil - Nous pouvons ajouter l'icône de notre application Web sur un écran d'accueil.
  • Notifications Push - Nous pouvons intégrer les notifications push comme dans une application native via Push API et Notification API pour le Web.
  • Écran de démarrage - Un fichier manifeste gère l’écran de démarrage de votre PWA afin d’atteindre son objectif, comme une application native.
  • Emplacement géographique - Nous pouvons accéder à l'emplacement actuel de l'utilisateur via l'API de géolocalisation
  • Mode de travail hors ligne - En raison de l’intervention de Service worker qui gère le mécanisme de mise en cache, nous bénéficierons d’une expérience utilisateur riche, même en l’absence d’Internet.
  • Accès aux fonctions multimédia - Nous pouvons accéder à des périphériques de microphone, vidéo et appareil photo. En outre, implémentez la fonctionnalité d’appel vidéo et audio à l’aide de l’API WebRTC.

Dans l’ensemble, vous n’avez pas besoin de développer une application mobile distincte pour le même projet si vos fonctionnalités sont remplies avec les fonctionnalités de PWA. Cela signifie que les PWA ont encore du mal à fournir certaines fonctionnalités de l’application native.

Ouais, c’est un moment de folie pour les développeurs Web. D'autres fonctionnalités utiles sont déjà en route. PWA a déjà hâte de proposer des fonctionnalités similaires à celles des applications natives. Voyons ces fonctionnalités qui nous seront vraiment utiles.

PWA prendra en charge les fonctionnalités suivantes à l'avenir, telles que:

  • Bluetooth - L'API Web Bluetooth est en cours de développement et nous allons bientôt accéder à Bluetooth sur la plate-forme Web.
  • Capteurs - Les capteurs sont une partie très importante de l’ère de développement d’aujourd’hui. Certains capteurs sont déjà en cours de développement: capteur de lumière ambiante, capteur de proximité, capteur d’accéléromètre, capteur de magnétomètre et capteur de gyroscope.
  • Partage natif - Nous pouvons appeler le mécanisme de partage natif du périphérique dans le cadre de l'API de partage Web.
  • Capteur d'empreinte digitale - Nous pouvons authentifier les utilisateurs via le capteur d'empreinte digitale à l'aide de l'API d'authentification Web. Mais est-il toujours en développement pour des raisons de sécurité?

Pourquoi tout le monde adopte le PWA de nos jours?

Après avoir lu quelques statistiques sur les grandes entreprises qui adoptent le PWA, vous connaîtrez le pouvoir du PWA et vous comprendrez pourquoi tout le monde veut opter pour le PWA.

Je souhaite vous montrer quelques données tirées d’études de cas PWA d’entreprises populaires:

  • Twitter a développé Twitter Web Progressive Web App en avril 2017 et dans le résultat, Twitter augmente le nombre de pages par session de 65%, le nombre de tweets envoyés de 75% et le taux de rebond de 20%.
  • Flipkart, le site e-commerce le plus important d’Inde, a décidé de mettre fin à sa stratégie d’application seule en 2015. Après cela, il est arrivé avec Flipkart Lite, qui fonctionne avec PWA, et vous serez étonné de lire C’est un excellent résultat. Les utilisateurs ont passé plus de temps sur le site à un taux de 3x. Les taux de réengagement sont 40% plus élevés, un taux de conversion supérieur de 70% à ceux qui arrivent via l'option Ajouter à l'écran d'accueil et une utilisation des données 3 fois inférieure par rapport à l'application native.
  • Alibaba.com, la plus grande plateforme de trading B2B en ligne au monde. Alibaba.com a adopté une nouvelle stratégie en tant que PWA, qui vise à offrir une expérience utilisateur exceptionnelle, à la fois pour les visiteurs novices et les visiteurs assidus. Leur nouvelle stratégie a donné des résultats surprenants. Alibaba.com a obtenu des taux de conversion supérieurs de 76% sur tous les navigateurs, 4% de plus d'utilisateurs actifs par mois sur iOS, 30% sur Android et un taux d'interaction 4x plus élevé depuis l'écran Ajouter à l'accueil.

Oui, c'est incroyable et nous devons accepter la beauté de l'application Web progressive. Vous comprenez maintenant pourquoi je vous oblige à faire de PWA votre meilleur ami.

Play Store est prêt à publier des PWA

Oui oui oui! Play Store et les PWA sont devenus des amis. Nous pouvons maintenant publier des PWA sur le Play Store à l'aide des activités Web de confiance (TWA). Google Chrome 72 a ajouté Trusted Web Activities pour prendre en charge l'affichage Web en plein écran sans afficher d'URL ni d'éléments associés au navigateur. Vous pouvez ainsi générer un fichier APK de votre application Web et le télécharger sur Play Store à l'aide du studio Android et de certaines connaissances en développement Android.

Ici, je vous recommande de regarder la vidéo ci-dessous pour obtenir une connaissance détaillée de TWA:

L'existence de PWA tels que Facebook Lite, Instagram Lite, Flipkart Lite et Twitter Lite utilise principalement WebView et nous donne une sensation similaire à celle d'une application. Mais gardez à l’esprit que Apple ne supporte toujours pas TWA.

En fin de compte, nous pouvons dire que PWA est une approche efficace et rentable pour développer nos applications Web. C'est sûrement un futur du développement web. Nous espérons que PWA nous servira plus à l'avenir, comme toujours.

Clap clap clap! Parce que applaudir est une bonne habitude