Si vous avez navigué sur vos sites favoris au cours des dernières années, vous aurez sûrement remarqué qu'on vous demande de plus en plus régulièrement si vous souhaitez ajouter une page à votre écran d'accueil sur votre téléphone, ou si vous souhaitez installer l'application. Avoir un site, c’est bien, mais quel plaisir de pouvoir le lancer via son téléphone, sa tablette ou sur son bureau d'ordinateur en 1 clic. On vous parle aujourd'hui de cette technologie qui peut en perdre quelques uns.

Tout d’abord, commençons par une définition scolaire 🧑‍🏫

Une PWA, acronyme de Progressive Web App est un procédé qui permet de transformer un site web sous la forme d'une application, accessible sur mobile et ordinateur et qui ajoute un paquet d'autres fonctionnalités et avantages.

Dans un monde de plus en plus connecté et où tout doit aller vite, quel plaisir de pouvoir lancer son site web favori, ou son outil de travail en 1 clic depuis son bureau ou le "launcher" de son téléphone !

Voici une liste non exhaustive des avantages d'une PWA :

Icône pour lancer directement l'application

Accès à certaines fonctionnalités natives du support (bluetooth, photos, micro, géolocalisation, etc..)

Un développement plus rapide et économique qu'une application mobile ou un logiciel

Le référencement ASO (Application Store Optimisation) est moins intéressant en cas de publication sur les stores

Son installation sous forme d'application est peu connue du grand public, malgré les messages du système qui le proposent

Accès limité aux fonctionnalités natives

Malgré cela, le cas de Twitter permet de se rendre compte de l'impact que cela peut avoir sur votre produit. Depuis la mise en place de leur PWA, Twitter a enregistré une augmentation de 65% de pages vues par session utilisateur, de 75% de tweets réalisés et une réduction du taux de rebond de 20% ! Tout ça en réduisant le poids de leur application de 97% (Source : web.dev).

Ce n'est pas toujours simple de déterminer quel type de développement est le plus adapté : est-ce qu'il vaut mieux faire un site web classique ? Une PWA ? Une application mobile ? Un bon vieux logiciel ? Comme souvent, ça va dépendre de votre produit et de son utilisation.

Vous souhaitez développer un intranet ou une application métier ? La PWA peut être très intéressante pour permettre à votre équipe d’installer l’outil sur leur ordinateur, téléphone ou tablette et de bénéficier de fonctionnalités supplémentaires, comme l'utilisation hors connexion qui peut s'avérer cruciale pour des équipes de techniciens qui travaillent sur le terrain sans connexion WiFi.

Pour un site vitrine ? C'est plus discutable. En effet, une PWA n'apporterait pas d'avantages significatifs par rapport à une développement traditionnel.

Vous l'aurez compris, cela dépend bien souvent du produit que vous souhaitez développer et de son utilisation. Les logiciels et applications mobiles natives sont eux plus lourds à développer mais seront plus puissants. Ils offriront une meilleure interaction avec le device sur lesquels ils sont installés (accès à la batterie, à la luminosité, etc...). Une PWA est-elle plus économique à développer et permet d'avoir un MVP (Minimum Viable Product) en un claquement de doigt - ou si je peux me permettre, de clavier !

Le saviez-vous ? Vous pouvez même publier votre application sur certains stores !

Et si je vous disais qu’il existe désormais les TWA (Trusted Web Activity) ? C'est un terme encore très peu connu qui consiste à publier une PWA sur un store. Google Play le permet. Dinguerie non ? 😎

Les PWA offrent beaucoup d'avantages et leur utilisation devient de plus en plus populaire. Au point que des entreprises comme Google les favorise de plus en plus dans leur algorithme de référencement (et ce n'est pas rien !).

Mais comme toutes les solutions, il faut s'assurer que c'est la bonne pour vous avant de vous lancer dans un quelconque développement. Du coup, si vous êtes en phase de réflexion sur un projet web et que vous vous posez la question de la PWA : n'hésitez pas à venir en discuter avec nous ! 👋

Installer une page web ?! Quelle sorte de magie est-ce donc ?! Attachez vos ceintures, on vous emmène dans le monde magique des PWA !

Définition et réflexions sur l'utilisation des PWA (Progressive Web App)

Pourquoi utiliser des PWA (Progressive Web App) ?

Le choix des technologies pour réaliser un projet est une étape essentielle à réaliser avant le lancement de ce dernier. Pour cela nous avons besoin de connaître plusieurs paramètres, d'un brainstorming avec la cheffe de projet et les designers et d'un café ou deux. (la pénurie de dosettes n’est pas permise ☕).

$parameters = Les paramètres à prendre en compte

Le triangle d’or est une méthode de gestion de projet web, qui s’applique à la perfection dans la réflexion du choix des technologiques à utiliser. On va prendre en compte trois éléments pour nous aider à faire notre choix :

En fonction du type de projet, (e-commerce, site vitrine, application web...), les contraintes ne seront pas les mêmes. Le client peut aussi ajouter des spécificités, comme l’accès à un back-office ou un site traduit en plusieurs langues. Il est capital d'anticiper tous ces éléments afin de choisir les technologies qui supporteront au mieux le projet, sa maintenabilité et ses évolutions futures.

Eh oui ! Il existe beaucoup de langages de développement et de technologies différentes, notre panel est large mais pas infini ! 😎 Si nous essayons toujours de choisir les technologies les plus adaptées à chaque type de projet, nous faisons aussi en fonction de nos compétences internes respectives. Et ça évolue vite, très vite même ! Nous nous tenons donc régulièrement à jour pour pouvoir travailler sur de nouvelles technos si nécessaire !

$launchAlgorythme = On mélange les paramètres et on choisit

⚠️ Attention, on commence à parler technique.

Les sites vitrines ont beaucoup de contraintes : ils sont souvent traduits en plusieurs langues, avec le besoin d’un back-office et une optimisation SEO poussée.

Nous avons donc le choix entre un site Wordpress, qui nous permettra d’intégrer directement le back-office, WPML pour la traduction et Yoast ou Rank Math pour le SEO, tout cela sur la base d’un thème sur mesure. L'autre option : un site utilisant un headless CMS comme Strapi pour l’API et le back-office ainsi qu’un front-end en Next ou Nuxt.

La complexité des applications web vient surtout du fait qu'elles sont réalisées sur-mesure pour chacun de nos clients et de leurs projets.

Nous partons systématiquement sur une API REST et un front basé sur un framework JS :

Pour l’API : API plateforme, Laravel, Slim ou Express JS

L’avantage d’une telle configuration ? Imaginons que vous ayez une application web et vous souhaiteriez une application mobile. Nous n'avons pas à tout refaire ! Nous avons déjà toute l’API (les données de l'application) et il ne nous reste plus qu’à développer l’interface mobile de l’application et le tour est joué ! Cela représente un gain de temps et une maintenance simplifiée.

C'est le type de projet le plus délicat. Chaque site e-commerce est différent de par ses spécificités. On parle d'une boutique de quelques produits à une boutique de milliers de références, de boutiques internationales traduites dans plusieurs langues, de contenus à optimiser fortement en SEO, et bien d'autres complexités !

C'est pour cela qu'en fonction du périmètre de chaque projet, les technologies utilisées pour le développement de chaque e-commerce peuvent varier, allant d'un site sur-mesure à une base CMS comme Wordpress.

La base du travail de notre agence repose sur l'expérience utilisateur. Chez nous, pas de thème réutilisable sur lequel on change simplement les couleurs et le logo. Tout est fait sur-mesure pour chacun de nos client, à partir d'un travail de réflexion et de conception en amont du développement.

A partir des maquettes réalisées pour un projet, nous utilisons systématiquement pour leur intégration le préprocesseur SCSS, compilé avec du Gulp ou Webpack. Une grosse phase de recettage est également réalisée conjointement par les équipes créatives et techniques en fin de projet pour s'assurer que le rendu final soit bien conforme à ce qui était défini.

Les technologies que nous utilisons nous permettent de répondre aux besoins d’un grand nombre de projets. Si nous n'avons pas de grille fixe classant automatiquement les projets dans des technologies pré-définies, nous nous basons sur notre expérience et nos acquis pour choisir au cas par cas les meilleures technologies pour chaque projet !

L'objectif final est toujours le même : développer un site de manière efficace, qu'il soit performant, sécurisé, facile à maintenir et à gérer au quotidien. Et surtout, qu'il propose une chouette expérience aux utilisateurs. 😊

Chaque projet dispose de ses challenges et contraintes : comment fait-on pour pour choisir les technologies les plus adaptées ?

Comment choisit-on les meilleures technologies web pour votre projet ?

Under the hood: quelles technologies pour votre projet ?

Under the hood: quelles technos pour votre projet ?

Design, code & vied’une agence bordelaise