Bonjour et bienvenue à tous. Je m'appelle Imran et je travaille pour rtCamp, rtCamp fournit des solutions WordPress aux entreprises. Et aujourd'hui, nous allons parler des raisons pour lesquelles les applications web progressistes pour WordPress. Laissez-moi vous poser une question. Qu'est-ce qui peut évoluer plus vite que la technologie ? Ce peut être nos attentes. Nous voulons que tout soit meilleur, plus facile. Et maintenant.
Cependant, le téléchargement d'applications peut parfois prendre une éternité. Et ce, dans de nombreuses régions du monde. Les données sont chères et de nombreuses régions ont également une mauvaise connectivité. Nous avons donc vraiment besoin d'une nouvelle génération de web mobile qui résoudra ces problèmes. Parlons de la tendance des utilisations sur le web mobile par rapport aux applications mobiles. Quels sont donc les avantages de l'utilisation d'applications natives ?
Ils sont faciles d'accès depuis l'écran d'accueil. Ils fonctionnent hors ligne, vous pouvez envoyer des notifications "push" pour ramener l'utilisateur et vous pouvez également accéder aux fonctions mobiles et au recensement. Les applications mobiles ont désormais de meilleures capacités. Cependant, le web mobile a gagné en popularité, atteignant environ une centaine de visites par mois pour un utilisateur moyen.
Maintenant, peut-on avoir les deux ? Donc, si nous pouvons combiner les capacités d'une application mobile et la portée du web mobile, nous pouvons obtenir quelque chose en or. PWA. Maintenant, ce que sont les PWA ou PW, ce sont des applications web progressives. Ce sont des applications web qui ressemblent et se comportent comme des applications natives. Elles améliorent progressivement les applications web, ressemblent à des applications natives et se comportent comme telles.
Regardons celui-là. Comme vous pouvez le voir, si vous allez à l'Académie, et si vous l'ouvrez dans le navigateur web mobile, cela vous donne une option à ajouter à l'écran d'accueil. Lorsque vous cliquez sur l'option "Ajouter à l'écran d'accueil", l'application est ajoutée à votre écran d'accueil, et vous pouvez alors y accéder comme à toute autre application mobile, comme vous pouvez le voir, en cliquant sur cette option.
Il s'ouvre. Il n'y a pas de barre d'adresse. On dirait une application native, ce qui est génial. Alors quel est le besoin de PWA. Eh bien, on a constaté que les utilisateurs détestent les retards et le manque de fiabilité sur les mobiles. Le niveau de stress causé par les retards sur le mobile étant compatible avec le visionnage d'un film d'horreur, vous pouvez obtenir le niveau de stress de quelque chose comme ça lorsque votre application mobile est lente.
Il a également été observé que 50 % des utilisateurs de smartphones sont plus susceptibles d'utiliser le site mobile de l'entreprise lorsqu'ils naviguent ou font des achats, car ils ne veulent pas télécharger une application et les applications prennent trop de mémoire sur le téléphone. Et c'est le problème numéro un qui conduit à la désinstallation de ces applications mobiles. Vous pouvez le voir à nouveau, dit, euh, plein, désolé.
Je ne peux pas en avoir plus.
Maintenant, l'installation d'une application Android nécessiterait au moins trois étapes. Par exemple, la redirection vers le téléchargement de la boutique de jeux, le relancement de l'application Android en haut de l'entonnoir, l'installation de l'application PWA se fait en un seul clic, et cela n'éloigne pas l'utilisateur de l'entonnoir de conversion actuel, ce qui est bon pour les affaires.
Ainsi, les PWA facilitent le retour sur le site. Désormais, Google suit une règle simple, axée sur les utilisateurs, et tout le reste suivra. Google dit : "Pensez d'abord à l'utilisateur, quels sont les besoins de mes clients ? Comment les PWA les satisfont-ils ? Et sur la base des observations, on constate que les utilisateurs préfèrent les expériences qui sont du feu.
Pas cet incendie, certainement pas celui-là, mais l'incendie conduirait en fait à une installation rapide et fiable. Et engageant. Prenons une différence entre les applications natives et les PWA. Donc pour les applications natives, vous devez développer et maintenir trois bases de code distinctes. Cependant, pour PWA, il n'y a qu'une seule base de code, ce qui est brillant.
Les applications natives ont une grande friction de distribution, cependant les PWA sont accessibles sur Android iOS et un web, et la sur la variété des navigateurs. Les applications natives sont moins faciles à découvrir. Cependant, dans les PWA, le contenu est détectable et indexé par les moteurs de recherche. Dans les applications natives, seul le lien de l'application téléchargée peut être partagé, alors que dans les PWA, le lien direct de n'importe quelle page ou écran peut être partagé.
Les applications natives ne peuvent pas être mises en signet. Cependant, les PWS le sont. Les applications natives mettent à jour l'application via le play store tandis que les PWA sont toujours à jour. Les applications natives utilisent beaucoup de données, alors que les PWA permettent de réaliser d'importantes économies de données. Voici donc, sur la base de ce dont nous avons discuté, quelques-unes des caractéristiques des PWA.
Ils sont progressistes, ils sont réactifs. Ils fonctionnent donc sur plusieurs appareils. Ils travaillent hors ligne, aussi bien sur le web que sur les téléphones portables, ils sont toujours à la page. Les données sont toujours fraîches et elles sont sauvegardées. C'est donc l'une des principales exigences des PWA. C'est qu'elles doivent être sur S3PS ; elles sont découvertes et indexées par Google.
Ce sont des doubles sonneries. Vous pouvez envoyer des notifications "push" aux utilisateurs et les ramener. Elles sont durables et peuvent être reliées entre elles. Vous pouvez donc partager ces liens. Maintenant, qu'est-ce que cela signifie pour les entreprises. Les PWA sont une bonne solution pour les entreprises. Aujourd'hui, de nombreuses entreprises disposent d'applications web progressives, qui leur permettent de moderniser leur site web, de s'adapter aux nouveaux utilisateurs et aux nouvelles attentes.
Les questions souvent posées à eux-mêmes. Répond-elle aux besoins réels des clients ? Est-ce qu'elle fait croître notre entreprise ? Est-il réalisable et solide, etc. Les applications web progressives tirent donc parti des capacités du web moderne. Quel est l'impact commercial d'un site web rapide ? Ce que vous pouvez faire, c'est que lorsque vous travaillez sur l'optimisation de votre vitesse, commencez à mesurer fréquemment la vitesse de votre site avec des outils et des mesures appropriés pour suivre vos progrès.
Par exemple, mesurez vos paramètres avec Lighthouse, fixez des objectifs clairs, comme avoir de bons scores pour les éléments vitaux du web et intégrez un budget de performance dans votre processus de construction. Vous pouvez isoler l'impact des changements de vitesse incrémentiels et calculer les revenus supplémentaires que votre travail a générés.
Il sera intéressant pour vous de savoir qu'E-bay a fait de la vitesse un objectif de l'entreprise pour 2019. Ils ont utilisé des techniques telles que le budget de performance, l'optimisation critique des barbes et la prédiction. Ce qui est passionnant, c'est qu'ils ont conclu que pour chaque amélioration de cent millisecondes de la page de recherche, le temps de chargement ajouté au nombre de paniers a augmenté de 0,5 %, ce qui est une excellente chose pour une entreprise.
Egalement Paul Armstrong, le responsable technique de PWA sur Twitter. Ils ont fait une documentation très complète dans son étude de cas, qui s'appelle Twitter light and high-performance react progressive web apps at scale. Je vais donc partager le lien avec vous. Cependant, cela décrit essentiellement l'importance de collecter des données tout en réglant votre PWA pour maximiser les optimisations de performance.
Il sera intéressant pour vous de savoir que Google a récemment annoncé qu'en mai 2021, toute page de contenu non AMP qui respecte les règles de Google en matière de contenu d'actualité, comme les informations vitales sur le web, les signaux d'expérience payants, etc. Il faut également savoir que Google donnera la priorité aux pages ayant une bonne expérience de la page au fur et à mesure du classement des résultats, ce qui signifie que le site web ayant les meilleurs éléments vitaux et la meilleure expérience de la page apparaîtra probablement dans les résultats.
Nous avons donc parlé de ce que sont les PWA et des avantages qu'ils offrent. C'est vrai. Et pourquoi est-ce important maintenant ? Et si nous devions construire BWL ? Comment faire ? Nous pouvons donc créer des PWA en quelques étapes simples. Tout d'abord, nous pouvons créer les manifestes des applications web. Qu'est-ce qu'un manifeste d'application web ? Eh bien, c'est juste un fichier de conception qui contient des métadonnées.
Il indique essentiellement au navigateur votre application web, comment elle doit se comporter et comment elle doit être installée sur l'appareil mobile ou le bureau de l'utilisateur. Un manifeste valable pour Chrome serait donc le manifeste dot json. Même chose pour Opera, Mozilla. C'est manifest dot webmainfest, Microsoft son manifest dot webmanifest. Et cetera. Et voilà à quoi ça ressemble.
Comme il s'agit d'un fichier json, il apparaîtra donc dans une paire de valeurs clés. Vous avez donc un nom court, disons "Codeytek". Il sera utilisé pour l'écran d'accueil et le lancement, etc. de votre application. Ensuite, vous avez le nom. Je l'appelle simplement l'Académie, qui va être, euh, utilisé à l'invite d'installation de l'application. Euh, vous pouvez mettre les informations sur les icônes, qui seront utilisées pour le lancement de l'application sur l'écran d'accueil, le commutateur de tâches et l'écran de démarrage.
Vous pouvez aussi, euh, passer le début à l'URL de votre site, la couleur de l'équipe, la couleur de fond de votre application, euh, les informations d'affichage, la portée, comme quel répertoire, euh, est utilisé pour PWA, etc. Et. Ensuite tout ce que vous avez à faire c'est de dire à votre navigateur d'utiliser la balise LinkedIn pour votre fichier manifeste et de le lier. Maintenant, parlons du support du navigateur.
Pensez-vous que tous les navigateurs prendront en charge les fonctionnalités de l'APV ? Non. À l'heure actuelle, quel navigateur sera le dernier à prendre en charge les fonctions d'AWP ? Oui, vous avez raison. Il s'agit d'Internet Explorer. C'est toujours le dernier, n'est-ce pas ? Donc, comme vous pouvez le voir, Internet Explorer n'est pas pris en charge. Euh, Ed a un support. Chrome a un support complet.
iOS Safari bénéficie d'un soutien partiel et ainsi de suite. Parlons maintenant des travailleurs des services. Que sont les travailleurs de services ? Eh bien, un prestataire de services est un script que votre navigateur exécute en arrière-plan, séparément de votre page web. Que fait-il ? Eh bien, disons que c'est un navigateur web et que vous avez un serveur distant, en gros un middleware qui intercepte la requête http.
À ce stade, vous pouvez mettre la réponse en cache et la servir à partir de la cache elle-même. Vous pouvez donc faire différentes choses. Vous pouvez avoir une stratégie de mise en cache, etc. Nous allons en parler. Nous en reparlerons dans un instant. Très bien. Voyons le cycle de vie des travailleurs du secteur tertiaire.
Il y a donc différents événements dans les cycles de vie. Le premier est le registre. Au moment de l'enregistrement, nous avons donc enregistré le travailleur du service, puis au moment de l'installation, nous ajoutons les fichiers dans le cache. Et quand il est activé, nous supprimons également le cache précédent. Ainsi, les données ne sont jamais périmées. Très bien. Et puis nous enregistrons le travailleur de service.
Il s'agit donc d'un JavaScript natif. Nous avons un travailleur de service. Nous vérifions si l'agent est disponible dans le navigateur, puis nous l'enregistrons en passant l'URL du fichier de l'agent. Puis nous l'enregistrons et ensuite. Dans l'étape suivante, nous ajoutons les fichiers au cache. Nous créons une version du cache et des chemins d'accès pour le fichier à mettre en cache.
Nous créons donc une constante avec la clé de cache, et nous créons également une autre constante, qui contiendra la liste des URL qui doivent être mises en cache. Ensuite, lors de l'événement d'installation, nous avons écouté l'événement d'installation, puis nous allons de l'avant et. Mettez les fichiers en cache et assurez-vous ensuite que toute nouvelle version du travailleur de service prendra le relais de la page et deviendra active.
Ensuite, l'étape suivante au moment de l'activation consiste à supprimer le cache précédent. Nous avons donc écouté l'événement appelé activate, puis nous vérifions s'il existe une nouvelle version du cache, et dans ce cas, nous supprimons le cache précédent. Très bien. Voilà à quoi cela ressemble. Donc si vous allez sur la console et si vous chargez votre application web, vous pouvez voir le fichier de cache installé par le travailleur du service, enregistré, activé, en cours de vérification.
S'il y a une nouvelle version de cache et qu'aucune nouvelle version de cache n'a été trouvée. Très bien. Si vous allez à l'application à partir de l'élément d'inspection, c'est là que vous trouverez des informations. Si les travailleurs du service se sont enregistrés, vous avez le statut de source. Et puis vous pouvez aller à manifest, et voici les informations de notre fichier manifest.json.
Nous avons le nom court, le thème, la couleur, le fond, les informations sur les icônes de couleur, et tout cela. D'accord. Et c'est là que ça s'arrête. C'est là qu'il vous parle de la cache. Très bien. Donc, une fois que l'agent de service est actif, il a un contrôle total sur les pages. Il peut maintenant gérer des événements comme Fetch, push, et sync, etc.
Alors comment cela fonctionne, disons, prenons cet exemple. Disons que c'est votre navigateur web. Et quand une requête réseau arrive, donc que le navigateur fait une requête HTTP, le travailleur du service va intercepter cette requête. Il va dire : "Hé, attendez une minute. Avant que cette requête n'arrive au serveur, je dois faire quelque chose.
Je dois vérifier. Si l'URL de la requête est en cache. Si elle est en cache, alors je vais servir la réponse à partir du cache lui-même. Mais si ce n'est pas le cas, je vais faire une demande au réseau, au serveur, et je vais renvoyer la réponse de la demande du réseau. Cependant, à ce moment, je vais également mettre la réponse en cache afin que la prochaine fois que la demande arrive, je puisse la servir à partir de la cache elle-même.
Très bien. Donc, dans l'étape suivante, nous allons faire un test des données du cache. Donc nous avons écouté l'événement "fetch" et ensuite nous répondons avec, euh, en vérifiant. Si l'URL demandée n'est pas le cache ou pas, si elle l'est, elle va renvoyer la réponse du cache à l'étau, en me faisant une nouvelle demande au serveur. Génial.
Très bien. C'est donc l'événement de récupération. Voici à quoi ressemble l'événement Fetch. Vous pouvez donc voir qu'il va chercher la réponse à partir de ces URL. Et si vous allez dans l'onglet réseau et que vous inspectez l'élément, voici à quoi ressemblent les travailleurs du service. Enfin, si vous souhaitez faire un ajout personnalisé à l'écran d'accueil, vous pouvez ajouter que je partagerai le lien pour le GitHub afin que vous puissiez vérifier le code.
Je n'entrerai pas dans les détails. C'est assez simple. Très bien. Donc maintenant nous allons sur le codeytek.com. C'est notre application web progressive, l'ajout à l'écran d'accueil. Quand nous avons la fenêtre contextuelle, vous pouvez voir qu'elle s'ajoute à l'écran d'accueil, et ensuite nous passons à notre écran d'accueil. Voilà notre application, cliquez dessus.
Parfait. C'est le PWA. Ce que nous allons faire maintenant, c'est passer en mode hors ligne et voir si cela fonctionne hors ligne. Voilà. Félicitations. Cela fonctionne en mode hors ligne. Nous venons de construire un PWA parfait. Et vous pouvez vous attendre à un score de phare de quelque chose comme ça. N'est-ce pas incroyable ? Applaudissons nous-mêmes. On vient de construire un PWA.
C'est le rêve de tout développeur. N'est-ce pas ? Oui, vraiment ? Ok. Jusqu'à présent, nous avons appris ce que sont les PWA, quelles sont les fonctionnalités qu'ils offrent, etc. Et si je ne suis pas un expert technique ? Comme si je n'étais pas un développeur et je suis sûr que cette question vous viendrait à l'esprit que je ne suis pas un développeur, d'accord.
Je peux donc construire un PWA. Comment convertir mon site WordPress existant en PWA ? Puis-je le faire ? Comment puis-je le faire ? D'accord, parlons-en. Nous avons donc certains plugins disponibles dans WordPress, des plugins gratuits que vous pouvez utiliser, qui convertiront votre site web existant. Le site WordPress en PWA, ce sont les PWA de Google.
Vous disposez de Super PWA, WordPress Mobile Pack, PWA pour WP et amp, WordPress progressif, etc. Disons que dans cet exemple, nous allons, donc disons que nous installons un plugin d'activation de Super PWA. Voici à quoi ressembleraient vos écrans de réglage. Rappelez-vous que nous avons parlé du manifeste Dot Json, où vous aviez le nom de l'application, les informations sur les icônes, la couleur de fond.
Il s'agit donc essentiellement des informations utilisées pour ce dossier. La plupart de ces informations seront pré-remplies, mais si vous souhaitez les personnaliser, par exemple, vous souhaitez que votre demande soit nommée différemment. Et vous souhaitez choisir une couleur de fond différente pour votre PWA. Vous pouvez le faire à partir d'ici. D'accord.
Très bien. Supposons que vous ayez activé le super plugin PWA, mais que faire si je veux envoyer des notifications push à mes utilisateurs pour mon site WordPress ? Comment faire ? Eh bien, avant de nous lancer, il y a quelque chose d'intéressant. J'aime partager avec vous. D'après les recherches, on observe que les utilisateurs de smartphones sont plus susceptibles d'acheter sur des sites mobiles qui offrent des recommandations pertinentes sur les produits et 85% des utilisateurs de smartphones disent que les notifications mobiles sont utiles pour qu'ils puissent obtenir les bonnes recommandations sur ce qu'ils recherchaient.
Voyons donc comment nous pouvons aller de l'avant, en envoyant des notifications "push" pour notre site WordPress. La bonne nouvelle, c'est qu'il existe un plugin gratuit, appelé "one signal". Tout ce que vous avez à faire, c'est d'installer et d'activer ce plugin. Il suffit de suivre l'étape de base. Comme vous l'avez vu, il suffit de créer le compte à un signal et de remplir les informations de base comme l'ID de l'application, la clé API de repos, puis de personnaliser les paramètres.
Une fois que vous avez fait cela. Et une fois que vous avez installé votre super PWA et activé un signal. Ce qui est bien, c'est que le super PWA compatible avec un signal, une fois qu'il est installé, votre site WordPress va le convertir en PWA. C'est ce que j'ai fait, par exemple, en activant ce signal. Si je vais maintenant sur mon site WordPress, vous pouvez voir que j'ai une option pour ajouter à l'écran d'accueil.
Et cette fois-ci, vous avez également la possibilité d'envoyer une notification "push". Et lorsque je les accepte, ajouter à l'écran d'accueil et accepter de recevoir des notifications "push" dit merci de vous être abonné. Et c'est l'ajout de cette application sur mon écran d'accueil.
Passons à un écran d'accueil. Voilà nos applications. Ouvrons-la. Vous pouvez voir qu'il n'y a pas de barre d'adresse. Donc ça ressemble à une application native. C'est notre page de blog.
Maintenant, passons à l'offline. Je vais donc passer en mode hors ligne. Mode avion.
Fermons. Tout.
Réouvrons-le.
Et voilà. Il fonctionne toujours, même lorsque vous êtes hors ligne. Génial. Maintenant, essayons de voir comment fonctionne la notification push. Dans l'idéal, je m'attends à ce qu'elles soient envoyées lorsque je publie un nouveau message, puis à ce qu'une notification "push" soit envoyée à l'utilisateur. C'est vrai. Faisons cela. Je vais donc publier ce message. C'est mon billet WordPress.
J'ai frappé à la publication. Remarquez ce qui se passe ? Vous recevez un message en haut. Et voilà. Il est indiqué que le message a été envoyé avec succès à 10 destinataires sur la droite. Sur le mobile, vous recevez une notification. Vous cliquez sur cette notification et vous arrivez directement sur ce blog. C'est incroyable, non ? C'est absolument génial. Je veux dire que je peux réellement engager mes utilisateurs en leur envoyant une notification "push" et que celle-ci est automatiquement déclenchée pour tous mes abonnés lorsque je publie le billet.
Incroyable. Parfait. Bon. Parlons maintenant un peu plus de la compatibilité des navigateurs. Il est donc compatible avec Google Chrome pour Android, Mozilla Firefox pour Android Edge pour Android, Brave pour Android, Samsung internet. Et pour iOS ? iOS a commencé à supporter PWA à partir de la version 11.3 seulement. Certaines fonctionnalités ont pris en charge un iOS, mais pas toutes.
Par exemple, la synchronisation en arrière-plan et les notifications par le web push. Donc non pris en charge actuellement. Euh, et, et vous devez appuyer manuellement sur l'icône de partage et ensuite ajouter à l'écran d'accueil pour iOS. Voici quelques exemples que j'aimerais partager pour PWA. Vous avez donc qualitech.com, qui est un PWA. Vous devez ravir Instagram, euh, Uber, M Uber Forbes.
FlipKart Lite, Smashing magazine, et Pinterest là et là aussi. Au rtCamp, nous construisons quelque chose appelé wp-decouplé, et cela fonctionne aussi hors ligne. Il s'agit donc d'un PWA. Le front end est donc dans React en utilisant next-es. Et le backend est en WordPress. Et voici une application de WooCommerce. Comme vous pouvez le voir, elle fonctionne également hors ligne.
J'ai également créé un thème Gatsby WooCommerce en open source, dont le front-end se trouve dans React with Gatsby et le back-end dans WordPress. Et comme vous pouvez le voir, ce sont toutes les catégories de produits, vous avez, ces produits qui sont disponibles, vous avez la pagination et vous pouvez aussi vous déconnecter si j'avais fait hors du wifi.
Et si je rafraîchis la page, vous pouvez voir qu'elle fonctionne toujours. Je peux aussi faire une recherche sur les produits. Cela fonctionne toujours. Je peux aussi faire une recherche sur les produits pour pouvoir faire des fanions et vous pouvez voir que la recherche se fait aussi hors ligne. Oui, c'est ça. Et puis vous avez l'option "Ajouter au panier". Voilà, vous ajoutez au panier. Vous avez les options de paiement, vous avez la passerelle de paiement disponible, vous avez le panier disponible, et puis vous avez aussi l'option.
Euh, le soutien de Gutenberg, vous pouvez écrire des blocs. Et puis ça va se voir ici. Et ceux-là, vous pouvez voir qu'ils fonctionnent tous hors ligne, donc vous pouvez. Ajoutez les produits à votre liste de souhaits. Et quand l'Internet sera de nouveau en ligne, vous pourrez les commander, ce qui est génial. C'est génial. Et vous n'avez pas besoin de construire une base de code supplémentaire pour les applications mobiles parce que c'est un PWA et vous pouvez en fait ajouter à l'écran d'accueil de votre mobile et l'utiliser comme une application mobile, qui fonctionne même hors ligne.
Voyons donc comment cela fonctionne.
[MUSIQUE]
Très bien. J'espère donc que vous avez apprécié la démo. Et cela vous donnera un site web, une meilleure performance et une meilleure expérience utilisateur. Donc pour les références, euh, vous voulez, vous pouvez aller à, donc pour PWA, vous pouvez aller à developers.google.com/web/fundamentals. Vous pouvez vérifier le code du PWA que nous avons construit sur les concepts imranhsayed/pwa sur GitHub pour WP découplé, vous pouvez aller sur rtCamp slash WP découplé sur GitHub.
Et pour l'équipe de Gatsby WooCommerce sur imranhsayed sur GitHub aussi. Si vous souhaitez que nous apprenions WordPress, vous pouvez aller sur learn dot rtCamp.com et c'est une source assez complète pour apprendre WordPress. Vous pouvez y jeter un coup d'œil. Si vous souhaitez apprendre à programmer pour différentes piles technologiques, vous pouvez aller sur Codeytek.com.
Et puis des cours et vous pouvez apprendre sur babble Chrome, CSS, Gatsby, euh, les applications web progressives, WordPress, et il y a beaucoup d'autres cours gratuits disponibles. Très bien. Alors c'est tout, félicitations à tous. Nous avons appris ce que sont les applications web progressives, comment les utiliser, comment développer un PWA et comment convertir votre site web WordPress existant en un plugin WordPress PWA.
J'espère donc que vous l'avez apprécié. Je vous remercie beaucoup. Vous pouvez me suivre. Twitter. Mon identifiant Twitter est @imranhsayed. Merci beaucoup.
