Préface: Tutoriel pour migrer votre site Web dans une PWA (Progressive Web App)
Dans cet article, nous expliquons comment migrez-vous votre site Web vers PWA? En très peu de temps, les PWA ont fait une marque très importante dans l’industrie des applications mobiles.
Le concept, que Google veut que vous sachiez, est un répit pour l’industrie qui n’a cessé de formuler les mêmes plaintes à maintes reprises –
Concernant les sites Web: vitesse de chargement lente et faible taux de résonance
Concernant les applications mobiles: les applications prenant beaucoup d’espace mémoire, cela dépend de la connexion réseau, et les longues étapes que les utilisateurs devront franchir pour trouver une application et commencer à l’utiliser.
Étant donné que les applications Web progressives (PWA) sont téléchargées directement à partir d’un site Web et s’exécutent également en tant que site Web, les utilisateurs en bénéficient de trois manières: A. Ils gagnent du temps lors de la première recherche d’une application sur la boutique, en l’installant puis alimenter les informations pour le démarrer B. Étant donné que les applications Web progressives fonctionnent comme un site Web, elles occupent un espace de stockage minimal sur l’appareil et C. Comme elles fonctionnent principalement comme un site Web, le concept de cache est conservé, ce qui permet à l’application de s’exécuter. même en l’absence de connexion réseau.
L’avenir de l’application Web progressive
Le navigateur Google Chrome sur Android OS prend en charge PWA depuis l’introduction de PWA et supprimera bientôt les applications Chrome et Progressive Web App au lieu des applications Google Chrome pour tous les systèmes d’exploitation Linux, Windows et Mac. Laisser. En raison de l’importance des objectifs de PWA, il est clair que les principales sociétés de navigateurs Internet et CMS sont les bienvenus.
Planification WordPress pour PWA
Lors de la conférence Progressive Web App Developers organisée par Google fin 2017, Google a annoncé qu’il travaillait avec WordPress pour ajouter des fonctionnalités PWA à WordPress version 5. L’ajout de fonctionnalités PWA à WordPress constituera sans aucun doute un tournant dans les systèmes de production de contenu et aura un impact majeur sur le style de programmation des modèles et des plugins.
migrez-vous votre site Web vers PWA – PWA ajouté à WordPress 5
PWA a accueilli les navigateurs Internet
Mozilla prend désormais en charge Firefox avec Opera et Opera Mobile prend également en charge l’application Web progressive.
Microsoft a officiellement annoncé qu’il prendrait en charge Progressive Web App après la mise à jour de mars 2018 vers Microsoft Edge ainsi que Windows 10 et à partir de ce moment, il sera disponible dans le Microsoft Store.
De plus, Apple a également annoncé que son navigateur Safari prendrait en charge la version iOS 11.3 de l’application Web progressive.
Il ne fait donc aucun doute qu’étant donné le développement des techniques de codage et l’importance des applications Web à chargement rapide et une meilleure expérience utilisateur dans l’utilisation de PWA sur les sites conventionnels, ainsi que l’impact positif des applications Web progressives d’optimisation sur site pour le moteur de recherche, les développeurs passent plus rapidement à PWA. D’un point de vue SEO professionnel, nous vous recommandons d’avoir une planification sérieuse pour PWA.
Quels sont les avantages de la PWA?
En plus d’offrir ces avantages évidents aux utilisateurs, les applications Web progressives – la combinaison idéale de sites Web et d’applications mobiles – sont également devenues la formule rentable de réussite commerciale.
migrez-vous votre site Web vers PWA
Les avantages que les PWA apportent aux entreprises en étant facilement détectables, en occupant moins d’espace mémoire, en venant avec un faible coût de développement, et enfin en fonctionnant hors ligne à une grande vitesse peuvent être mesurés en voyant l’évolution du nombre croissant de ces marques célèbres .
Pourquoi devrions-nous continuer sur PWA?
La transformation de votre site Web en PWA offre de nombreux avantages:
Une expérience utilisateur plus rapide et plus sécurisée
Meilleur classement Google
Meilleure convivialité
Meilleure performance
Accès hors ligne
Même si vous n’espérez pas encore que vos utilisateurs « installeront » votre PWA (en plaçant un raccourci sur leur écran d’accueil), vous avez encore beaucoup à gagner en franchissant le pas. En fait, toutes les étapes nécessaires pour transformer votre site en PWA amélioreront votre site Web et sont généralement considérées comme de bonnes pratiques Web.
migrez-vous votre site Web vers PWA
Des histoires à succès comme celles-ci et beaucoup d’autres dans l’industrie sont suffisantes pour inciter chaque entreprise mobile moderne à rechercher un générateur d’applications Web progressives et à rechercher des moyens de convertir des sites Web en applications Web progressives.
Si vous cherchez également à migrer vers Progressive Web App et à profiter de tous les avantages à faible coût d’investissement que le concept a à offrir, vous êtes au bon endroit.
Voici les étapes exactes de Comment convertir un site Web en applications Web progressives, telles que partagées par Google à notre équipe de développeurs d’applications Web progressives (l’un des avantages d’être l’une des agences de développement Google officielles).
Mais la première chose d’abord. Connaissez les éléments dont vous auriez besoin pour migrer vers Progressive Web Apps.
De quoi aurez-vous besoin pour commencer la migration?
migrez-vous votre site Web vers PWA
Une fois que vous les avez prêts, sortez votre site Web HTTPS pour la migration.
Étape 1: charger l’URL
Clonez le référentiel GitHub à partir de la ligne de commande:
migrez-vous votre site Web vers PWA
Migration de votre site Web vers PWA – -Migrer vers le référentiel PWAs Clone GitHub à partir de la ligne de commande
Cela vous aidera à développer un répertoire Migrate to PWA avec le code terminé pour chaque étape. Pour ce codelab spécifique, téléchargez le fichier de travail, puis apportez-y les modifications.
Une fois votre code extrait, utilisez ‘Simple HTTP Server Application’ pour servir le fichier de travail sur le port 8887.
Après cela, vous pourrez charger l’URL.
Étape 2: afficher le site sur votre mobile
Dans le cas où vous avez un appareil Android branché sur votre bureau, saisissez-le dans votre URL – chrome: // inspect. Cela vous permettra de définir un port vers l’avant à l’aide du port que vous avez écrit auparavant sur le même port sur l’appareil /
Appuyez sur Entrée pour enregistrer.
Vous pouvez maintenant accéder à la version de base de votre site Web à l’adresse – http: // localhost: 8887 / sur le téléphone Android connecté.
Étape 3: ajouter les balises de tête modernes
La première chose que vous devez faire est de rendre le site Web convivial pour les mobiles et deuxièmement, vous devrez ajouter le manifeste de l’application Web. Le manifeste décrira les méta-informations du site de manière à ce qu’elles apparaissent sur l’écran d’accueil de l’utilisateur.
Si vous n’avez pas de système de modèles en place, ajoutez ces lignes –
migrez-vous votre site Web vers PWA
Migration de votre site Web vers PWA – Ajoutez les balises Modern Head
Fenêtre – La première ligne se compose d’une balise META qui spécifie la fenêtre. Cet élément vous aidera avec réactivité. Après avoir écrit la ligne de code une fois que vous rechargez le site, vous trouverez le site qui correspond précisément à votre appareil.
Manifeste – Dans la deuxième ligne de votre code, vous avez référencé le fichier – un mouvement qui est nécessaire pour contrôler la façon dont le site est ajouté aux écrans d’accueil.
Une fois terminé, ouvrez un éditeur de texte. Il est temps d’écrire JSON. Dans la section short_name, spécifiez ce qui s’affichera sur l’écran d’accueil et essayez de le garder dans les 15 caractères.
Ensuite, enregistrez votre fichier sous la nomenclature manifest.json et rechargez la page sur l’appareil Android et allez dans le menu en haut à droite et optez pour «Ajouter à l’écran d’accueil». Vous pourrez maintenant voir votre icône sur l’écran d’accueil!
Étape 4: ajouter un technicien de service
Service Worker est le script d’arrière-plan que le navigateur peut exécuter lorsque l’utilisateur n’est pas sur la page. C’est l’élément qui fournit un support hors ligne et devient actif lorsque la notification est envoyée.
Créer un travailleur de service – Service Worker
Copiez ce code dans un nouveau fichier, puis enregistrez-le sous sw.js.
migrez-vous votre site Web vers PWA
Et c’est tout.
Inscrire le technicien de service
Vous devrez enregistrer le code dans le code de votre site Web, pour cela, ouvrez votre fichier site.js et collez-le –
navigator.serviceWorker && navigator.serviceWorker.register (‘./ sw.js’). then (function (registration) {console.log (‘Excellent, registered with scope:‘, registration.scope);});
Maintenant, le code sera exécuté à chaque chargement de page. Vérifiez si cela fonctionne correctement en rechargeant la page, puis en vérifiant – chrome: // serviceworker-internals /
Maintenant, votre site Web pourra inviter les utilisateurs à l’installer sur leurs écrans d’accueil et, deuxièmement, vous pourrez rendre votre site capable de prendre en charge les notifications push et même de travailler hors ligne.
Étape 5: faire fonctionner le site hors ligne
La première étape serait d’ouvrir le script sw.js et de récupérer l’objet caches. Une fois que vous avez cela, mettez à jour le code et appliquez l’ensemble du site Web dans le cache.
Découvrez comment cela fonctionne maintenant. Désinstallez la présente application et chargez-la sur Chrome. Ensuite, actualisez la page et sélectionnez «Ajouter à l’écran d’accueil» dans le menu de droite.
Pour respecter la règle selon laquelle lorsque le Service Worker change, la page doit la recharger et la réinstaller, tout ce que vous aurez à faire est d’ajouter un composant qui a la «version» du Service Worker. Lorsque cela change, le mouvement d’installation se produit à nouveau, mettant en cache les ressources qui auraient changé.
Félicitations, vous savez maintenant comment transformer le site Web en Progressive Web App et si vous avez suivi les étapes côte à côte, vous avez maintenant même migré votre site Web en Progressive Web App!
* Avertissement *: Bien que ces étapes vous donneront, le développeur, une idée exacte de la façon dont vous devrez remplir les blancs et passer du point A dans le processus au point C, si vous lisez ceci en tant qu’entrepreneur enthousiaste qui souhaite pour prendre en charge la migration, je dirais, ne le faites pas sans une personne qui excelle à savoir comment transformer un site web en Web App progressive.
Bien que ces étapes soient explicatives, certains éléments font partie du processus lorsque vous vous assoyez avec le processus de développement réel. Donc, au lieu de vous essayer aux étapes et de trouver un résultat différent parce que vous n’étiez pas sûr de l’intervalle entre les éléments de la ligne, confiez le travail aux experts de Progressive Web Apps qui se spécialisent dans le domaine.
Conclusion
nous espérons avoir donné un bon aperçu de la migration vers PWA. Si vous souhaitez approfondir le sujet, voici quelques liens intéressants pour en savoir plus:
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.
5/5
Archive
Catégories
Aucun avis n’a été donné pour le moment. Soyez le premier à en écrire un.
Migration de votre site Web vers PWA (application Web progressive)
Table of Contents
Categories
Préface: Tutoriel pour migrer votre site Web dans une PWA (Progressive Web App)
Dans cet article, nous expliquons comment migrez-vous votre site Web vers PWA? En très peu de temps, les PWA ont fait une marque très importante dans l’industrie des applications mobiles.
Le concept, que Google veut que vous sachiez, est un répit pour l’industrie qui n’a cessé de formuler les mêmes plaintes à maintes reprises –
Concernant les sites Web: vitesse de chargement lente et faible taux de résonance
Concernant les applications mobiles: les applications prenant beaucoup d’espace mémoire, cela dépend de la connexion réseau, et les longues étapes que les utilisateurs devront franchir pour trouver une application et commencer à l’utiliser.
Étant donné que les applications Web progressives (PWA) sont téléchargées directement à partir d’un site Web et s’exécutent également en tant que site Web, les utilisateurs en bénéficient de trois manières: A. Ils gagnent du temps lors de la première recherche d’une application sur la boutique, en l’installant puis alimenter les informations pour le démarrer B. Étant donné que les applications Web progressives fonctionnent comme un site Web, elles occupent un espace de stockage minimal sur l’appareil et C. Comme elles fonctionnent principalement comme un site Web, le concept de cache est conservé, ce qui permet à l’application de s’exécuter. même en l’absence de connexion réseau.
L’avenir de l’application Web progressive
Le navigateur Google Chrome sur Android OS prend en charge PWA depuis l’introduction de PWA et supprimera bientôt les applications Chrome et Progressive Web App au lieu des applications Google Chrome pour tous les systèmes d’exploitation Linux, Windows et Mac. Laisser. En raison de l’importance des objectifs de PWA, il est clair que les principales sociétés de navigateurs Internet et CMS sont les bienvenus.
Planification WordPress pour PWA
Lors de la conférence Progressive Web App Developers organisée par Google fin 2017, Google a annoncé qu’il travaillait avec WordPress pour ajouter des fonctionnalités PWA à WordPress version 5. L’ajout de fonctionnalités PWA à WordPress constituera sans aucun doute un tournant dans les systèmes de production de contenu et aura un impact majeur sur le style de programmation des modèles et des plugins.
PWA a accueilli les navigateurs Internet
Il ne fait donc aucun doute qu’étant donné le développement des techniques de codage et l’importance des applications Web à chargement rapide et une meilleure expérience utilisateur dans l’utilisation de PWA sur les sites conventionnels, ainsi que l’impact positif des applications Web progressives d’optimisation sur site pour le moteur de recherche, les développeurs passent plus rapidement à PWA. D’un point de vue SEO professionnel, nous vous recommandons d’avoir une planification sérieuse pour PWA.
Quels sont les avantages de la PWA?
En plus d’offrir ces avantages évidents aux utilisateurs, les applications Web progressives – la combinaison idéale de sites Web et d’applications mobiles – sont également devenues la formule rentable de réussite commerciale.
Les avantages que les PWA apportent aux entreprises en étant facilement détectables, en occupant moins d’espace mémoire, en venant avec un faible coût de développement, et enfin en fonctionnant hors ligne à une grande vitesse peuvent être mesurés en voyant l’évolution du nombre croissant de ces marques célèbres .
Pourquoi devrions-nous continuer sur PWA?
La transformation de votre site Web en PWA offre de nombreux avantages:
Même si vous n’espérez pas encore que vos utilisateurs « installeront » votre PWA (en plaçant un raccourci sur leur écran d’accueil), vous avez encore beaucoup à gagner en franchissant le pas. En fait, toutes les étapes nécessaires pour transformer votre site en PWA amélioreront votre site Web et sont généralement considérées comme de bonnes pratiques Web.
Des histoires à succès comme celles-ci et beaucoup d’autres dans l’industrie sont suffisantes pour inciter chaque entreprise mobile moderne à rechercher un générateur d’applications Web progressives et à rechercher des moyens de convertir des sites Web en applications Web progressives.
Si vous cherchez également à migrer vers Progressive Web App et à profiter de tous les avantages à faible coût d’investissement que le concept a à offrir, vous êtes au bon endroit.
Voici les étapes exactes de Comment convertir un site Web en applications Web progressives, telles que partagées par Google à notre équipe de développeurs d’applications Web progressives (l’un des avantages d’être l’une des agences de développement Google officielles).
Mais la première chose d’abord. Connaissez les éléments dont vous auriez besoin pour migrer vers Progressive Web Apps.
De quoi aurez-vous besoin pour commencer la migration?
Une fois que vous les avez prêts, sortez votre site Web HTTPS pour la migration.
Étape 1: charger l’URL
Clonez le référentiel GitHub à partir de la ligne de commande:
Migration de votre site Web vers PWA – -Migrer vers le référentiel PWAs Clone GitHub à partir de la ligne de commande
Cela vous aidera à développer un répertoire Migrate to PWA avec le code terminé pour chaque étape. Pour ce codelab spécifique, téléchargez le fichier de travail, puis apportez-y les modifications.
Une fois votre code extrait, utilisez ‘Simple HTTP Server Application’ pour servir le fichier de travail sur le port 8887.
Après cela, vous pourrez charger l’URL.
Étape 2: afficher le site sur votre mobile
Dans le cas où vous avez un appareil Android branché sur votre bureau, saisissez-le dans votre URL – chrome: // inspect. Cela vous permettra de définir un port vers l’avant à l’aide du port que vous avez écrit auparavant sur le même port sur l’appareil /
Appuyez sur Entrée pour enregistrer.
Vous pouvez maintenant accéder à la version de base de votre site Web à l’adresse – http: // localhost: 8887 / sur le téléphone Android connecté.
Étape 3: ajouter les balises de tête modernes
La première chose que vous devez faire est de rendre le site Web convivial pour les mobiles et deuxièmement, vous devrez ajouter le manifeste de l’application Web. Le manifeste décrira les méta-informations du site de manière à ce qu’elles apparaissent sur l’écran d’accueil de l’utilisateur.
Si vous n’avez pas de système de modèles en place, ajoutez ces lignes –
Migration de votre site Web vers PWA – Ajoutez les balises Modern Head
Fenêtre – La première ligne se compose d’une balise META qui spécifie la fenêtre. Cet élément vous aidera avec réactivité. Après avoir écrit la ligne de code une fois que vous rechargez le site, vous trouverez le site qui correspond précisément à votre appareil.
Manifeste – Dans la deuxième ligne de votre code, vous avez référencé le fichier – un mouvement qui est nécessaire pour contrôler la façon dont le site est ajouté aux écrans d’accueil.
Une fois terminé, ouvrez un éditeur de texte. Il est temps d’écrire JSON. Dans la section short_name, spécifiez ce qui s’affichera sur l’écran d’accueil et essayez de le garder dans les 15 caractères.
Ensuite, enregistrez votre fichier sous la nomenclature manifest.json et rechargez la page sur l’appareil Android et allez dans le menu en haut à droite et optez pour «Ajouter à l’écran d’accueil». Vous pourrez maintenant voir votre icône sur l’écran d’accueil!
Étape 4: ajouter un technicien de service
Service Worker est le script d’arrière-plan que le navigateur peut exécuter lorsque l’utilisateur n’est pas sur la page. C’est l’élément qui fournit un support hors ligne et devient actif lorsque la notification est envoyée.
Créer un travailleur de service – Service Worker
Copiez ce code dans un nouveau fichier, puis enregistrez-le sous sw.js.
Et c’est tout.
Inscrire le technicien de service
Vous devrez enregistrer le code dans le code de votre site Web, pour cela, ouvrez votre fichier site.js et collez-le –
navigator.serviceWorker && navigator.serviceWorker.register (‘./ sw.js’). then (function (registration) {console.log (‘Excellent, registered with scope:‘, registration.scope);});
Maintenant, le code sera exécuté à chaque chargement de page. Vérifiez si cela fonctionne correctement en rechargeant la page, puis en vérifiant – chrome: // serviceworker-internals /
Maintenant, votre site Web pourra inviter les utilisateurs à l’installer sur leurs écrans d’accueil et, deuxièmement, vous pourrez rendre votre site capable de prendre en charge les notifications push et même de travailler hors ligne.
Étape 5: faire fonctionner le site hors ligne
La première étape serait d’ouvrir le script sw.js et de récupérer l’objet caches. Une fois que vous avez cela, mettez à jour le code et appliquez l’ensemble du site Web dans le cache.
Découvrez comment cela fonctionne maintenant. Désinstallez la présente application et chargez-la sur Chrome. Ensuite, actualisez la page et sélectionnez «Ajouter à l’écran d’accueil» dans le menu de droite.
Pour respecter la règle selon laquelle lorsque le Service Worker change, la page doit la recharger et la réinstaller, tout ce que vous aurez à faire est d’ajouter un composant qui a la «version» du Service Worker. Lorsque cela change, le mouvement d’installation se produit à nouveau, mettant en cache les ressources qui auraient changé.
Félicitations, vous savez maintenant comment transformer le site Web en Progressive Web App et si vous avez suivi les étapes côte à côte, vous avez maintenant même migré votre site Web en Progressive Web App!
* Avertissement *: Bien que ces étapes vous donneront, le développeur, une idée exacte de la façon dont vous devrez remplir les blancs et passer du point A dans le processus au point C, si vous lisez ceci en tant qu’entrepreneur enthousiaste qui souhaite pour prendre en charge la migration, je dirais, ne le faites pas sans une personne qui excelle à savoir comment transformer un site web en Web App progressive.
Bien que ces étapes soient explicatives, certains éléments font partie du processus lorsque vous vous assoyez avec le processus de développement réel. Donc, au lieu de vous essayer aux étapes et de trouver un résultat différent parce que vous n’étiez pas sûr de l’intervalle entre les éléments de la ligne, confiez le travail aux experts de Progressive Web Apps qui se spécialisent dans le domaine.
Conclusion
nous espérons avoir donné un bon aperçu de la migration vers PWA. Si vous souhaitez approfondir le sujet, voici quelques liens intéressants pour en savoir plus:
À PROPOS DE NOUS
Travaillant avec le marketing numérique, les services de référencement et la conception de sites Web et Migration de services vers PWA 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.
Archive
Catégories
Aucun avis n’a été donné pour le moment. Soyez le premier à en écrire un.
kaviani siavosh
All Posts