L’Outil Surpuissant pour Exploser ton Chiffre d'Affaires en 2024 !
Créer une application Web progressive
Les PWA vous permettent d'utiliser une application Web existante et de la proposer comme une expérience mobile native. Dans ce blog, nous expliquons comment procéder à l'aide de notre exemple d'application de voyage, TripXpert.
Il est difficile d'échapper à tout le battage médiatique autour des applications Web progressives (PWA). Tous les utilisateurs du Web sont enthousiastes à l'idée de pouvoir utiliser leurs applications Web existantes et de les proposer de manière plus native sur des appareils mobiles. Beaucoup d'entre vous ont peut-être examiné leur nature et ont une bonne idée des caractéristiques d'un PWA, mais vous ne savez peut-être pas que nous en avons quelques exemples utilisant des composants Kendo UI.
Aujourd'hui, je voulais plonger dans l'une de ces applications, TripXpert que nous présentons depuis longtemps comme une application Web réactive. Pourquoi évoquer cela dans une conversation PWA? Récemment, l’équipe a pris le temps de transformer TripXpert en PWA à part entière et je voulais souligner la façon dont nous avons ajouté cette fonctionnalité supplémentaire.
Attendez une seconde, qu’est-ce qu’un PWA? 19659005] Si vous n'avez pas encore entendu parler de Progressive Web Apps, je ne vous expliquerai qu'un paragraphe ou deux.
En bref, les PWA sont des applications Web réactives qui peuvent tirer parti des fonctionnalités mobiles. fonctionnalités natives des appareils. Vous pouvez dire au départ que c’est proche de Cordova et des anciennes applications hybrides, mais la principale différence est qu’il n’est pas nécessaire d’exécuter l’application dans un shell, ni d’offrir des plugins ou des wrappers pour les fonctionnalités natives. Un PWA est une application Web classique vers laquelle nous naviguons aujourd'hui avec nos appareils de bureau et mobiles. Nous ajoutons simplement des fonctionnalités supplémentaires sur les périphériques mobiles lorsqu'un utilisateur choisit de les ajouter à l'écran d'accueil, via le navigateur plutôt que via les divers magasins d'applications.
Je devrais mentionner que, au-delà du simple ajout de fonctionnalités mobiles natives à un app, un PWA est également une application optimisée qui est fiable et peut se charger instantanément même avec des connexions Internet lentes ou inexistantes. Il est également rapide et peut offrir une expérience de type autochtone (réagit rapidement aux interactions, a des animations fluides et est dépourvu de "jank"). Enfin, un PWA devrait également être attrayant, ce qui signifie qu'il devrait ressembler à une application naturelle sur l'appareil mobile, y compris tous les UX associés à cet état d'esprit. Donc, ce n’est pas aussi simple que d’ajouter un nouveau paramètre et d’obtenir un PWA, vous devez vous assurer que vous êtes correctement optimisé pour devenir un PWA. Dans tous les cas, le résultat est bon pour vous, car non seulement les utilisateurs mobiles vous impliquent davantage dans votre application, mais vous obtenez également une application plus rapide, ce qui est très important pour les applications Web d'aujourd'hui.
Google a une grande page de PWA qui couvre tout à un niveau élevé, fournit également des liens détaillés et davantage de ressources à explorer. Il couvre ce que j'ai mentionné ci-dessus et bien plus encore, et contient des outils comme Lighthouse pour vous aider à construire et à optimiser votre PWA, alors vérifiez-le!
En réalité, qu'est-ce que "TripXpert"?
Permettez-moi également de vous présenter l'application dont nous parlerons tout au long de cet article: TripXpert. Pour résumer, TripXpert est conçu pour imiter un site Web touristique qui vous permet de réserver des forfaits de vacances complets dans différents endroits du monde. Ce qui me plaît dans ce scénario, c’est qu’il nous donne beaucoup d’exemples concrets à traiter, comme afficher une liste de packages, créer une présentation attrayante pour chaque package, fournir une vue de détail pouvant intégrer nos composants de visualisation de données et nos cartes. et quelques autres choses. De plus, d'un point de vue mobile, les utilisateurs peuvent envisager des trajets potentiels lors de leurs déplacements, ce qui en fait un excellent scénario pour commencer à tirer parti des fonctionnalités de l'appareil et créer un excellent PWA.
TripXpert a été construit avec ASP.NET MVC et l'interface utilisateur Telerik pour les composants ASP.NET MVC . Le grand avantage de ces composants est qu'ils sont construits sur l'édition jQuery des composants de l'interface utilisateur Kendo, tout ce que je mentionne dans cet article peut donc s'appliquer à jQuery, ASP.NET MVC et ASP.NET Core (
Voici une liste complète des composants que nous avons utilisés:
- DropDownList
- MaskedTextBox
- Fenêtre
- Bouton
- Carte
- Dialog
- Menu [19659020] ListView
- Calendrier
- TabStrip
- ComboBox
- ResponsivePanel
- Validateur de l'interface utilisateur de Kendo
Premièrement, cette application visait à mettre en valeur les superbes composants de l'interface utilisateur que nous avons (juste un vantard, je sais, mais je suis partial 
), ainsi qu'à les assembler dans un Un plus grand échantillon, mais il a également joué un rôle essentiel dans la démonstration de la création d’une application Web réactive utilisant nos composants d’interface utilisateur. Les composants de la Kendo UI sont tous réactifs ce qui signifie qu'en dehors de certains choix de conception que nous avons faits pour l'apparence de l'application elle-même, toute approche de conception réactive est entièrement travaillez avec nos composants.
Maintenant, pour en faire un PWA, il y a quelques choses que nous devons faire en plus des fonctionnalités responsives, mais j'y reviendrai un peu plus tard. Voyons d'abord ce que nous avons fait en matière de réactivité.
Rendre les choses réactives
Pour nous assurer que nous suivons les schémas que vous utilisez peut-être aujourd'hui, nous avons commencé par ajouter Bootstrap v4.1.1 . Bien que nous ne l'utilisions pas à 100% dans toutes nos fonctionnalités réactives (certaines sont basées sur le CSS personnalisé que nous avons implémenté ou sur les classes disponibles dans les thèmes de Kendo UI), vous verrez de nombreuses inclusions dans les utilitaires d'espacement Boostrap éparpillé dans le code HTML. Cela nous aide à nous assurer que les éléments apparaissent aux bons endroits en fonction de la fenêtre d'affichage disponible, ce qui est très important, car l'évolution de l'application change: nous ne voulons pas que les éléments apparaissent soit côte à côte, soit étrangement empilés. lorsque nous redimensionnons le navigateur (en particulier lorsque nous utilisons un appareil mobile).
Nous n'avons toutefois utilisé que Bootstrap. Nous avons également effectué des travaux sur les composants jQuery de Kendo UI et notre intégration à Bootstrap, dont nous pouvons tirer parti pour rendre les choses vraiment réactives.
Bien que je ne puisse pas passer au travers de chaque élément de réactivité (ce serait un article Je peux fournir quelques points saillants.
En regardant dans la zone de recherche, nous constatons que nous avons différentes vues de recherche en fonction de notre port de vue.
Bureau
Mobile
Comme on peut le voir, on laisse tomber beaucoup de choses supplémentaires "fluff" autour des recherches lorsque nous obtenons une taille d'écran plus petite. Vous pouvez toujours sélectionner les filtres que nous avons au début en fonction des interactions avec l'entrée de recherche, mais d'un point de vue immobilier, nous réduisons un peu.
Tout cela est géré en travaillant avec Bootstrap pour définir certaines règles. autour de quand afficher un certain élément, après avoir travaillé avec les Bootstrap Display Utilities pour décider à quelle taille nous devrions cacher ces entrées. Ensuite, d’un point de vue composant Kendo UI, nous définissons simplement que nous voulons que l’élément ait width: 100% comme nous le faisons ici:
@ (Html.Kendo (). DropDownList ( )
.Name ("TypeOffre")
.OptionLabel ("Type d’offre")
.DataTextField ("Texte")
.DataValueField ( "Valeur")
.BindTo (nouvelle liste < SelectListItem > () {
nouveau SelectListItem () {Text = "Tous les types", Valeur = "Tous" },
new SelectListItem () {Text = "Offres spéciales", Value = "Special"},
new SelectListItem () {Text = "Offres normales", Valeur = "Régulière" }
})
.HtmlAttributes (nouveau {style = "width: 100%;", @class = "tx-offertype"})
.Height (150 )
.Events (x => x.Change ("onOfferTypeChange"))
)
Remarquez l'option de configuration .HtmlAttributes ci-dessus. Il s'agit en gros de tout ce dont nous avons besoin pour que Kendo UI respecte toutes les règles définies avec Bootstrap! [19659068] Ce qui précède n’est qu’un extrait de ce que nous avons fait pour ajouter de la réactivité à TripXpert. Il existe de nombreuses fonctionnalités plus réactives intégrées (découvrez comment ListView passe de plusieurs colonnes à une seule colonne sur les appareils mobiles), mais je souhaite passer à ce qui a été fait
Faisons un PWA!
Maintenant , rendre un site Web réactif n’est vraiment que la première étape. Comment pouvons-nous prendre quelque chose comme TripXpert et en faire un PWA à part entière? Eh bien, il y a quelques choses que nous devons faire au niveau technique pour "PWA-ify" notre application. Du point de vue de l'interface utilisateur (l'application doit suivre les directives UX pour les PWA), nous sommes heureusement couverts pour plusieurs raisons, l'une étant l'utilisation des classes CSS de Kendo UI que nous pouvons extraire de nos thèmes. Avoir la réactivité intégrée des composants de Kendo UI est également très utile!
Jetons un coup d'œil aux deux choses qui ressortent immédiatement pour que cette application passe de responsive à progressive.
Ajout du manifeste .json
Le fichier manifest.json décrit la nature de votre application et explique le comportement à adopter lorsqu'un utilisateur l'installe sur son écran d'accueil. Les navigateurs peuvent lire ce fichier et avoir un aperçu rapide de ce à quoi s'attendre de votre application. Ce fichier est requis pour que les navigateurs tels que Chrome fournissent l'option "Ajouter à l'écran d'accueil" à votre application (ce que nous verrons plus tard en action). Pour une explication plus détaillée de ce qu'est le fichier manifest.json, veuillez vous reporter au guide des principes Web de Google relatif à Le manifeste des applications Web .
Pour référence, voici ce que nous avons spécifiquement fait pour TripXpert et ses . ] manifest.json fichier:
{
"name": "TripXpert",
"short_name": "TripXpert",
"theme_color": "# 858585",
"background_color": "# 858585",
"display": "autonome",
"Scope": ". / ",
" lang ":" en ",
" description ":" L'application de planification de voyage ultime! ",
" start_url ":" ./ " ,
"icones": [
{
"src": "/Images/App/Icons/HomeScreen/homescreen-icons_144X144.png ",ANC596542] [19659101] "tailles": "144x144",
"type": "imag e / png "
},
{
" src ":" /Images/App/Icons/HomeScreen/homescreen-icons_180X180.png ", 5999042] [19659101] "tailles": "180x180",
"type": "image / png"
},
{
"src": "/Images/App/Icons/HomeScreen/homescreen-icons_192X192.png",
" tailles ":" 192x192 ",
" type ":" image / png "
[19659041]},
{
"src": "/Images/App/Icons/HomeScreen/homescreen-icons_512X512.png",
" 19659101] "tailles" "": "512x512 ",
" type ":" image / png "
}
" splash_pages ": null,
"screenshots": [
{
"src": "/ Imag es / Galerie / France / Tour Eiffel_Attraction.jpg ",
" tailles ":" 320x320 ",
" type ":" image / jpeg "
},
{
"src": "/Images/Gallery/Italy/Roman-Colosseum_Lilia-Karakoleva.jpg" ,
" 1965 "," tailles ":" 320x3 " ] "type": "image / jpeg"
}
]
}
Voici le nom de l'application, TripXpert, ainsi que le nom de l'application. icônes que nous aimerions associer à l'application en fonction de la taille offerte par l'appareil. Nous avons également mis en place des choses telles que veiller à ce que l'application démarre toujours sur ./ même si l'utilisateur l'a enregistrée sur son bureau lors de la navigation dans un forfait vacances particulier, et nous avons également défini qu'il devrait s'exécuter en mode autonome. afin qu’il s’exécute dans sa propre fenêtre plutôt que dans l’interface utilisateur standard du navigateur. Cela nous aide à rendre l'expérience utilisateur encore plus proche d'une application native.
Un travail pénible avec les ouvriers du service
Au-delà de la simple description du comportement de notre application à l'installation, nous souhaitons tirer parti de certaines fonctionnalités natives. . Cela comprend potentiellement l'utilisation de l'application en mode hors connexion, la synchronisation des données en arrière-plan, les notifications push et bien plus encore! La clé de ceci est les travailleurs du service et c'est ce qui permet aux PWA de combler le fossé entre la fonctionnalité Web et les fonctionnalités natives.
Pour la portée de cet article, un travailleur du service est écrit en JavaScript et le navigateur l'exécute. en arrière-plan, séparé de votre application Web. Il ne peut pas accéder directement au DOM, vous devez donc gérer la communication entre le technicien de service et votre logique métier. Un technicien de service se termine également lorsqu'il n'est pas utilisé et redémarre lorsqu'il est utilisé, de sorte que vous ne pouvez pas utiliser les techniciens de service pour gérer l'état et les données.
Pour plus d'informations sur les techniciens de service (il y en a beaucoup à regarder) (to to!), je vous recommande l'article de Google Service Workers: an Introduction qui décrit très bien ce que sont les services et comment commencer à les utiliser dans vos applications.
fichier pour TripXpert est un peu long, donc plutôt que de le coller ici, je vais directement le lier à service-worker.js ici .
Ce que vous remarquerez au départ est une variable que nous avons définie. Pour contenir les fichiers que nous souhaitons mettre en cache:
var cachedFiles = [
chemin,
chemin + "bundles / css? v = 9bf_1hNPhPPO3XXNTcN-zh4IFDRFrfVddcddd 19659041] chemin + "bundles / js? V = 3NJpYh6kMRRulVfyFMXyChUMveyhk6-RqaWX_5pxkQY1",
[19659041] chemin + 'Images / App / TripXpert_logo.svg',
chemin + 'Home / GetDestinations',
chemin + 'Home / GetSpecialDestinations',
chemin + 'Destinations / Destinations_First',
chemin + 'Images / Galerie / Barcelone-et-Ténérife / Arc-de-Triomf, -Barcelone, -Espagne_Liliya-Karakoleva.JPG? Width = 320 & height = 320', [19659042] [...]
Cette partie, en particulier les premières lignes, est importante pour garantir que toutes les fonctionnalités de notre application restent intactes lorsque nous installons notre application sur un périphérique mobile. Cette variable fournit tous les chemins d'accès aux fichiers JavaScript que nous devons utiliser dans notre application, puis des transitions en pages, images et autres fichiers nécessaires à notre application.
Nous l'utilisons lors de l'installation de . L'événement du service worker déclenche (lorsque nous installons réellement l'application sur un périphérique) la mise en cache de tous les fichiers fournis dans le tableau cachedFiles .
self.addEventListener ('install', fonction (e) {
e.waitUntil (
caches.open (cacheName) .then (fonction (cache) {
Promise.all (
[19659204] cachedFiles.map (fonction (url) {cache.add (url)})
)
})
)
})
] Maintenant, une fois que nous aurons installé et configuré nos fichiers en cache, nous devrons en fait gérer Que se passe-t-il lorsque des demandes sont effectuées dans l'application? Un technicien commence à recevoir des événements fetch lorsqu'un utilisateur accède à une page différente ou actualise une page particulière. C'est l'occasion pour nous de vérifier si quelque chose est disponible dans le cache ou s'il faut extraire quelque chose en dehors de l'application. S'il s'agit d'une ressource disponible localement, ne perdons pas de temps et de bande passante en essayant de la récupérer quelque part sur un serveur!
Je ne vais pas vous donner une description complète de ce que chaque ligne signifie ici, mais pour référence Voici comment nous gérons cela dans TripXpert.
self.addEventListener ('fetch', fonction (e) {
if ((e.request.url.indexOf ("kendo")> = k = -1 && e.request.url.indexOf ("TripXpert") === -1) ||
e.request.url.indexOf ("t.eloqua")! == -1 | |
e.request.url.indexOf ("d.company")! == -1 ||
e.request.url.indexOf ("facebook")! == - 1 ||
e.request.url.indexOf ("google")! == -1 ||
e.request.url.indexOf ("cerveau")! == - 1 ||
e.request.url.indexOf ("twitter")! == -1 ||
e.request.url.indexOf ("linkedin")! == - 1 ||
e.request.url.indexOf ("Destination")! == -1
) {
retour;
} [19659239]
e.pondWith (
caches.match (requête.url.), puis (fonction (resp) {
return resp || fetch (e.request.url) .then (fonction (réponse) {
var clonedResponse = response.clone ();
if (réponse. redirigé) {
retourne une nouvelle réponse (response.body);
}
caches.open (cacheName) .then (fonction (cache) {[19659042] cache.put (e.request.url, clonedResponse);
})
réponse renvoyée;
})
}). catch (function () {
return caches.match ('/');
})
[19659041]);
}];
Avec tout ce qui précède, nous avons les bases d’un PWA. Notre application peut maintenant être installée. Elle ressemblera à une application native (aucune interface utilisateur de navigateur ne gênera), disposera de son propre jeu d’icônes sur divers écrans d’accueil et fonctionnera hors ligne sans aucune fonctionnalité manquante! Nous n’ajoutons pas de notifications push ou quelque chose du genre dans cette itération, mais cela nous donne une bonne base de référence pour un PWA initial que nous pouvons bien sûr développer pour en faire encore plus ressembler à des natifs!
La preuve est dans le pudding
Voyons voir à quoi cela ressemble sur mon appareil mobile!
Comme on peut le voir sur cet appareil Android, Chrome me propose la possibilité de sauvegarder cette application sur l'écran d'accueil de mon téléphone.Vous remarquerez maintenant que je reçois une icône générique plutôt que cette magnifique icône ce qui semble être dû à mon lanceur personnalisé. Sur votre propre appareil, vous devriez pouvoir voir l’icône TripXpert à la place.
Une fois que j’ouvre l’application, nous constatons qu’il n’ya vraiment aucun moyen de dire qu’il ne s’agit pas d’une application mobile classique. Il n’existe aucune barre d’interface utilisateur dans le navigateur en bas, ni aucun type de barre de recherche en haut. Par conséquent, du point de vue de l’utilisateur, nous avons créé quelque chose qui OK sur leur appareil et ils y ont accès comme n'importe quelle autre application installée sur l'App Store ou sur Google Play.
Le bit le plus important: le code source
J'ai établi un lien avec le TripXpert actuel. application jusqu'ici, mais qu'en est-il du code source? Il se trouve ici même sur GitHub et vous donnera un aperçu supplémentaire de la façon dont nous avons configuré les choses (code côté serveur inclus)! C’est un excellent moyen de mieux comprendre comment nous avons créé cette jolie petite application.
Pssst - Nous avons d’autres PWA!
À propos, TripXpert n’est pas le seul exemple que nous ayons qui couvre la construire une application Web progressive! Si vous souhaitez savoir comment cela peut être fait dans Angular ou React, alors j'ai une bonne nouvelle pour vous: nous avons également des exemples de PWA construits pour ces frameworks! Consultez-les ici même:
Notes finales
Bien que ce billet de blog ne vous explique pas étape par étape la construction de TripXpert, il espère vous avoir fourni quelques idées et conseils sur la manière de prendre vos propres applications et faites-les dans un PWA. Il peut y avoir quelques étapes ici, y compris rendre votre application réellement réactive, mais une fois que vous avez une mise en page et une expérience utilisateur optimales pour les appareils mobiles, il est naturel de commencer à ajouter des fonctionnalités supplémentaires pour rendre l'expérience encore meilleure pour les utilisateurs. utilisateurs mobiles! Allez-y et PWA!
Les commentaires sont désactivés en mode Aperçu.
Source link