Qu’est-ce qu’une application Web progressive (PWA)? Pourquoi en voudriez-vous un? • Yoast

Publié le par



Edwin Toonen

Edwin est un spécialiste du contenu stratégique. Avant de rejoindre Yoast, il a passé des années à perfectionner ses compétences au sein du premier magazine de conception Web aux Pays-Bas.

Cela fait des années depuis le début de l’ère du smartphone. Avec elle est venue l’ère des applications natives. Les applications continuent de jouer un rôle énorme dans notre vie quotidienne, et de nombreux propriétaires d’entreprise se sont posé plusieurs fois la question: devrions-nous avoir une application? Bien sûr, la seule réponse à cela est – cela dépend. La création et la maintenance d’une application native sont lourdes et souvent assez coûteuses. Heureusement, il existe une autre option. Cette option combine les joies d’une application native avec la technologie que nous utilisons sur le Web: l’application Web progressive, a.k.a. PWA.

Qu’est-ce qu’un PWA?

Twitter.com est une PWA

PWA signifie application Web progressive. Il s’agit d’une application construite à partir des technologies Web que nous connaissons et aimons tous, comme HTML, CSS et JavaScript, mais avec une sensation et des fonctionnalités qui rivalisent avec une application native réelle. Grâce à quelques ajouts intelligents, vous pouvez transformer presque n’importe quel site Web en une application Web progressive. Cela signifie que vous pouvez créer un PWA assez rapidement, en ce qui concerne une application native assez difficile à développer. De plus, vous pouvez offrir toutes les fonctionnalités des applications natives, telles que les notifications push, le support hors ligne et bien plus encore.

De nombreux sites que vous trouvez en ligne sont en fait une application Web progressive. Prenez twitter.com, par exemple. Si vous visitez ce site sur votre smartphone, vous pouvez l’installer sur votre écran d’accueil. Maintenant, en ouvrant le site Twitter enregistré, vous remarquerez qu’il ressemble et fonctionne exactement comme une application native. Il n’y a pas de fenêtre de navigateur ou rien. Il n’y a aucune différence à l’exécuter à partir d’un iPhone ou d’un smartphone Android. Connectez-vous simplement et vous êtes prêt à partir. C’est un avantage majeur de créer votre application Web avec un PWA à l’esprit.

Les PWA gagnent en popularité. De nombreux grands sites sont des PWA, comme Starbucks.com, Pinterest.com, Washingtonpost.com et Uber.com sont en fait installables sur votre écran d’accueil et offrent une expérience comparable à leurs applications natives.

Quelle est la différence entre une application native et une PWA?

Une application native, comme celles que vous téléchargez depuis l’App Store d’Apple ou le Play Store de Google, est souvent construite dans un langage de programmation spécifique à cette plate-forme. Donc, pour les applications iOS, ce serait Swift et pour les applications Android, Java. Si vous souhaitez créer une application pour ces plates-formes, vous devez connaître la technologie. Oui, il existe des raccourcis, mais ceux-ci ont leurs propres limites. Si vous voulez avoir une application sur toutes les plateformes mobiles, vous devez connaître toutes les différentes technologies. Il n’y a pas de moyen facile d’en créer un et de le publier dans tous les magasins.

Bien sûr, il existe des moyens de tirer le meilleur parti des deux mondes. Une application web progressive, par exemple. Cela fonctionne dans le navigateur et – une fois enregistré sur l’écran d’accueil – fonctionne comme une application native. Il accède même au matériel et aux logiciels sous-jacents auxquels le navigateur ne peut pas accéder pour des raisons de sécurité. Si le PWA fonctionne très bien, les utilisateurs ne sauront jamais qu’ils utilisent une application Web au lieu d’une application native.

Il y a bien sûr quelques mises en garde. Bien que les navigateurs aient rapidement adopté la technologie pour cela, il existe encore quelques limitations. Sur iOS, la technologie nécessaire fonctionnait de manière irrégulière dans Safari. Apple ne prend pas (encore) tout en charge, ce qui en fait un peu une corvée pour obtenir la même expérience exacte partout.

Quels sont les avantages d’un PWA?

La principale raison pour laquelle tout le monde court après les applications est qu’elles offrent un plus grand engagement. Les utilisateurs qui installent votre application sont vos plus grands fans et ils sont plus susceptibles de transformer leur utilisation en ventes ou en inscriptions. Grâce aux notifications push, il est beaucoup plus facile de renouer avec les utilisateurs. Les applications peuvent offrir une excellente expérience qui peut faire du bien à une marque.

Nous avons parlé de certains des avantages des PWA dans cet article, mais voici un bref aperçu:

  • Vous n’avez pas à passer par le processus pour accéder aux différentes boutiques d’applications
  • Vous pouvez créer des PWA avec des technologies Web courantes
  • Ils sont souvent moins chers à construire
  • Comme vous transformez votre site en application, vous aurez moins de bases de code à gérer
  • Les PWA sont réactifs et fonctionnent avec de nombreuses tailles d’écran différentes
  • Les PWA sont lisses, rapides et légers
  • Pas besoin de remettre de gros morceaux d’argent à Google et Apple
  • Ils fonctionnent hors ligne, contrairement à votre site habituel
  • Les PWA sont détectables via les moteurs de recherche (qui ont une audience beaucoup plus large que les app stores. De plus, si vous le souhaitez, vous pouvez toujours faire distribuer vos PWA via les app stores)
  • Vous pouvez utiliser les notifications push pour réengager les utilisateurs
  • L’installation d’un PWA peut conduire à un engagement plus élevé

Pourtant, les applications natives gagnent parfois. Les PWA ont un accès de plus en plus profond au système d’exploitation d’un smartphone, mais une application native peut aller encore plus loin. De plus, il y a des limites à ce qu’une PWA peut faire. Par exemple, les PWA ne sont pas le meilleur choix lorsque vous souhaitez créer des jeux haute performance.

Dans l’ensemble, il est très logique de penser à avoir un PWA dans votre stratégie mobile. Mais, la principale question que vous devez vous poser est: mon public le veut-il?

C’est pour qui?

Tout le monde devrait-il simplement construire un PWA et en finir avec lui? Non, considérez votre entreprise et – plus important encore – votre public cible. Utilisent-ils même des applications? N’est-ce pas une manière trop complexe d’arriver à ce que vous voulez réaliser? Encore une fois, comme tout, vous devez rechercher les besoins de votre public. Demandez-vous, que voulez-vous que cette technologie fasse? Où sont vos utilisateurs? Ont-ils une bonne connexion de données et un matériel solide? Comment et où utilisent-ils votre contenu? Et pensez-vous qu’une application peut les aider à mieux faire leur travail?

Les PWA sont géniaux et leur mise en œuvre ne doit pas être si difficile. Mais ce n’est pas parce que c’est facile que vous devriez le faire. Si votre public n’en a pas besoin, pourquoi en créeriez-vous un?

Quelles sont les préoccupations SEO d’une PWA?

Le PWA est intrinsèquement centré sur le Web. Il est né du Web et développé avec les moteurs de recherche à l’esprit pour faciliter la découverte. Bien sûr, vous pouvez créer une application Web progressive à partir de n’importe quel ancien site et cela ne prend pas beaucoup de temps. Cependant, de nombreux PWA utilisent JavaScript pour créer des fonctionnalités plus complexes et bien que les moteurs de recherche soient devenus aptes à rendre JavaScript, cela peut toujours être une source de préoccupation.

Lors de la configuration d’un PWA, vous devez vous assurer que votre JavaScript est accessible. Ne bloquez pas les fichiers pour les bots et assurez-vous que les liens sont disponibles. Pour améliorer le processus de rendu, vous pouvez faire en sorte que votre framework JavaScript utilise le rendu côté serveur.

Transformer votre site en PWA ne signifie pas que vous améliorez directement le référencement de ce site. S’il est judicieux de transformer votre site en PWA, faites-le, mais ne le faites pas pour les avantages SEO perçus. Si vous avez une grande PWA, vous offrez à vos utilisateurs une expérience utilisateur fantastique, ce qui pourrait vous faire passer votre concurrence. À cet égard, c’est une bonne idée de les consulter pour votre stratégie de référencement mobile.

Quels sont les trois principaux éléments constitutifs?

La configuration d’un PWA ne prend pas beaucoup de temps. Il y a trois choses que vous devez fournir avant que votre site ne se transforme en PWA valide.

  • Une connexion sécurisée (HTTPS): Les PWA ne fonctionnent que sur des connexions sécurisées, vous devez les servir via une connexion sécurisée. Ce n’est pas seulement pour des raisons de sécurité, mais c’est aussi un facteur de confiance très important pour les utilisateurs.
  • Un travailleur de service: Un travailleur de service est un morceau de script qui s’exécute en arrière-plan. Cela vous aide à déterminer comment gérer les demandes réseau pour votre PWA, ce qui permet de faire un travail plus complexe.
  • Le fichier manifeste: Ce fichier JSON contient des informations sur la façon dont votre PWA doit apparaître et fonctionner. Ici, vous déterminez le nom, la description, les icônes, les couleurs, etc.

Voici un exemple de manifeste de Google:

{
  "short_name": "Weather",
  "name": "Weather: Do I need an umbrella?",
  "description": "Weather forecast information",
  "icons": [
    {
      "src": "/images/icons-192.png",
      "type": "image/png",
      "sizes": "192x192"
    },
    {
      "src": "/images/icons-512.png",
      "type": "image/png",
      "sizes": "512x512"
    }
  ],
  "start_url": "/?source=pwa",
  "background_color": "#3367D6",
  "display": "standalone",
  "scope": "/",
  "theme_color": "#3367D6"
}

Ça n’a pas l’air trop dur, non? Un couple de choses intéressantes dans cette liste:

  • start-url: cela détermine où votre application doit démarrer. Il est préférable de laisser les utilisateurs atterrir sur une page spécifique pour votre PWA.
  • display: cela vous aide à déterminer le type d’interface utilisateur de navigateur que vous souhaitez afficher. Les options sont fullscreen, standalone, minimal-ui et la norme browser interface.

Ces trois éléments répertoriés ci-dessus sont les exigences minimales pour exécuter un PWA. Vous pouvez étendre la fonctionnalité via JavaScript (frameworks).

Comment mettre en place un PWA?

Il existe de nombreuses ressources pour essayer de créer une PWA simple. Cela vous permet d’avoir une idée du processus. Google a un excellent, facile à suivre tutoriel sur PWAS sur le site web.dev. Mozilla a beaucoup de documentation sur création d’applications web progressives. Microsoft a également un développeur riche documents sur la création de PWA. Microsoft a même construit un outil appelé PWABuilder cela vous aidera à transformer votre site en PWA. Bien sûr, il existe des plugins WordPress qui vous aident à faire un PWA de votre site. En outre, Google travaille à apporter un support de base pour PWA vers WordPress Core.

Engagez vos utilisateurs avec une application Web progressive

Les applications Web progressives peuvent être un excellent ajout à votre boîte à outils mobile. Bien fait, ils sont rapides, fonctionnent hors ligne et fonctionnent comme une application native. Dans l’ensemble, ils peuvent offrir à vos utilisateurs une expérience utilisateur impressionnante. Les utilisateurs engagés sont des utilisateurs satisfaits, non?