conventir

Tutoriel PWA: Comment convertir votre site Web en PWA

Home » Blog » Tutoriel PWA: Comment convertir votre site Web en PWA

Table of Contents

préface: quelles sont les principales étapes pour convertir votre site Web en PWA (Progressive Web App)

Dans ce Tutoriel PWA, nous allons vous montrer comment convertir votre site Web existant en PWA (application Web progressive). C’est assez simple, ne nécessitant vraiment que les étapes générales suivantes:

  • Créer un manifeste d’application
  • Ajoutez-le à votre modèle HTML de base
  • Créer le technicien de service(service worker)
  • Servir le technicien de service à la racine de la portée que vous avez utilisée dans le manifeste
  • Ajoutez un bloc <script> à votre modèle HTML de base pour charger le service worker
  • Déployez votre application Web progressive
  • Testez et utilisez votre application Web progressive!

Prenons l’exemple du logiciel de téléphonie mobile. Considérez le logiciel Whatsapp. Lorsque Internet n’est pas connecté, vous pouvez toujours l’ouvrir, consulter les messages passés et même répondre à vos amis. Les messages sont envoyés automatiquement lorsqu’une connexion Internet téléphonique est établie.

C’est ce que PWA promet dans les applications Web. PWA permet aux applications Web de se synchroniser en arrière-plan lorsqu’il n’y a pas de réseau Internet et de fonctionner de manière transparente tout en offrant une expérience native à leurs utilisateurs

pwa Tutorial

Tutoriel PWA

Pourquoi avons-nous besoin de PWA et quelles sont leurs fonctionnalités?

PWA tutorial

Tutoriel PWA

Parlons de certaines des fonctionnalités clés qui ne sont pas disponibles dans les applications Web normales et qui sont fournies dans les applications avancées:

Fiabilité

Il devrait être rapide au moment du téléchargement de l’application, la vitesse de téléchargement devrait être au même instant ainsi que lorsque votre téléphone n’est pas connecté à Internet ou que votre application est lente. Dans sa dernière enquête, Google a constaté que 5% des utilisateurs quittaient le site s’il avait fallu plus de 5 secondes pour charger la page.

Vite

Le déplacement et le défilement entre les pages d’application doivent être fluides et rapides. Tout le monde déteste le défilement lent.

sensible

L’application devrait être disponible sur toutes les tailles d’appareils. L’application Web doit être comme un fluide qui déborde dans le récipient lorsqu’il est versé dans le récipient.

Installable

Si nous voulons rapprocher les applications Web des applications conventionnelles, nous devons les faire installer. Le raccourci d’application doit être sur l’écran d’accueil avec d’autres applications natives afin que l’utilisateur puisse accéder à la PWA en un seul clic.

Écran de démarrage

L’écran de démarrage est une image qui apparaît lors du chargement d’une application ou d’un jeu. Cela fait ressembler PWA à une application native.

Capacité à s’impliquer

L’application doit intéresser les utilisateurs. Un PWA a des fonctionnalités comme les notifications, les notifications, les icônes sur la page, la possibilité de s’ouvrir lorsqu’il n’y a pas de réseau, etc.

Toutes les fonctionnalités ci-dessus sont possibles dans les applications PWA. PWA est juste une application Web typique qui a accordé une attention particulière à l’expérience utilisateur.

PWA et interface utilisateur moderne

Certaines personnes pensent qu’un PWA est livré avec des interfaces utilisateur modernes comme ReactJs, Angular ۶ ou Vue.js. Enfin, pas forcément. PWA n’a rien à voir avec les frameworks que vous utilisez et ne nécessite que des composants spécifiques.

Comment PWA rend-il les sites Web disponibles hors ligne?

C’était exactement ma première question sur PWA. Comment puis-je ouvrir des applications Web sans Internet? Nous savons tous que les applications natives peuvent être ouvertes sans connexion Internet car lorsque nous les téléchargeons et les installons, leurs ressources vitales telles que les composants de l’interface utilisateur et d’autres informations sont stockées sur le téléphone … C’est exactement ce qui se passe chez PWA.

PWA stocke les fichiers HTML, les fichiers CSS et les images dans le cache du navigateur, et les développeurs peuvent contrôler entièrement les communications réseau. Tout cela est accessible par le technicien de service.

pwa Tutorial - convert your website to PWA
Tutoriel PWA

Qu’est-ce que les composants techniques PWA?

PWA possède des composants techniques importants qui fonctionnent ensemble et dynamisent régulièrement l’application Web. Les composants suivants sont nécessaires pour créer un bon programme PWA.

convertir votre site

Tutoriel PWA

avez-vous pensé à convertir votre site Web en une application Web progressive? Obtenons un aperçu spécifique des principales étapes pour convertir votre site Web en PWA:

TROIS PRINCIPALES ÉTAPES POUR CONVERTIR VOTRE SITE WEB EN PWA (tutoriel PWA)

Étape 1: passez à HTTPS pour convertir votre site Web en PWA (didacticiel PWA)

Il n’y a aucun moyen de le contourner: le protocole HTTPs est la SEULE voie à suivre en matière d’applications Web progressives!

Tous les échanges de données doivent être servis sur un domaine sécurisé: via une connexion HTTP!

Et comment passez-vous du HTTP aux HTTPs? Vous obtenez un certificat SSL auprès d’une autorité de confiance.

Maintenant, il y a 2 façons de s’en emparer:

  • si votre site s’exécute sur votre serveur (ou au moins vous avez un accès root à votre serveur), envisagez de configurer le certificat LetsEncrypt.
  • Si votre site Web fonctionne sur un hébergement partagé, le processus et le coût de votre certificat SSL (pour oui, il y aura des frais mensuels ou annuels) dépendent grandement de votre fournisseur.

Étape 2: créer un manifeste d’application Web

“Mais qu’est-ce qu’un manifeste d’application web?”, Vous pourriez vous demander.

Un fichier texte JSON qui contient toutes les métadonnées de votre PWA: description, portée, start_url, nom, images, affichage, short_name …

Ce sont ces informations qui permettent aux navigateurs de savoir avec quelle précision ils doivent afficher votre application une fois enregistrée en tant qu’icone d’écran d’accueil.

Maintenant, avant d’aller de l’avant et de partager un exemple de travail avec vous – celui qui comprend les entrées indispensables de tout manifeste d’application Web – je dois également souligner que:

Un lien vers ce fichier texte JSON doit être placé dans la <head> de toutes les pages de votre PWA:

Cela, bien sûr, après avoir:

  1. entré toutes les informations sur votre PWA
  2. copié le manifest.json
  3. créé un nouveau fichier “manifest.json” dans le répertoire racine de votre site
  4. et je l’ai collé là

Il doit être accompagné de:

  • Type de contenu: application / en-tête HTTP JSON ou
  • un type de contenu: application / manifeste + json

Et voici un exemple de code:

Une fois que la section «Manifeste» de l’onglet Application des outils de développement de Chrome a validé votre fichier JSON, il générera un lien «Ajouter à l’écran d’accueil» (Add to home screen) accessible sur tous les appareils de bureau.

Astuce: lorsque vous convertissez votre site Web en une application Web progressive, vous n’avez pas nécessairement besoin de configurer vous-même le fichier manifest.json – avec toutes ses différentes tailles d’image, balises META, etc. Au lieu de cela, si vous voulez le rendre rapide, vous peut simplement créer une image au format 500×500 de votre PWA, puis s’appuyer sur Real Favicon Generator pour créer toutes les tailles d’icônes nécessaires et un fichier manifeste pour vous!

Et ce n’est là qu’un des générateurs que vous pourriez utiliser!

Étape 3: configurer votre technicien de service

C’est là que réside le «vrai pouvoir» de votre PWA:

Un technicien de service est un fichier JavaScript, placé à la racine de votre application, qui joue le rôle d’un «intermédiaire» entre le navigateur et l’hôte. Celui qui, une fois installé dans les navigateurs pris en charge, intercepte et répond à la demande du réseau de différentes manières.

Remarque: dans la plupart des cas, c’est pour la mise en cache de tous les fichiers statiques, afin que nos PWA puissent également fonctionner hors ligne, que nous utilisons des travailleurs de service.

Maintenant que nous avons vu ce qu’est un travailleur de service, voici comment vous en créez un lorsque vous convertissez votre site Web en une application Web progressive:

I. Vous l’obtenez d’abord enregistré.

Pour cela, il suffit d’exécuter ce code dans le fichier JS de votre site:

En pratique, il vérifiera si le navigateur prend en charge les Service Workers et, s’il le fait, il enregistre votre fichier Service Worker.

Remarque: N’appelez JAMAIS ce fichier, à l’intérieur de votre site Web, comme ceci:

II. Si vous n’avez pas besoin que votre PWA fonctionne également hors ligne, configurez simplement un fichier /service-worker.js vide.

Les utilisateurs seront simplement informés de l’installer sur leurs appareils!

III. Une fois que vous avez enregistré votre Service Worker, générez également votre fichier Service Worker.

Pour cela, il suffit d’exécuter cette commande dans votre terminal:

Ensuite, allez-y et exécutez-le sur le répertoire de votre site Web:

Et voilà! Vous aurez généré un service-worker.js comprenant le contenu du service worker.

Testez votre version PWA

À ce stade du processus de “conversion de votre site Web en application Web progressive”, vous devez:

  • vérifier si votre technicien s’est correctement enregistré et installé sur Chrome
  • Exécuter un audit des performances sur votre PWA, à l’aide de l’extension du phare de Chrome

Pour la première opération, suivez ces 3 étapes de base ici

  1. Appuyez sur F12 pour ouvrir vos outils de développement Chrome
  2. Cliquez sur l’onglet «Application»
  3. ensuite, dans la barre latérale, sélectionnez «Service Workers»

Ensuite, vérifiez si votre technicien de maintenance a été correctement activé et fonctionne normalement:

Cochez simplement la case «Hors ligne» et essayez de recharger. Votre site PWA affiche-t-il toujours son contenu, même lorsqu’il n’y a pas de connexion Internet?

Exécutons maintenant un audit à l’aide de l’outil de test dédié de Chrome, Lighthouse:

  1. Appuyez à nouveau sur F12 pour visualiser les outils de développement Chrome
  2. sélectionnez l’onglet «Audits»
  3. puis sélectionnez «Perform an audi»
  4. cochez toutes les cases suggérées
  5. et enfin, exécutez l’audit

Et voici à quoi ressemblerait le rapport généré:

convertir
Tutoriel PWA – Testez votre version PWA

La fin! Voici comment convertir votre site Web en une application Web progressive en 3 étapes:

  • Activation de HTTPS
  • Configuration de votre manifeste d’application web
  • Créer votre travail de service

Conclusion:

Comme nous l’avons mentionné dans ce didacticiel PWA, la Progressive Web App est une application Web qui affiche un site Web sous la forme d’une application sur les smartphones. La technologie, introduite par Google en 2015, a attiré beaucoup d’attention en raison de la relative facilité de développement et de l’expérience utilisateur instantanée pour les utilisateurs. Un logiciel progressif tente d’introduire un logiciel natif à l’exception du fait qu’il affichera un site Web dans un navigateur.

Lorsque vous utilisez ces types d’applications, vous serez redirigé vers le site que vous parcourez. Par conséquent, vous n’avez pas besoin d’occuper l’espace mémoire de votre téléphone et de la RAM pour installer l’application. C’est facile à faire et vous pouvez accéder à votre contenu préféré dans une version très compacte. Lorsque vous visitez un site prenant en charge cette fonctionnalité, vous êtes invité à ajouter le site à votre page d’accueil. Lequel est ajouté au téléphone si vous aimez l’icône du site comme les autres applications?

Vous disposez d’un raccourci qui n’a pas besoin de conserver les adresses des sites et vous pouvez facilement surfer sur les sites avec lesquels vous avez beaucoup à faire.

Dans ce tutoriel PWA, nous avons montré que n’importe quel site Web peut être transformé en PWA (convertir votre site Web en PWA) et que vous n’avez pas besoin d’être un développeur senior pour le faire.

À PROPOS DE NOUS

Travaillant avec le marketing numérique, les services de référencement et la conception de sites Web avec une équipe très expérimentée depuis des années, Avenger IT Next Generation a été en mesure de répondre aux besoins des personnes dans diverses entreprises et d’aider les entreprises à croître. La mise à jour continue de leur niveau de connaissances et l’exploration de différents marchés ont dépassé les pionniers dans ce domaine et incorporé des expériences réussies dans leur carrière.

Avenger IT Next Generation est une agence de conception et de développement et création site web et une agence SEO pour promouvoir votre entreprise, appeler avec nous.

Catégories

No Title

5,0 rating
avril 6, 2020
Anonymous
Share on facebook
Share on twitter
Share on linkedin
Share on whatsapp
Share on telegram
Share on pinterest
Share on reddit
Share on email