Fermer

janvier 30, 2020

Création d'une application Web progressive avec Blazor & C # – Facile comme tarte


Nous étions curieux de connaître Blazor dans une application Web progressive – nous avons donc créé une application. Vous souhaitez utiliser Blazor dans les PWA? Consultez notre exemple d'application et ce que nous avons appris en le développant.

Les applications Web progressives (PWA) peuvent être formidables, et nous étions curieux de voir comment la construction d'un PWA à l'aide de Blazor fonctionnerait. L'expérience est le meilleur professeur, nous avons donc commencé à travailler et nous sommes ravis de partager les résultats avec vous.

Pour créer cette application, nous devions utiliser le "vrai" Blazor – sa saveur WASM (ou WebAssembly) (les composants Telerik UI for Blazor fonctionnent avec les deux, soit dit en passant). WebAssembly est assez cool et vous permet essentiellement d'exécuter C # dans le navigateur au lieu de JavaScript, et n'a pas besoin d'un aller-retour vers le serveur pour chaque petit peu de logique. La mise en garde est que la saveur Blazor côté client est toujours dans Aperçu et a quelques défauts à régler, et les performances en sont un. Néanmoins, le potentiel est immense, nous avons donc voulu l'essayer dans une application Web progressive.

Les PWA existent depuis depuis un certain temps et elles peuvent être assez étonnantes. Si vous n'êtes pas familier avec le terme – cela signifie Progressive Web Application, et la plus courte introduction que je puisse faire à propos des PWA est qu'ils:

  • Vous permettent de créer une application Web, puis de laisser vos utilisateurs mobiles l'utiliser presque comme une application native (y compris un raccourci depuis leur écran d'accueil)
  • Peut être utilisé hors ligne lorsque vos utilisateurs (mobiles) n'ont pas de connexion Internet active, ce que vous ne pouvez pas faire avec une application Web «simple»
  • Peut en fait être également installé sur un ordinateur de bureau (avec Chrome), et pas seulement sur un appareil mobile, et offre les mêmes avantages
  • Ne sont pas si différents de l'application Web de base, ce sont principalement quelques actifs supplémentaires, mis en cache via un technicien de service, et une conception Web réactive (qui devrait déjà être en place, c'est 2020)
  • Doit être un SPA (application d'une seule page), ce qui fait de Blazor un candidat parfait pour un

Pour plus de détails, vous pouvez aller à la pléthore de ressources Google propose (ce sont eux qui l'ont fortement défendu, il est donc logique t o allez les voir pour info): https://developers.google.com/web/progressive-web-apps .

Comment avons-nous construit le PWA ?

Une application Web progressive est essentiellement une application Web avec quelques extras, nous avons donc commencé par avoir une conception et créer les dispositions, la logique et tout le reste. Vous savez, comme vous le feriez habituellement avec n'importe quelle application. Nous savions juste que nous avions besoin que cela fonctionne entièrement sur le client, alors nous avons choisi la saveur WASM Blazor (je ne me lasse pas de le dire ensemble, c'est comme un petit poème).

Maintenant, pour en faire un PWA, ce dont vous avez besoin est:

  • Un fichier manifeste – Ceci indique au périphérique qu'il s'agit en fait d'un PWA et relie certaines ressources.
  • Icônes – Tout à fait évidentes, elles ont juste besoin de avoir des dimensions spécifiques (plutôt grandes, car – les écrans Apple et Retina).
  • Un technicien – C'est là que la magie opère, car c'est ce morceau de code qui met tous les actifs Web de l'application Web dans le cache du navigateur afin qu'ils soient accessibles hors ligne. C'est le cœur de la PWA.
  • Un petit bout de code qui initialise le service worker et l'ajoute à l'application. Vous pouvez le considérer comme faisant partie de l'API du service worker mais je le répertorie séparément car pour Blazor, nous devons accrocher JS Interop ici afin que nous puissions personnaliser l'invite d'installation.

Ne semble pas trop difficile, ou trop longtemps, j'espère. Pour rendre cela encore plus facile, vous pouvez générer ces ressources au moment de l'exécution, vous n'avez donc pas à coder en dur. Nous avons décidé d'utiliser le package Blazor.PWA.MSBuild NuGet par SQL-MisterMagoo pour faciliter cela.

Afin de nous concentrer sur la création de l'application elle-même, nous avons dogfood – avons créé nos propres composants pour mieux voir comment les composants natifs qui fonctionnent dans une application Blazor côté serveur fonctionnent dans une application WASM. Tout s'est bien passé ici, et les composants Telerik sont en effet prêts pour la production et fonctionnent de la même manière entre WASM et les scénarios de serveur.

Nous avons utilisé les éléments clés suivants pour une application financière:

  • Grille avec tri et avec une colonne de modèle pour les graphiques. Il existe également une grille virtualisée qui se met à jour toutes les 1,5 secondes – dans une application réelle, vous récupérez ces données à partir d'un service en direct, ici nous les générons simplement.
  • Graphiques – à la fois dans la grille et en tant que partie principale de l'application – avec un axe de date, quelques séries en place et une coloration personnalisée pour montrer les augmentations et les diminutions.
  • Des listes déroulantes et des sélecteurs de dates pour obtenir un filtrage en place afin que le graphique montre différents ensembles de données avec des paramètres différents (ces paramètres sont la logique métier principale de cet exemple d'application).

Ne me croyez pas sur parole – essayez-le par vous-même . Vous trouverez ci-dessous un code QR pour une numérisation facile sur votre mobile:

 Code QR pour ouvrir l'application Telerik Blazor PWA sur un mobile

Voici ce à quoi vous pouvez vous attendre (oui, aucun téléphone n'est si grand, vous devrez faire défiler un peu):

 Démo financière Blazor

Consultez la source complète code à https://github.com/telerik/blazor-stocks et téléchargez un essai gratuit pour l'essayer par vous-même (si vous avez une licence commerciale déjà, juste mettez à niveau l'application ).

Ceci est juste un exemple d'application, donc il n'a pas de backend à part entière, bien sûr – nous venons de décider que les services génèrent des données pour lancer l'application. N'hésitez pas à extraire cela et à faire vos propres appels d'API REST, à la manière de Blazor.

Ce que j'ai appris au cours du processus

La navigation s'est déroulée en douceur, mais il y a quelques choses que je veux partager avec vous, ce qui améliorera votre expérience dans la création de votre premier PWA:

  • Cela devrait disparaître d'ici mai 2020, mais jusqu'à ce que le WASM Blazor reçoive une prise en charge de débogage appropriée, envisagez de démarrer dans un projet côté serveur afin de pouvoir déboguer et corriger les choses facilement . Je ne peux pas compter les instructions Console.WriteLine () que j'ai écrites, maudites, puis j'ai dû me rappeler de les supprimer.
  • Ajoutez les bits PWA à la fin du cycle de vie du projet. Ils ne sont pas l'élément clé de l'application que vous créez et peuvent rendre le débogage un peu plus difficile (voir les points suivants).
  • Testez votre application dans un onglet Incognito (privé) pendant le développement. Votre première priorité est de vous assurer que l'application fonctionne bien et que la fonctionnalité PWA met en cache tout . Cela inclut l'assembly de votre application où vous venez de corriger un bogue, mais la mise en cache du service worker vous donne l'ancienne version sans le correctif et vous pouvez passer un certain temps à le réparer encore et encore.
  • Assurez-vous que HTTPS est configuré, comme un PWA ne fonctionne que sur HTTPS. Les certificats auto-signés ne sont peut-être pas toujours suffisants non plus, alors surveillez l'onglet Réseau pour voir comment ça se passe.
    • Hébergez l'application sur IIS, par exemple, afin que vous puissiez y accéder facilement à partir d'un appareil mobile, à partir de votre boîte de développement, et partagez-le avec vos collègues. Cela vous permet également de vous exercer sur le workflow de publication dont vous aurez besoin pour la mise en ligne.
  • Lorsque vous êtes presque prêt, testez sur un appareil mobile réel. Il est plus facile de désinstaller le PWA ou de le rafraîchir que de supprimer l'ancien cache du navigateur sans perdre tous vos mots de passe stockés, les autres caches de site, etc.
  • Lorsque vous testez dans un onglet non privé, toujours procédez comme suit avant chaque test:
    • Accédez à l'onglet Application dans les outils de développement et videz le cache de l'application
    • Rechargez dur la page (Ctrl + F5, ou cliquez avec le bouton droit sur le bouton de rechargement et choisissez «Vider le cache et le disque dur»). reset »)
    • Lorsque vous modifiez les actifs de l'application (comme l'ajout d'une nouvelle image ou la suppression de quelque chose), envisagez de mettre à jour la version de cache du service worker. Dans le package que nous utilisons, il s'agit d'un commutateur dans le fichier Client.csproj. Si vous ne le faites pas, d'autres personnes qui n'ont pas effacé leur cache peuvent toujours obtenir l'ancienne version et ne pas recevoir de notification qu'une nouvelle version est disponible.

What Next

Maintenant que nous connaissons le L'interface utilisateur Telerik pour Blazor fonctionne parfaitement dans une application PWA, vous pouvez créer votre propre PWA. Ou transformez simplement l'application existante dont vous disposez en une application progressive. Dans une vraie application, cependant, vous devrez peut-être implémenter la mise en cache pour les réponses aux données et pour les modifications hors ligne, ou au moins pour désactiver les fonctionnalités d'édition lorsque l'application est hors ligne (les événements JS «en ligne» et «hors ligne» vous permettent de le faire, juste

Si vous avez d'autres conseils, astuces ou outils qui vous aident à créer des PWA avec Blazor, mettez-les dans les commentaires ci-dessous, ou même ouvrez une demande de tirage dans le notre code source.

Last but not least – téléchargez un essai gratuit maintenant et explorez l'application PWA et les capacités que nous vous offrons.





Source link