Qu'est-ce qu'une application Web progressive ou PWA dans Magento 2?

• Qu'est-ce que cela signifie que Magento est en train de devenir une plate-forme Web progressive?
• Quelle sera la structure de code des PWA dans Magento?
• Quel est le problème avec les API REST et les PWA?

Qu'est-ce que les applications Web progressives?

• Ressemble et se comporte comme une application mobile.
• Prenez avantage des mobiles natives fonctionnalités de l' appareil, sans nécessiter l'utilisateur final pour visiter un magasin d'application, faire un achat et télécharger ce local .

Pourquoi PWA?

• Vite
• Sécurisé (avant dernier sujet de réponse)
• Sensible
• Compatible avec plusieurs navigateurs
• Mode hors ligne (Vérifiez le dernier sujet de la réponse)
• Mobile "Installer"
• Contenu partageable

Cette réponse couvre également - Installation de Magento 2.3 avec PWA

Prenons un exemple de Flipkart

Flipkart , le plus grand site de commerce électronique en Inde, a décidé de combiner sa présence Web et son application native dans une application Web progressive qui a entraîné une augmentation de 70% du nombre de conversions.

Flipkart

Approche

1. Développé Flipkart Lite, une application Web progressive
2. Travailleurs de service ajoutés pour des temps de chargement plus rapides
3. Navigation fluide et défilement à 60 images / seconde
4. Création d'une invite «Ajouter à l'écran d'accueil» pour encourager les utilisateurs à ajouter la page Web mobile à leurs écrans d'accueil.

   ---

Résultats

La nouvelle application Web progressive aide Flipkart à augmenter les conversions de 70%

Flipkart fonctionne également en mode hors ligne

• Les travailleurs du service peuvent être programmés pour intercepter chaque requête du réseau et servir une réponse à partir du cache, même lorsque l'utilisateur est hors ligne.
• Bibliothèque d'encapsulation de Service Workers qui permet d'utiliser des modèles simples tels que NetworkFirst, CacheFirstou NetworkOnly. SW-Toolboxfournit un LRU cache utilisé dans l'application Flipkart pour stocker les résultats de la recherche précédente sur la page de navigation et les dernières pages de produit visitées.
• La boîte à outils possède également un mécanisme d'invalidation de TTL-based cache que nous utilisons pour purger le contenu obsolète. Les travailleurs de service fournissent des primitives de script de bas niveau qui rendent cela possible.

MAIS ... MAIS ... MAIS ...

Qu'est-ce que le Studio PWA Magento?

• • Le projet Magento PWA Studio est un ensemble d’outils de développement permettant le développement, le déploiement et la maintenance d’une vitrine PWA au-dessus de Magento 2.

Le projet Magento PWA Studio fournit les outils suivants:

---

pwa-module

• Il comporte des modules tels que des assistants, des fonctionnalités côté serveur et sert de base à tous les thèmes créés avec Magento PWA Studio.

pwa-buildpack -

• Buildpack est un ensemble de Webpackplug-ins et d'outils utilisés pour le développement de thèmes Magento PWA.

• Il est également utilisé pour configurer et configurer un environnement de développement local pour la plate-forme Magento 2.

Il contient les outils suivants:

• PWADevServer
• Magento Resolver
• Composant racine Magento
• magento-layout-loader
• Service Plugin

Peregrine - Peregrine est un ensemble deReact componentscréé pour gérerfonctionnalités spécifiques comme Magentorouting,root-components, gestionnaire de misepage,listes de produits,affichage des prix, etc.

Thème Venia -venia-conceptest un thème de démonstration créé par Magento à l'aide du studio Magento PWA. Il présente toutes les fonctionnalités, flux de travail et pages actuellement disponibles.

PWA Studio n'est pas

• Une nouvelle version de Magento

• Un remplacement de tous les front-end

• Une application de bureau

Outils et bibliothèques utilisés dans les studios PWA

Webpack

• La fonction principale de Webpack est de créer un ou plusieurs ensembles à partir des dépendances dans les modules de votre projet.

Shell d'application

• La taille totale est plus petite
• Demande charge initiale de trois fichiers: login.html, shell-1234.js,3456.js
• La charge initiale doit être chargée: Shell + Router + content
• Le shell est visible plus tôt qu'avec l'approche Page Shell.

Coquille de page

• La taille totale est plus grande (le contenu du tableau de bord se trouve dans dashboard-1234.js et 4567.js)

• App prend plus de temps pour être prêt en ligne.

• Charge initiale demande seulement deux fichiers: login.html,login-2345.js

• La charge initiale doit être chargée: Shell + content

• Le shell + contentest visible plus tôt qu'avec l'approche App Shell.

Une approche hybride peut être utilisée lorsque shell et contenu sont séparés en deux requêtes (voir la page d'administration à titre d'exemple). Cela est logique lorsque le contenu est beaucoup plus volumineux que shell et que shell doit être visible plus tôt.

ReactJs

• Une bibliothèque JavaScript pour construire des interfaces utilisateur.

Redux

• Une bibliothèque JavaScript utilisée pour gérer l'état dans une application Web.

GraphQL

• Un langage de requête de données côté client et une couche de service côté serveur.

GraphQL dans Magento

Authentification et schéma

Réduction du nombre de requêtes frontales

Rendu de phase

Compatibilité du navigateur de bureau

• Non pris en charge : IE, Safari

Compatibilité du navigateur mobile

Non pris en charge : Android Webview, IE, Safari

Les PVA sont plus sécurisés

• En tant que développeur Web, vous savez peut-être à quel point Google encourage les sites Web à les httpsremplacer HTTP. Les cybermenaces figurent toujours en tête de liste pour les développeurs d'applications Web et d'applications Web.
• Dans le passé, la HTTPsécurité n'était pas suffisante pour protéger les informations des utilisateurs.
• Des sites Web sont maintenant programmés HTTPset il est facile de lancer une application Web progressive dans un environnement sécurisé.
• Lors de la saisie d'informations personnelles dans PWA, telles que les informations de carte de crédit ou les coordonnées, ils peuvent se sentir en sécurité et avoir l'esprit tranquille.

PWA - Mode hors ligne

L'application Wikipedia en mode hors connexion est un bon exemple de PWA utilisant un modèle de shell d'application .

• Il se charge instantanément lors de visites répétées, mais récupère de manière dynamique le contenu à l'aide de JS.
• Ce contenu est ensuite mis en cache hors ligne pour les visites futures.

Progressive Web App représente sans aucun doute l'avenir du développement Web. À l'avenir, les sites de commerce électronique, les restaurants et les sources multimédias passeront d'une application native à une application Web progressive. Cependant, toujours dans la phase initiale, de nombreux développeurs rechercheraient activement des moyens de tirer le meilleur parti des opportunités offertes par les PWA.

Commençons par l'installation de Magento 2.3 avec PWA

1. Entrez la commande suivante dans DIR / var / www / html / (m203 est mon répertoire Magento 2.3):

composer create-project --repository=https://repo.magento.com/ magento/project-community-edition=2.3.* --stability=beta m203

2. Installez Magento en ligne de commande:

bin/magento setup:install --base-url=http://localhost/m230 --db-host=localhost --db-name=m230 --db-user=root --db-password=root --backend-frontname=admin --admin-firstname=admin --admin-lastname=admin [email protected] --admin-user=admin --admin-paassword=admin123 --language=en_US --currency=USD --timezone=America/Chicago --use-rewrites=1

3. Créez le thème de base pwa qui sera leur parent pour le thème PWA Venia.

• Pour l'instant, clonons le référentiel de thèmes pwa de base. https://github.com/magento-research/theme-frontend-pwa

4. Créez un répertoire app/design/frontend/Magento/pwaet copiez tous les fichiers et répertoires du thème de base ici.

• Permet de vérifier le thème de base est disponible ou non.

• Run: php bin/magento setup:upgrade

• Et accédez à votre Admin Magento-> Contenu-> Thèmes

5. Téléchargez le projet de studio PWA.

6. Naviguez jusqu'au répertoire racine de votre installation Magento et créez un dossier de liens symboliques Pwa vers le répertoire de modules du projet (pwa-studio / packages / pwa-module).

• à partir de ce répertoire, j'ai exécuté ma commande - / var / www / html / m230

• C’est un répertoire où ma source téléchargée sur pwa est / var / www / html / PWA /

ln -s /var/www/html/PWA/pwa-studio-master/packages/pwa-module app/code/Magento/Pwa

7. Liez également le répertoire de thèmes. Naviguez vers le répertoire racine de votre installation Magento et créez un dossier de liens symboliques Pwa vers le répertoire de modules du projet (pwa-studio / packages / venia-concept).

ln -s /var/www/html/PWA/pwa-studio-master/packages/venia-concept app/design/frontend/Magento/venia

8. Accédez maintenant au répertoire venia-concept de votre projet pwa-studio, copiez-le .env.distdans un nouveau .envfichier et mettez à jour les variables avec l'URL de votre magasin de développement Magento.

cd /var/www/html/PWA/pwa-studio-master/packages/venia-concept

cp .env.dist .env

9. Installez le thème venia et le module Pwa:

run: php bin/magento setup:upgrade

nous pouvons voir que le thème de venia est installé avec succès.

10. Configurez le thème venia à partir de admin->Content->Configuration

11. Accédez à path ( /var/www/html/PWA/pwa-studio-master) run:

npm install

ou

npm install webpack-dev-server -g

12. Et enfin, accédez à /var/www/html/PWA/pwa-studio-master/packages/venia-concept

npm start

Toutes nos félicitations! Vous avez configuré votre environnement de développement pour le projet thématique Venia.

PWA - Application Web progressive est l’application généralement Web qui permet aux utilisateurs de profiter du Web enrichi. au moyen de:

• Fiable - charge instantanément et également disponible en mode hors connexion.
• Rapide - dans un mode d'interaction où l'utilisateur interagit en douceur avec lui, et aussi sans aucun junks de défilement ou d'animation.
• Engageant - comme indiqué ci-dessus les deux points si l'application est fiable et rapide, il est évident qu'il engage davantage d'expérience utilisateur et donne également l'impression d'être une application naturelle.

"Qu'est-ce que cela signifie que Magento est en train de devenir une plate-forme Web progressive?"

Alors que magento se prépare pour la version 2.3, il inclut cette fonctionnalité "PWA" pour rendre l'interface plus efficace, de manière à permettre une interaction de l'utilisateur.

Quel est le problème avec les API REST et les PWA?

Comme magento utilise "PWA", il ajoute également "GraphQL API" pour fournir une alternative api de développement front-end de "REST / SOAP" en tant qu'api "GraphQL".

Pour en savoir plus sur le "PWA" et la nouvelle fonctionnalité de "magento2.3 open-commerce", visitez la page officielle de ce magento .

Progressif signifie que l'application se charge avec toutes les données et ressources pertinentes, lorsqu'un utilisateur navigue sur votre site Web. Il en résulte une expérience utilisateur final avec une vitesse, une convivialité, un fonctionnement hors ligne et une intégration de périphériques améliorés.

Web signifie qu'il est écrit dans les langages du Web (HTML, CSS, JavaScript). Cela vous permet de créer un site offrant davantage de fonctionnalités similaires à une application sans créer une application native limitée à une plate-forme, telle qu'iOS ou Android.

Application signifie qu'il installe et exécute le code sur le périphérique ou l'ordinateur de l'acheteur. Cela crée plus de vitesse et de capacité que les applications JavaScript à page unique du passé.

Les PWA sont essentiellement un hybride de pages Web classiques et d'une application mobile, permettant des expériences similaires à celles d'une application mobile pour le Web.

Magento est en train de devenir une plate-forme Web progressive. C’est-à-dire que Magento est en train de créer une suite d’outils permettant de créer des boutiques en ligne sous forme d’applications Web progressives. Ces outils aideront les développeurs à apprendre les techniques PWA, à créer des interfaces frontales PWA ultra-rapides et à créer des composants et des extensions PWA à réutiliser ou à vendre sur le marché Magento. Pris ensemble, Magento appelle cette suite d'outils le Magento PWA Studio.

Vous pouvez vérifier la structure du code à l' adresse https://github.com/magento-research/pwa-studio.

Magento PWA utilise GraphQL comme alternative à l’API REST pour PWA.

Pour plus de détails sur Magento PWA, vous pouvez consulter les liens suivants:

• https://magento-research.github.io/pwa-studio/
• https://community.magento.com/t5/Magento-DevBlog/Introducing-Magento-PWA-Studio/ba-p/74636
• https://brandastic.com/ideas/magento-progressive-web-apps/
• https://www.monsoonconsulting.com/blog/progressive-web-apps-magento

• Les applications Web progressives constituent le juste milieu entre les applications mobiles et les sites Web installables. Nous nous attendons à voir plus de trafic sur Internet provenant d'appareils mobiles que d'ordinateurs de bureau d'ici 2019. Les PWA améliorent l'apparence des sites Web pour augmenter la conversion.

Les PWA offrent des expériences rapides, sans friction et similaires à celles d'une application, générant plus de trafic, des conversions plus élevées et des temps de chargement de page plus rapides pour les marchands Magento

De manière générale, Magento est en train de transformer son apparence pour augmenter le nombre de conversions. En savoir plus à ce sujet ici .

• Les PWA sont généralement construits avec JavaScript, CSS et HTML et offrent un niveau de performances et de convivialité presque identique à celui des applications natives. Les PVA présentent des particularités, notamment:

  1. Ils fonctionnent avec la plupart (sinon tous) les navigateurs et les appareils (mobiles et de bureau) avec une base de code progressive (souvent basée sur des composants comme dans React Js)
  2. Adapter tous les écrans et tous les facteurs de forme à l'aide d'une conception réactive Exploitez les opérateurs de service pour activer la connectivité hors ligne (HTTPS requis)
  3. Fournir une expérience semblable à une application qui exploite des outils de réengagement, tels que les notifications push
  4. Exploiter un manifeste d'application Web pour décrire les ressources utilisées

Vous pouvez lire plus ici.

• SOAP (Simple Object Access Protocol) et REST (Representational State Transfer) sont les protocoles de communication de services Web les plus courants. REST est préféré à SOAP pour la plupart ( expliqué ici ). Il est donc logique de voir les API REST être utilisées conjointement avec une nouvelle technologie telle que les PWA.

Pour répondre à une partie seulement de votre question mais plus spécifiquement à Magento 2.

PWA sera plus facile à construire grâce à la future version de Magento 2.3.

https://www.degdigital.com/insights/magento-2-3/

Cité de cet article:

PWA

Une application Web progressive est une application conçue pour tirer parti des fonctionnalités technologiques modernes qui évoluent «progressivement» sur les appareils où ces fonctionnalités ne sont pas disponibles. Il permet également la mise en cache des données afin que le site Web puisse être utilisé (partiellement ou totalement) en mode hors connexion lorsque le service Internet est inégal ou inexistant. Ceci est généralement accompli en écrivant la partie frontale du site Web avec un framework / stack JavaScript moderne qui est distinctement distinct de l'application dorsale. Cette application JavaScript peut utiliser les nouvelles fonctionnalités du navigateur (ish) pour accomplir la tâche susmentionnée.

Magento reconnaît les nombreux avantages que cela présente et a annoncé fin 2017 ses efforts pour créer ce qu'il appelle le studio PWA. PWA Studio contiendra des outils pour développer et déployer un PWA pour le front-end de Magento. Avec PWA Studio viendra un site de démonstration léger (pas complet). Les avantages immédiats seront une augmentation importante des performances frontales et une multiplication par 10 de la vitesse d'intégration des nouveaux développeurs frontaux Magento.

• Contenu connexe: Les PWA sont ici et ils changent tout

GraphQL

GraphQL est un langage de requête permettant d’utiliser des API. Avec la montée en puissance de la PWA, il est nécessaire d’obtenir de plus petites quantités de données et de faire moins de demandes d’API. Le langage de requête de GraphQL rend cela possible en permettant au demandeur de demander le renvoi d’un sous-ensemble limité d’attributs relatifs à une entité (réponses nettement plus réduites) et en vous permettant de chaîner des demandes (nombre de requêtes plus petit).

Magento prend actuellement en charge les requêtes d'API REST et SOAP qui utilisent des contrats de service. Toutefois, pour prendre en charge GraphQL, Magento est en train d’écrire une toute nouvelle couche, directement reliée à l’API Query. L'implémentation de GraphQL sera la base sur laquelle une interface PWA récupérera les données dont elle a besoin.

Progressive Web Application utilise les fonctionnalités du navigateur Web et fournit aux utilisateurs une expérience similaire à celle d'une application mobile.

Il se développe à partir d'un onglet de navigateur et rend les pages plus immersives avec une expérience utilisateur à faible friction. Il s’agit d’une technologie Web permettant de créer un site Web qui agit et se comporte comme une application.

Un utilisateur peut lancer une application Web progressive identique à une application native, quel que soit le navigateur choisi.

Pour les tests de démonstration, vous pouvez visiter sur ce lien: Cliquez ici

C'est un produit google lancé pendant I / O 2017 I / O 2017: https://www.youtube.com/watch?time_continue=14&v=cmGr0RszHc8

C'est un site web basé sur HTML.

Il stocke le cache dans un appareil afin que vous puissiez également l'utiliser hors connexion.

Cependant, la première fois, c'est lent, ce qui sera le cas lors de la deuxième visite.

Il est mis à jour lorsque l'appareil est connecté à Internet, vous n'avez donc pas besoin de mettre à jour de nouvelles fonctionnalités telles que les applications.

Tous les e-mails sur le serveur sont déclenchés lorsque l'appareil se connecte à Internet si quelqu'un publie quelque chose hors connexion.

Finalement, pas besoin de construire une application iPhone / Android.

Limitation Il ne supporte que les fichiers HTML. Donc, l'appareil devrait prendre en charge HTML.

There is no store to search PWA application.

Login with FB or else will not be worked.

Not supported in IE.

Configurer PWA (Linux OS)

Étape 1: Installez magento 2.3.1

Étape 2: Installer / mettre à niveau le noeud

Utilisez n module de npm afin de mettre à jour le noeud

sudo npm install n -g

Pour la dernière version stable:

sudo n stable

Pour la dernière version:

sudo n latest

Étape 3: Installez / mettez à jour le fil:

sudo npm install --global yarn

sudo npm upgrade --global yarn 

Étape 4: Installation de node-gyp - Outil de création d'addon natif Node.js

sudo npm install -g node-gyp

Étape 5: clonez le référentiel PWA Studio

Allez à la racine html et exécutez:

git clone https://github.com/magento-research/pwa-studio.git

Après avoir exécuté ceci, vous obtiendrez le dossier pwa-studio.

Étape 6: Installez les dépendances de PWA Studio

sudo yarn install

Étape 7: Spécifiez le serveur principal Magento

Under the packages/venia-concept directory, copy .env.dist into a new .env file:

Exemple de commande:

sudo cp packages/venia-concept/.env.dist packages/venia-concept/.env

changez le fichier .env (ce sera votre URL magento, pas l'adresse URL de l'administrateur):

MAGENTO_BACKEND_URL="https://release-dev-231-npzdaky-zddsyhrdimyra.us-4.magentosite.cloud/"

Étape 8: Créez maintenant une construction

sudo yarn run build

Étape 9: Exécuter le serveur

sudo yarn run watch:venia

Démarre uniquement l'environnement de développement de la devanture de magasin Venia.

sudo yarn run watch:all

Exécute l'expérience complète du développeur PWA Studio, qui comprend le rechargement à chaud Venia et les reconstructions simultanées Buildpack / Peregrine.

sudo yarn run build && yarn run stage:venia

Génère des artefacts de construction et exécute l'environnement de transfert, qui utilise davantage d'actifs compressés et reflète plus fidèlement la production.

Une fois que vous exécutez l’une des commandes ci-dessus, vous obtiendrez l’url virtuelle créée par PWA.

REMARQUE: si vous êtes un utilisateur averti, utilisez sudo.

Suivez les documents de développement officiels de Magento 2:

https://devdocs.magento.com/guides/v2.3/pwa/