Comment créer une application Web progressive en utilisant Angular \/ Ionic 1. X et WordPress
Une application Web progressive fait référence à un ensemble de technologies telles que le support et la notification Push qui peuvent fournir des performances et une expérience utilisateur similaires à celles d’une application Web Native. Le mot a été créé en 2015 par le designer Frances berriman et l’Ingénieur Google Chrome Alex Russell. Certaines des caractéristiques de PWA sont progressives: elles s’appliquent à chaque utilisateur, quel que soit le navigateur sélectionné, car elles sont construites selon le principe de base de l’amélioration progressive. Réactif: s’adapte à n’importe quel facteur de forme: Bureau, appareil mobile, tablette ou module à venir. Indépendant de la connexion: le personnel de soutien peut travailler hors ligne ou sur un réseau de faible qualité. Similaire à une application: pour les utilisateurs, c’est comme une application interactive et de navigation de style application. Frais: toujours à jour en raison du processus de mise à jour du personnel de service. Sécurité: fournir des services via https pour empêcher l’espionnage et s’assurer que le contenu n’est pas altéré. Détectables: grâce à l’affiche W3C [6] et à la portée de l’inscription du personnel de service, elles peuvent être identifiées comme des « applications», ce qui permet aux moteurs de recherche de les trouver. Participation à nouveau: aide à participer à nouveau à des fonctions telles que les notifications Push. Installable: permet aux utilisateurs de \
N 80% en moyenne au cours des 90 jours suivants.
Ainsi, ceux qui ont déclaré la mort d’Internet il y a des années, Et maintenant ils crient \
À l’heure actuelle, les cadres JavaScript préférés pour le développement de PWA mobiles sont Angular JS et reactjs. Les deux ont leurs propres avantages. AngularJS peut être combiné avec Ionic, qui fournit une gamme de composants prêts à l’emploi. React est très intuitif, facile à utiliser et bénéficie de l’existence de l’application create React, un projet standard qui comprend tout, du développement à la production. Dans l’application create React, « production Build est une application Web progressive hors ligne entièrement fonctionnelle ». Quel que soit le cadre que vous choisissez, es6 est nécessaire parce qu’il fournit des fonctionnalités puissantes telles que des classes, des fonctions fléchées, des extensions de blocs, des engagements, etc. Bien que tous les navigateurs ne supportent pas entièrement es6, des transpondeurs comme Babel sont disponibles, donc nous n’avons pas à nous soucier de la compatibilité du navigateur.
Chaque PWA a besoin d’une API pour récupérer le contenu du serveur. Nodejs est très populaire comme plate – forme pour implémenter des API personnalisées, mais nous pouvons également utiliser CMS comme arrière – plan. WordPress fournit actuellement 27% de l’électricité de l’ensemble du réseau. Fin 2015, Matt Mullenweg a encouragé tous les développeurs WordPress à « apprendre Javascript, profondame »
– Non. « les changements dans la pile de technologies ne sont pas encore devenus courants et la plupart des développeurs WordPress comptent encore fortement sur PHP pour créer des thèmes de réponse. Depuis que j’ai commencé comme développeur PHP moi – même, j’ai compris son attrait et les progrès de ces dernières années. La structure et la facilité d’apprentissage de PHP, En particulier par rapport à Javascript, où les choses peuvent Vite hors de contrôle. Cependant, il est indéniable que JavaScript est maintenant la solution idéale pour créer une expérience utilisateur merveilleuse sur le Web.
Les parties prenantes de WordPress sont déjà au courant des changements à venir, de sorte que l’api rest est incluse dans le noyau depuis la version 4.5. Bien que plus de 50% des sites WordPress utilisent la dernière version CMS, 30% des installations WordPress sont bloquées par 4.4 ou plus tôt. Ce nombre ne pourra être réduit qu’à l’avenir et nous pouvons être assurés que l’api rest est disponible pour la plupart des sites WordPress. Je dois également mentionner que l’api WordPress rest est bien documentée et peut être utilisée par défaut dans les chemins liés au domaine du site.
Ensuite, je vais vous montrer comment créer des PWA de base en utilisant AngularJS et Ionic 1. X. en plus de l’api WordPress rest. Configuration de l’environnement
L’OSS que nous ajoutons à l’application est un service qui communique avec l’API. Comme nous l’avons mentionné dans la section précédente, nous cartographions les chemins API dans le profil global. Par souci de simplicité, je n’ai inclus ici que les paramètres de classification et de post – récupération, mais vous pouvez facilement ajouter d’autres paramètres pour les pages, les commentaires, les médias, etc.
{Y}
\
Catégorie:
\
\
},
\
\
\
}
}
} avec cette configuration, nous pouvons générer des méthodes pour nous connecter aux API d’arrière – plan du Service:
\
Angulaire Module (‘appticles.api’). Usine (API appticlesapi, API appticlesapi);
API d’application Injection = [\
\/ * *
Service ngdoc
Nom de l’application. Les abeilles. API appticlesapi
* *
Description créer une API de programmation qui encapsule les paramètres d’exportation fournis par
Configurer le service.
* \/
Fonction appticlesapi ($log, $http, configuration) {
Var API = {};
Var exportapiendpoints = configuration. Exportations
Objet Clé (exportapiendpoints). Foreach (fonction (paramètre)
Méthode var = exportapiendpoints [Endpoints];
Objet Clé (méthode). Foreach (fonction (méthode)
API [CamelCase ([method, Endpoint])] = fonction () {
Var Parameter = parameter. Longueur > 0 et angle. Isdefined (Parameter [0])? Paramètre [0]: {};
Paramètre Jsonp = ‘json \ \ u Callback’;
Var URL = Méthode [méthode];
If (Parameter and Parameter ID) {
URL = URL + \
Supprimer le paramètre. Documents d’identité;
}
Renvoie $http. Jsonp (URL {
Méthode: \
Paramètres: paramètres
});
};
})
B) la question;
});
Retour à l’API;
} puisque l’API rest utilise le même paramètre pour lire des éléments simples et multiples, nous passons un paramètre ‘id’ qui se connecte à l’URL de l’API. De plus, n’oubliez pas que l’API rest utilise le paramètre « \ u jsonp » au lieu du rappel habituel. Après avoir ajouté ce service, il suffit de l’injecter dans le Contrôleur et d’analyser les résultats. Commençons par créer un module de catégorie qui chargera le Contrôleur et le modèle: Angular. Modules (« applications.catégories» [en anglais seulement]
« interface utilisateur. Routeur»,
« annexe. Api»,
« annexe. Configuration»
]]
– Oui. Configuration ([$stateprovider, $urlrouterprovider, $stateprovider, $urlrouterprovider) = >
$statprovider
– Oui. État (catégorie)
URL: ‘\/ catégorie’,
Contrôleur: \
Templateurl: application \/ catégorie \/ catégorie. Modèle Html ‘
});
$urlrouterprovider. Sinon (\
}]); Dans le Contrôleur, nous utilisons le Service API pour lire les catégories de messages: Catégorie {
Constructeur ($log, appticlesapi) {
Constante populatecategories = (résultat) = >
Voilà. Catégorie = résultat;
};
API d’application. Findcategories ({hide _ empty: 1})
– Oui. Puis (classification de masse)
– Oui. Capture ($log error);
}
}
Catégorie $ Injection = [\
Angulaire Modules (« applications.catégories»)
– Oui. Contrôleur (Contrôleur de classification, catégorie); Dans le modèle, il suffit d’itérer les données et d’afficher le nom de la catégorie:
Dans notre exemple, nous faisons confiance aveuglément à l’API, qui nous fournira les données dont nous avons besoin dans le format dont nous avons besoin. Dans la vraie vie, en utilisant cette méthode, la situation peut rapidement empirer. Bien que nous ne puissions pas avoir l’API pour nous fournir l’information dont nous avons besoin, nous pouvons nous assurer que l’application ne s’écrase pas lorsque les choses ne fonctionnent pas comme prévu. A.
[A – Z0 – 9] + $\/ I. essai (id de catégorie) & & nbsp;
Angulaire Défini (nom de la catégorie) & & angle. Istring (category.name) & & nbsp;
Angulaire Défini (classe de limaces) & & angle. Istring (Slug Class)
Angulaire Défini (lien de catégorie) & & angle. Isstring (Category Link)
(angle. Non défini (catégorie. Parent) | \/ ^ [A – Z0 – 9] + $\/ i.test (catégorie. Parent)))
Retour à {
Id: catégorie. Documents d’identité,
Nom: catégorie. Nom
Slug: catégorie. Avale.
Liens: catégories. Liens
Parent: catégorie. Parents
};
}
Renvoie False;
}
} comme vous pouvez le voir dans l’exemple ci – dessus, nous ne vérifions que les données que nous utiliserons dans l’application. Nous ne retournons également que ces champs spécifiques. Cela nous permet de découpler complètement la logique d’arrière – plan de la logique d’avant – plan: quelles que soient les propriétés utilisées dans l’API, nous pouvons les convertir en ce que nous voulons. Si nous voulons connecter nos applications à différentes sources de contenu, nous ne pouvons mettre à jour que le Service d’authentification, sans nous soucier de la nécessité de mettre à jour les sujets par l’intermédiaire du Contrôleur et de la visualisation. Voici comment le Contrôleur de catégorie traite après l’ajout d’un service d’authentification: catégorie {
Constructeur ($log, $Q, API appticlesapi, appticlevalidation) {
Constante validatecategories = (résultat) = >
Laissez validatedcategories = appticlesvalidation. Catégorie de vérification (résultats);
Renvoie $q.quando (validatecategories);
};
Constante populatecategories = (résultat) = >
Si (angle non défini (mauvais résultat))
Voilà. Catégorie = résultat;
}
};
API d’application. Findcategories ({hide _ empty: 1})
– Oui. Puis (vérifier la catégorie)
– Oui. Puis (classification de masse)
– Oui. Capture ($log error);
}
}
Catégorie $ Injection = [\
Angulaire Modules (« applications.catégories»)
– Oui. Contrôleur (Contrôleur de classification, catégorie);
N’oubliez pas d’ajouter ce nouveau service au module catégories. De même, nous pouvons créer des formulaires pour extraire les messages des catégories et du contenu des messages. Vous trouverez des exemples complets dans notre dépôt github. Intégration de PWA dans WordPress
>
<html manifest=""
\/ Style CSS \
<link rel="stylesheet" href="
Window Bar Window Bar _ Applications _ Bootstrap Data = {
Config _ Path: » \/ Configuration. Json ‘
};
\/ Js \/ bundle. Js \
<script src="
Comme vous pouvez le voir, il s’agit d’une configuration très simple pour charger un fichier. CSS. Configuration JS et thème. Vous devez également convertir le profil. Json dans le fichier. Php, mappe dynamiquement le chemin de l’API en fonction de l’adresse du site. Pour charger PWA uniquement pour les visiteurs mobiles, vous pouvez créer un plug – in pour gérer la détection de mouvement et utiliser la méthode add _ filter () pour modifier le dossier de sujet par défaut lorsque des périphériques pris en charge sont détectés. Juste un avertissement: Soyez prudent lors de l’ajout de WP _ Head (), WP footer () et d’autres méthodes WordPress aux thèmes PWA. Tous les plugins et widgets WordPress les utilisent
En tant que crochet, l’ajout de vos propres données et contenu de cette façon peut entrer en conflit avec le Code, en particulier lorsque vous parlez de widgets basés sur JavaScript. Les notifications Push Web, le mode hors ligne et d’autres fonctionnalités PWA vous permettent d’obtenir de bons scores PWA (environ 50 – 60%) sur le plug – in Lighthouse de Google Chrome avec seulement une application JavaScript et quelques modifications. L’un de ces changements est le fichier manifeste à partir duquel vous pouvez ajouter des liens vers des icônes d’application et changer quelque chose de simple, comme la couleur de la barre de navigation du navigateur. Si vous voulez aller plus loin, vous devez ajouter du personnel de soutien pour le mode hors ligne et les notifications Push Web. Heureusement, les notifications Push sur le Web sont maintenant beaucoup plus faciles. Vous pouvez trouver le plugin wordpress gratuit pour traiter les notifications pour vous, le plus populaire étant le plugin à signal unique. Il ajoute un fichier manifeste au sujet et invite l’utilisateur à obtenir des permissions avant d’envoyer une notification. Il suffit de prendre soin de fusionner ce fichier manifeste avec un fichier manifeste existant, car le navigateur ignorera le deuxième fichier manifeste. Pour implémenter le mode hors ligne, il est recommandé de voir: SW precache – Cache hors ligne pour les shells d’actifs \/ d’applications statiques. Boîte à outils logicielle – Cache hors ligne pour les demandes dynamiques \/ d’exécution. Conclusion: dans cet article, je ne présente qu’un PWA de base pour commencer. L’exemple de code est une version grandement simplifiée de notre pwas. Vous pouvez voir le PWA complet ici. Le Repo comprend des services de diffusion de contenu publicitaire, des services de traduction de texte d’application et, enfin et surtout, des tests unitaires avec karma et Jasmine et des tests de bout en bout avec un goniomètre. L’avenir « progressiste » de la construction de réseaux mobiles commence par nous, les développeurs et les concepteurs de réseaux, qui essayons de dépasser la réactivité. Au fur et à mesure que le modèle app store commence à échouer, les éditeurs et les entreprises se rendent compte que les applications ne le sont pas.