Vue PWA : un développement d’applications Web progressif avec Nuxt

Saviez-vous que 31 % de toutes les ventes de commerce électronique proviennent d’appareils mobiles ? Et ce nombre n’a cessé d’augmenter depuis 2010.

En tant que développeur Web avec une boutique de commerce électronique ou travaillant pour un propriétaire de commerce électronique, vous devriez probablement essayer de rendre l’expérience d’achat optimale pour vos utilisateurs mobiles (ou clients).

L’utilisation d’une application Web progressive est exactement ce dont vous pourriez avoir besoin. Aucune attache (d’accord, une attache… mais nous y reviendrons) et une puissante expérience mobile. C’est pourquoi nous examinerons aujourd’hui le développement de Vue PWA et comment il peut vous aider à obtenir plus de trafic, plus d’engagements et des conversions élevées. Tout ce qu’il faut, c’est un peu de travail sur les jambes au départ.

Nous avons déjà abordé ce sujet dans un article précédent en utilisant Gatsby, mais il est presque impossible de couvrir tous les avantages des PWA en un seul message. À vrai dire, nous n’avons fait qu’effleurer la surface. Cet article expliquera donc plus en détail pourquoi vous seriez fou de ne pas développer de PWA pour votre site.

Plus précisément, nous examinerons :

Un examen rapide des applications Web progressives
Statistiques montrant les avantages des PWA
Pourquoi nous construisons une PWA Vue cette fois-ci
Comment créer votre propre Vue PWA

Un examen rapide des applications Web progressives

Il y a quelques semaines, nous avons fourni un guide du e-commerce PWA avec une démo live de Gatsby. Nous y avons fourni une définition progressive de l’application Web, quelques-uns des principaux avantages et quelques exemples de sites de commerce électronique PWA que vous pouvez consulter. Si vous n’avez pas encore lu cet article, je vous recommande vivement de le faire car il fournira un excellent cadre pour ce que vous êtes sur le point de lire.

Cependant, il n’y a tout simplement pas assez de temps ou d’espace pour tout couvrir sur les PWA en une seule séance. C’est pourquoi nous allons étendre la définition originale de notre article Gatsby PWA et approfondir un peu. Voici la définition que nous avons fournie la dernière fois :

Application Web progressive est un terme générique inventé par les ingénieurs de Google. Il s’agit plutôt d’un ensemble de principes de développement que d’une technologie ou d’une pile spécifique.

Les applications développées de cette manière gardent trois principes à l’esprit : fiabilité, performances, et engagement. Ce sont les critères définis par Alex Russel, développeur chez Google et sans doute le père des PWA, en 2015, et ils constituent la base fondamentale de ce qui peut être considéré comme une application Web progressive.

En termes simples, cependant, Smashing Magazine propose une autre définition qu’il serait intéressant de noter ici :

Une application web évolutive tire parti des dernières technologies pour combiner le meilleur des applications web et mobiles. Considérez-le comme un site Web construit à l’aide de technologies Web, mais qui agit et ressemble à une application.

C’est pourquoi les PWA sont si attrayantes. Ils tirent parti de tous les avantages de l’UX mobile et les combinent avec la vitesse et la fiabilité du développement Web classique. Comme le souligne Nadav Dakner, créer une application sans rapport avec votre site en ligne signifie que vos utilisateurs doivent suivre différentes étapes pour obtenir l’application (rechercher dans l’App Store, télécharger et installer). Les PWA, en revanche, sont les pages de votre site réel qui sont diffusées sur l’appareil mobile de votre utilisateur, et elles peuvent être installées sur leur page d’accueil en un seul clic.

Comme nous le savons d’après les lois du commerce électronique, moins de travail pour les clients équivaut toujours à plus de clients.

Une fois qu’un site dispose d’une PWA créée et prête à l’emploi, Chrome le pousse à être installé sur l’appareil mobile d’un utilisateur tant qu’il répond aux critères suivants :

Il fonctionne sous HTTPS. L’accent est mis sur le « S » là-bas. Votre site doit être sécurisé avec un certificat SSL.
Il a un manifeste d’application Web. Il s’agit d’un fichier JSON qui vous permet de personnaliser diverses fonctionnalités de votre application telles que le nom, les couleurs, le design, etc.
Il a un travailleur de service. Il s’agit d’un fichier JavaScript qui permet à votre PWA de fonctionner hors ligne (dans la mesure où il en est capable, bien sûr). C’est essentiellement le script qui travaille toujours sans relâche en arrière-plan.

Maintenant que nous savons ce qu’est une PWA et ce qu’elle doit être approuvée par Chrome, il est temps de voir des résultats concrets de sociétés célèbres qui utilisent actuellement des PWA.

Statistiques montrant les avantages des PWA

Jetons un coup d’œil à cinq statistiques remarquables tirées de PWAstats.com, une communauté en ligne qui permet aux entreprises de partager leurs avantages directs après le passage aux PWA :

« Tinder a réduit les temps de chargement de 11,91 secondes à 4,69 secondes avec sa nouvelle PWA. Le PWA est 90 % plus petit que l’application Android native de Tinder. L’engagement des utilisateurs est en hausse à tous les niveaux sur la PWA.
« Le test PWA de Forbes a vu une augmentation de 2 fois la durée moyenne des sessions utilisateur, 6 fois le taux d’achèvement et 20 % d’impressions supplémentaires. Charges en 0,8 s en baisse de 3 à 12 s.
« Trivago a enregistré une augmentation de 150 % pour les personnes qui ajoutent leur PWA à l’écran d’accueil. Un engagement accru a entraîné une augmentation de 97 % des clics sur les offres des hôtels. »
« Pinterest a reconstruit son site mobile en tant que PWA et les engagements de base ont augmenté de 60 %. Ils ont également constaté une augmentation de 44 % des revenus publicitaires générés par les utilisateurs et le temps passé sur le site a augmenté de 40 %.
« Twitter Lite a enregistré une augmentation de 65 % du nombre de pages par session, 75 % des Tweets et une diminution de 20 % du taux de rebond. Twitter Lite se charge en moins de 3 secondes pour des visites répétées, même sur des réseaux lents.

Maintenant, ce sont simplement les cinq premiers exemples que j’ai trouvés les plus intéressants. Mais il y a littéralement des pages sur des pages d’autres exemples comme celui-ci avec des entreprises locales qui voient des avantages tangibles à utiliser les PWA.

La ligne de fond ?

Les PWA obtiennent de bons résultats pour les entreprises. Ils augmentent le trafic, augmentent l’engagement des utilisateurs, diminuent les temps de chargement des pages et diminuent les taux de rebond. Tous ces facteurs conduisent à des conversions plus élevées et, vous l’aurez deviné, des revenus plus élevés. (c’est-à-dire de l’argent gratuit).

Ok, tu es vendu. Bien sûr, vous êtes. Après tout, j’ai déjà mentionné qu’il s’agit de l’un de ces rares exemples où quelque chose n’est pas trop beau pour être vrai et est en fait aussi génial qu’il y paraît. Mais j’ai mentionné qu’il y avait une chaîne attachée…

C’est une bonne quantité de travail pour construire une PWA. Il n’y a tout simplement aucun moyen de contourner cela.

Mais la bonne nouvelle est que nous sommes définitivement là pour vous aider. Nous allons créer une Vue PWA et vous montrer exactement comment nous l’avons fait pour nous assurer que vous passiez le moins de temps (et d’efforts) à tout comprendre par vous-même. Mais tout d’abord, voyons pourquoi nous construisons une PWA Vue cette fois-ci.

Pourquoi créer une PWA Vue ?

Voici la vérité totale et honnête à 100 % : il n’y a rien de spécial en soi à propos de Vue.js pour créer des PWA ; ce n’est tout simplement pas leur objectif principal.

Je mentirais si je disais le contraire. Alors pourquoi diable avons-nous choisi de construire une PWA Vue ? Parce que bien que Vue lui-même ne soit pas spécialement conçu pour les PWA, il dispose d’un outil plutôt cool que nous voulions montrer : Nuxt.

Nuxt.js est comme le frère jumeau de Next (qui fonctionne pour React) mais est une ressource puissante pour créer une PWA Vue. Nuxt.js construira essentiellement une PWA qui fonctionne immédiatement. Cependant, vous pouvez toujours modifier ses options par défaut telles que le nom, qu’il soit ou non téléchargeable sur votre page d’accueil, donner certaines autorisations, etc.

Ainsi, vous disposez d’une excellente PWA dès le départ, mais vous disposez également d’un certain niveau de personnalisation pour concevoir votre application Web progressive spécifiquement en fonction de vos besoins.

Comme vous pouvez l’imaginer, avoir un outil comme Nuxt est un gain de temps ÉNORME et vous permettra de profiter de tous les avantages d’une PWA Vue sans toutes les heures laborieuses qu’il faudrait normalement pour en créer une. Et comme nous cherchons toujours des moyens d’optimiser la productivité des développeurs, Nuxt est un excellent point de départ.

Encore une fois, c’est presque de l’argent gratuit. Examinons donc notre exemple Vue PWA et examinons comment vous pouvez réellement en créer un pour vous-même.

Comment créer votre propre PWA Vue avec Nuxt.js

Conditions préalables

1. Créer un projet Nuxt.js

La prise en main de Nuxt est incroyablement rapide, grâce au script npx create-nuxt-app. Exécutez simplement cette commande dans votre terminal :

npx create-nuxt-app YOUR-APP-NAME

Lorsque vous y êtes invité, suivez les instructions d’installation dans votre terminal.

J’ai sélectionné:

Langage de programmation: JavaScript
Directeur chargé d’emballage: NMP
Cadre d’interface utilisateur : CSS de vent arrière
Nuxt.js : modules : Application Web progressive (PWA)
Mode de rendu : Application à page unique
Cible de déploiement : Statique
Outils de développement: jsconfig.json

Si vous avez oublié d’ajouter le module PWA à ce stade, ne vous inquiétez pas, nous l’installerons plus tard de toute façon ! Si vous n’êtes pas familier avec Nuxt.js, vous pouvez consulter une description de chaque dossier dans cette section de leur documentation officielle.

Puisque nous utilisons Tailwind CSS, nous devrons installer toutes les dépendances requises en exécutant :

npm install --save-dev @nuxtjs/tailwindcss

Ajoutez-le à votre buildModules rubrique dans le nuxt.config.js déposer:

export default {
  buildModules: ['@nuxtjs/tailwindcss']
}

Ensuite, générez un fichier de configuration avec la commande suivante :

npx tailwindcss init

Nous récupérerons également le contenu de mes guides et produits à partir de fichiers de démarques. Par conséquent, je vais installer le frontmatter-markdown-loader module qui me permettra de récupérer n’importe quel front-matter à l’intérieur d’un objet JS.

npm i -D frontmatter-markdown-loader

À ce stade, vous devrez également mettre à jour le nuxt.config.js fichier avec les extraits suivants.

const path = require('path')

...

build: {
  extend(config, ctx) {
    config.module.rules.push({
      test: /\.md$/,
      loader: 'frontmatter-markdown-loader',
      include: path.resolve(__dirname, 'contents'),
    })
  }
}

Une fois cette opération terminée, vous pouvez servir votre projet localement en utilisant le npm run dev commande et visitez localhost:3000 dans votre navigateur.

2. Ajouter du contenu à notre application Web

Comme étape préliminaire, nous importerons du contenu dans notre application Web. Il y a plusieurs façons de s’y prendre. Si vous interrogez une API, vous pouvez ignorer complètement cette étape. Cependant, comme j’utilise Markdown dans cette démonstration, je vais stocker tous mes fichiers dans un contents/guides annuaire. De plus, je vais créer un guides.js fichier dans le même répertoire avec le code suivant :

export default [
  'coffee',
  'accessories'
]

Ce tableau me permettra de récupérer tous les articles disponibles sur le site par programmation. Cependant, vous devrez les renommer au nom de votre propre guide ou articles et le mettre à jour au fur et à mesure que vous ajoutez d’autres entrées.

3. Création de pages et de composants

Vous n’êtes pas familier avec les composants Vue ? Voici un guide de démarrage.

Ensuite, nous allons créer deux pages dont une page d’accueil qui listera nos guides de survie ainsi qu’une page pour lire les guides complets. Mais d’abord, nous devrons modifier notre mise en page pour inclure l’en-tête et le pied de page.

Ouvrez le default.vue fichier à l’intérieur du .nuxt/layouts répertoire et remplacez le contenu par le code suivant :

<template>
  <div class="main">
    <Header />
    <nuxt />
    <Footer />
    <script src="<https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js>"></script>
    <script
      id="snipcart"
      src="<https://cdn.snipcart.com/themes/v3.2.1/default/snipcart.js>"
      data-api-key="<YOUR_API_KEY>"
    ></script>
  </div>
</template>

<script>
import Header from "~/components/Header.vue";
import Footer from "~/components/Footer.vue";

export default {
  components: {
    Header,
    Footer
  }
};
</script>

Vous pouvez créer le vôtre Header.vue ou Footer.vue composant à l’intérieur du components annuaire.

Vous pouvez également ajouter le fichier JS de Snipcart ici ainsi que ses dépendances (n’oubliez pas de mettre à jour la clé API). Pour la feuille de style de Snipcart, vous pouvez l’inclure directement dans le nuxt.config.js déposer.

...
link: [
  { rel: 'stylesheet', href: '<https://cdn.snipcart.com/themes/v3.2.1/default/snipcart.css>' }
]
...

Maintenant, pour créer le…