Pourquoi faire une PWA sur Bubble ? Quels sont les avantages d’une PWA ?

Depuis quelques années, les progressive web app (PWA) ont fait leur apparition sur le web et permettent désormais aux entreprises de proposer des web app sur l’écran des smartphones de la même manière qu’une application native. Vous vous demandez quel en est l’intérêt ? L’agence Scroll vous explique ici pourquoi faire une PWA grâce à Bubble et quels en sont les avantages. 

Qu’est-ce qu’une PWA ?

Une PWA (progressive web app) est une application web développée grâce à différents langages de développement comme le HTML5, le CSS3 ou le JavaScript et exécutée sur un navigateur web. Le fonctionnement d’une PWA est très proche de celui d’une application native que l’on pourrait télécharger sur un store. 

Pour être considérée techniquement comme une PWA, l’application doit présenter plusieurs éléments importants : le HTTPS,  un ou plusieurs Service Workers et un fichier manifest.

Le HTTPS signifie que l’application est hébergée sur un réseau sécurisé. Cela permet de présenter une application de confiance et sécurisée.

Le service worker est un script exécuté en parallèle de la page ouverte sur le navigateur web et qui permet de présenter des pages rapides, fiables, hors-ligne et des fonctionnalités supplémentaires.

Le fichier manifest est un fichier au format json qui va contenir et contrôler l’affichage des différents éléments nécessaires pour que votre site apparaisse comme une application. On retrouve par exemple le nom de l’application, l’URL ainsi que les icônes. 

Ces trois éléments correspondent exactement à ce que documente le guide MDN sur les PWA installables : un site servi en HTTPS, un manifeste valide déclarant au minimum un nom, des icônes aux bonnes tailles et un mode d’affichage, et, selon les navigateurs, un service worker enregistré. Le comportement diffère ensuite selon la plateforme, et c’est ce qui explique la plupart des taux d’installation décevants : sur Android, le navigateur peut proposer l’installation de lui-même ; sur iOS, elle passe uniquement par l’action « Ajouter à l’écran d’accueil » dans Safari. Sans un message qui l’explique au bon moment, personne ne la découvre.

L’objectif de la PWA est de créer une application qui bénéficie de la visibilité de l’accessibilité d’un site web et des fonctionnalités et de la puissance d’une application. 

Pourquoi faire une PWA sur Bubble ?

Il existe plusieurs raisons de transformer votre application en PWA grâce à Bubble. La PWA dispose de caractéristiques précises : 

Un point propre à Bubble mérite d’être posé avant de se lancer, parce qu’il ne relève pas de la PWA mais de l’application elle-même. Le contrôle d’accès aux données passe par les privacy rules, appliquées côté serveur : un type de données créé sans règle est lisible par tout le monde, y compris via l’API. Emballer l’application en PWA ne change rien à cela, le service worker met en cache ce que le serveur accepte d’envoyer. Et côté budget, chaque chargement de page et chaque workflow consomment des workload units, facturées 0,30 $ par tranche de 1 000 unités au-delà du quota : une PWA très consultée coûte donc plus cher qu’un site équivalent.

Il s’agit d’une application web donc hébergée et exécutable sur le web mais pensée pour ressembler à une application native.

Une PWA peut proposer différentes fonctionnalités comme l'utilisation du micro, du GPS ou encore de la caméra grâce aux services workers. 

Une nuance s’impose sur ces fonctionnalités matérielles, car leur disponibilité n’est pas uniforme. Une PWA atteint la caméra, le micro ou la géolocalisation via des API web dont la couverture varie selon le navigateur et le système d’exploitation, là où une application native accède à tout ce que la plateforme expose. Avant de promettre une fonctionnalité, la vérification utile consiste donc à tester sur les deux systèmes plutôt qu’à se fier à la documentation d’un seul. En contrepartie, la distribution est libre : pas de revue, pas de commission, pas de compte développeur à 99 $ par an, mais pas de découverte par recherche dans les magasins non plus.

Lors de son utilisation, ses fonctionnalités sont mémorisées dans le cache afin de préparer une utilisation future qui pourrait se faire hors-ligne.

Elle est compatible sur tous les navigateurs.

Enfin, elle est téléchargeable par l’utilisateur si celui-ci le souhaite. 

Les avantages d’une PWA

Transformer son application en PWA grâce à Bubble permet plusieurs avantages :

La PWA pouvant être utilisée comme un site web et comme une application, elle permet donc d’utiliser certaines fonctionnalités de l’appareil en plus des fonctionnalités web. Il est donc possible d’utiliser le micro, le GPS, les notifications push, la caméra.

L’installation n’est pas requise. Sur une PWA l’accessibilité est plus intéressante qu’une application native car l’application est hébergée en ligne. Elle permet donc d’être accessible instantanément via un URL. Cela signifie aussi que vous ne dépendez pas des conditions d'acceptation des magasins d'applications.

Au même titre qu’un site web classique, la PWA se met à jour très facilement et très rapidement car il suffit de faire une simple mise à jour sur le serveur.

La PWA étant disponible sur différents supports, smartphones, tablettes et ordinateurs, cela permet d’élargir considérablement le nombre d'utilisateurs pouvant utiliser l’application. 

Les PWA bénéficient du SEO. Comme pour les sites web, elles profitent des mêmes possibilités de référencement sur les moteurs de recherche et sont donc crawler par Google.

Pour des performances quasiment similaires à une application native, une PWA est beaucoup moins gourmande en ressources et utilise moins de stockage.

Sur smartphone, il est possible de retrouver l'application directement sur l’accueil de son téléphone comme une application native. 

5 astuces pour créer sa PWA sur bubble

Pensez au logo

Votre PWA apparaîtra sur l’écran d’accueil d’un smartphone, vous devez impérativement travailler le logo de l’application. Le logo de votre application doit être lisible, impactant et adapté aux différents supports. Votre application devra se retrouver au milieu des autres applications natives et PWA.

Supprimez le footer 

Sur mobile, il est rare que les utilisateurs descendent tout en bas des pages. Il n’est donc pas nécessaire d’utiliser un footer. Ici vous pouvez donc le supprimer et afficher différemment dans la page les informations importantes que vous regroupiez auparavant dans le footer.

Imaginez votre PWA comme une app native

Lorsque que vous travaillerez l’UX de votre PWA imaginez là comme une application native ! Évitez d’utiliser des liens classiques comme on retrouve sur les sites web, privilégiez les boutons plus lisibles et adaptés aux écrans tactiles. Pensez aussi à adapter le menu de votre application.

Travaillez les chargements

Pour imiter les applications natives, pensez à travailler les différents écrans de chargement. Ajoutez un écran de démarrage, ajoutez des effets esthétiques aux chargements des éléments comme les images.

N’oubliez pas le desktop

Gardez en tête que votre application est utilisable sur desktop. Attention à ne pas suroptimiser votre PWA pour le mobile et délaisser la version desktop. Même si la priorité reste aujourd’hui le mobile, il est important que l’application soit compatible et adaptée correctement aux différents supports.

Exemples de PWA

Voici 3 exemples de progressive web app que vous connaissez surement tous aujourd’hui :

Agence Bubble : créez votre PWA avec Scroll 

Bubble est un de nos outils principaux chez Scroll. Nous l’utilisons quotidiennement dans de nombreuses réalisations. C’est pourquoi, nous avons mis en place l’agence Bubble. Grâce à notre parfaite maîtrise de Bubble et notre savoir-faire dans ce domaine, nous accompagnons nos clients sur des réalisations diverses et variées. Nous utilisons la puissance de Bubble pour proposer des applications inédites et construites sur-mesure, en un temps record.

Vous souhaitez créer une PWA ? Contactez-nous pour estimer votre projet !