Les Progressive Web Apps (PWA) : qu’est-ce que c’est ?

boiteaoeufsboiteaoeufs

Nous entendons de plus en plus parler des PWA (Progressive Web App) dans le monde du web et du mobile. Une technologie largement encouragée par Google depuis 2015 et qui ne cesse d’évoluer avec les mises à jour de nos smartphones.

Depuis ces dernières années, l’audience mobile dépasse celle de l’ordinateur : 42% des Français utilise un smartphone pour se connecter sur internet, 7% une tablette, contre 38% un ordinateur. Les utilisateurs passent de plus en plus de temps sur leurs smartphones, en utilisant des applications natives, plutôt que le web. C’est pourquoi, l’intérêt des PWA est de plus en plus fort.

Chez Boite à Oeufs, nous avons décidé de vous faire profiter au maximum des nouvelles technologies, c’est pour cela que nous allons vous expliquer ce que sont les Progressive Web Apps et en quoi elles seraient bénéfique pour vous.

Qu’est-ce qu’une Progressive Web App ?

Il s’agit tout simplement d’un site web, combiné à certaines technologies lui permettant de s’enregistrer sur votre écran d’accueil et de s’ouvrir comme une application native. Ainsi les PWA ont les avantages d’une app native et sans ces inconvénients !

  • Elle s’affiche en plein écran, sans la barre du navigateur
  • Possibilité d’utiliser les fonctions du téléphone : notifications, API comme le GPS, la caméra…
  • Un chargement ultra rapide
  • Possibilité de l’utiliser même hors connexion

Le principal intérêt est que votre site peut devenir une application sans avoir besoin de passer par les boutiques d’applications (App Store, Google Play Store…) pour l’installer.
De plus, vu qu’il s’agit de votre site internet à la base, vous économisez beaucoup de temps de développement car il n’est pas nécessaire de faire une application native.
Enfin, avec une PWA, vous bénéficiez du référencement de Google directement de votre site internet, ce qui est bien plus avantageux. En effet, être visible sur un store est très compliqué : il faut avoir la chance d’être sélectionné dans les applications à la une ou faire partie des 0.001% d’applications les plus téléchargées…

Imaginez votre boutique en ligne directement disponible sur smartphone et  sans connexion ? Boite à Oeufs vous propose de transformer votre site en une Progressive Web App.

Les intérêts d’avoir une Progressive Web App

Vous l’aurez donc compris, une PWA est plus intéressante qu’une application native sur bien des points :

  • Les PWA sont plus légères en espace de stockage sur votre mobile
  • Pas besoin de faire du développement lourd avec du code natif
  • Le coût de développement est moindre
  • Visibilité bien meilleure : une recherche Google suffit à trouver votre site et à installer la PWA
  • Une PWA est très rapide grâce à un système de cache performant
  • Elle peut-être utilisée hors connexion
  • Elle offre la possibilité d’envoyer des notifications push pour fidéliser vos clients

Comment installer une progressive web apps ?

Vous me direz, c’est bien joli tout ça, mais comment faire pour installer une Progressive Web App ?

Sur Android, il est très facile d’installer une PWA car le système vous le proposera automatiquement avec une petite bannière. Sur cette dernière se trouve un bouton vous permettant de placer la web app sur l’écran d’accueil de votre téléphone.
Sur iOS, c’est un peu plus complexe car ce n’est pas encore natif.

Nous allons vous montrer comment faire directement avec notre site !

Direction le site de Boite à Oeufs, depuis votre mobile : www.boite-a-oeufs.com.
Touchez ensuite le bouton de partage, se trouvant dans la barre du navigateur, au bas de l’écran.
Choisissez le bouton « Sur l’écran d’accueil », puis validez.
Et voilà, la PWA est installé !

webappsbao - Les Progressive Web Apps (PWA) : qu'est-ce que c'est ?

Que faut-il mettre en place pour que ça fonctionne ?

Il y a 3 étapes à respecter pour mettre en place une PWA sur votre site internet, que voici :

1. Le manifeste :

Un fichier manifeste est un petit fichier, au format JSON, décrivant toutes les métadonnées de la web app. Par exemple, il contient le nom, la langue, l’icône utilisée sur l’écran d’accueil, etc…

Ce fichier va déterminer comment le système va enregistrer l’app sur votre smartphone.

2. Passez votre site en HTTPS :

Les Progressive Web App utilise ce qu’on appelle des Service Workers (voir ci-dessous). Or ces derniers ne fonctionnent qu’avec une connexion sécurisée.

C’est pourquoi il faudra que votre site utilise obligatoirement le protocole HTTPS (HyperText Transfer Protocol Secure). C’est un protocole qui consiste à vérifier l’identité du site pour le visiteur via un certificat d’authentification.

Si votre site n’est pas sécurisé, nous vous conseillons de le faire rapidement en nous contactant. De plus, Google privilégie les sites HTTPS dans son classement, ce qui est bénéfique pour votre référencement !

3. La mise en place d’un Service Worker

Qu’est-ce qu’un service worker ? Il s’agit d’un script JavaScript, chargé parallèlement au code de la page de votre site internet dans votre navigateur et qui fonctionne en arrière plan.
Il se comporte un peu comme un serveur proxy, c’est-à-dire qu’il va servir d’intermédiaire entre le navigateur et internet.

Il va donc pouvoir, par exemple, stocker les données d’une page web en cache et la mettre à jour lorsque vous naviguez sur le site.
C’est là que nous retrouvons la possibilité d’ouvrir la PWA de notre site de façon rapide et même sans connexion internet. N’est-ce pas génial ?

Pour résumer il s’agit d’un système qui s’exécute en arrière-plan de votre navigateur et qui va effectuer des actions à l’appel de certains événements.

service worker - Les Progressive Web Apps (PWA) : qu'est-ce que c'est ?

Les progressive Wep apps arrivent à grands pas et révolutionnent vraiment l’utilisation du web avec nos Smartphones. Elles seront de plus en plus présente à l’avenir.

Alors si vous aussi vous souhaitez transformer votre site internet en Progressive Web App, n’hésitez pas à nous contacter.

Résumé
Nom de l'article
Progressive Web App (PWA)
Nom du fournisseur
Boite à Oeufs,
44 rue Robert Schuman,Colmar,Alsace-68000,
Telephone No.06 98 96 50 31
Région
France
Commentaires 0
Il n'y a aucun commentaire pour le moment.

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.

Awwwards
Design Nominees