Création d'un PWA avec Vue et Kendo UI

pour ajouter un composant graphique pour visualiser les émotions ajoutées. Pour le bouton Kendo UI, il suffit d'ajouter un écouteur d'événement click avec @click . Lorsque cet événement est déclenché, nous voulons qu'il appelle la méthode addEmotion qui mettra à jour le compte de l'émotion choisie. Le composant graphique aura plus de configurations:

• série-default-type : c'est le type de graphique, par ex. tarte donut etc.
• chart-area-background : la valeur par défaut est un fond blanc, ici nous ne voulons pas d'arrière-plan donc nous le laissons vide
• série : les données à afficher sous forme de graphique
• info-bulle : réglage si l'infobulle est visible et quelles informations elle montre

Voila, la moitié supérieure (section du modèle) du fichier du composant EmotionInput :

 // src / components / EmotionInput.vue

? Lookey ici! Les composants sont ajoutés au modèle ?

Au-delà du modèle

Nous devons maintenant donner des valeurs à toutes ces différentes configurations que nous avons faites. Quel meilleur endroit pour commencer qu'avec les données que nous transmettons à notre composant. Ici, nous retournons les variables que nous avons utilisées à l'envers comme composant émotionDate minDate maxDate emotionArray émotionSélectionné et info-bulle . Nous ajouterons également quelques variables qui seront utilisées à l'intérieur de la méthode pour incrémenter la fréquence de chaque émotion choisie: happyFeels sadFeels funnyFeels et angryFeels . Ce sont aussi ce qui est utilisé dans les données de la série pour le graphique

La méthode que nous ajoutons ici est celle assignée à l'événement click sur notre bouton. Fondamentalement, il est passé le this.emotionSelected qui est, grâce à v-model mis à jour quand un utilisateur choisit une émotion de la liste déroulante. Sur la base de quelle émotion est sélectionnée, elle incrémente le nombre de cette émotion

Enfin, afin de toujours mettre à jour les données pour le composant chart, nous utilisons propriétés calculées . À l'intérieur calculé nous avons créé la série que nous avions assignée à la configuration de notre carte. De cette façon, lorsque addEmotion met à jour l'une des émotions, le tableau de données est également mis à jour. Cela signifie que le graphe sera mis à jour avec chaque émotion ajoutée.

Maintenant, la moitié inférieure, ou section de script du fichier EmotionInput.vue ressemblera à ceci :

 // src / components / EmotionInput.vue

...
 

Si vous avez toujours votre application en cours d'exécution en arrière-plan ou exécutez npm start vous pouvez voir l'application qui fonctionne.

? Le commit pour la section de script amusant que nous avons ajouté!

Vous avez l'air bien: style supplémentaire

Vraiment rapidement pour rendre notre application encore plus belle, nous allons ajouter un peu de style. Pour styliser l'application globale, nous allons d'abord ajouter un style au fichier App.vue .

Ensuite, pour le style de composant spécifique, nous éditons le Fichier: EmotionInput.vue ?.

Jetez un oeil aux sections style de chacun de ces fichiers:

 // src / App.vue

...

 // src / components / EmotionInput.vue

...

L'exécution de notre application avec npm start nous permettra de voir ce que nous avons maintenant!

? Stylin 'change de code .

S'impliquer dans le manifeste de l'application ?

Le manifeste de l'application est un excellent point de départ pour les PWA car il s'agit d'un simple fichier JSON qui vous permet d'ajouter des fonctionnalités impressionnantes. Vous pouvez trouver ce fichier dans le répertoire static . Si vous regardez à l'intérieur dist / index.html après avoir construit votre projet, vous pouvez rechercher le manifeste pour voir comment il est chargé. Sur d'autres projets, vous pouvez l'ajouter simplement en le reliant comme ceci, dans le de votre document

Ce sont les valeurs que nous allons assigner dans notre manifeste:

• nom : Ceci est décrit comme le lisible par un humain sur MDN, il peut être utilisé lorsque votre application est listée, mais le nom abrégé sera utilisé à la place si ce nom est trop long à afficher.
• abrégé : Bien , parle du diable ? C'est le nom qui sera généralement affiché dans des endroits comme l'écran d'accueil d'un utilisateur où il n'y a pas assez d'espace pour le nom . PLUS, IL SUPPORTE EMOJI !! ✨???
• icônes : Les icônes sont un tableau composé d'objets image avec src tailles et type valeurs. Cela détermine quelles icônes représentent votre application sur différentes plates-formes, comme lorsqu'un utilisateur ajoute votre application à son écran d'accueil.
• start_url : Lorsqu'un utilisateur lance votre application, il s'agit de l'URL qu'il chargera. Cette URL doit être relative à l'origine du site
• afficher : Ce paramètre astucieux vous permet de choisir une application en plein écran en utilisant standalone || fullscreen et en supprimant le chrome du navigateur, conservez-le et réglez-le sur le navigateur OU conservez-le minimal avec minimal-ui .
• background_color : Un peu explicite, cela définit la couleur de fond de votre application. Le principal avantage de l'utiliser est de donner à votre utilisateur une transition en douceur de l'ouverture de l'application et lorsque l'application est chargée en montrant un changement de couleur afin qu'ils sachent que quelque chose se passe
• theme_color : La couleur du thème de l'application peut affecter la façon dont l'application est affichée en fonction du système d'exploitation. Par exemple, avec Android lorsque vous regardez l'application dans le bac de l'application, il aura cette couleur comme couleur de la bordure de l'application

Comme vous pouvez le voir dans ce GIF, il y a un beaucoup d'options d'icônes qui peuvent être ajoutées au fichier manifest.json . Habituellement, je prends juste une image et la redimensionne et l'enregistre dans le bon nom de fichier. Ici, je viens de choisir un visage pensant Emoji PNG et le redimensionner pour chaque image d'icône existante

Maintenant que nous avons toutes les icônes et le manifeste d'application mis en place nous pouvons tête à notre application et voir les changements. Si vous ouvrez Outils de développement (ici, nous utilisons Chrome), et cliquez sur l'onglet Application, vous verrez un onglet Manifest sur la gauche. Ici vous pouvez voir où le fichier Manifest vit avec toutes les valeurs que nous avons assignées. Cela vous donne aussi un aperçu de ce à quoi ressemblent vos icônes.

En fin de compte, le fichier manifeste de l'application ressemblera à ceci. Rappelez-vous, vous pouvez revenir en arrière et en ajouter d'autres!

De static / manifest.json :

 {
  "nom": "émotions-en-vue",
  "short_name": "????",
  "icônes": [
    {
      "src": "/static/img/icons/android-chrome-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "/static/img/icons/android-chrome-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ],
  "start_url": "/index.html",
  "display": "autonome",
  "background_color": "# E8DC36",
  "theme_color": "# 5A9CE8"
} 

? Le code du manifeste d'application change

? Travailleur du service pour la mise en cache hors ligne

Nous avons maintenant la possibilité de faire notre application plein écran, lui donner des emojis et des icônes pour les écrans d'accueil. ? Avec Service Workers il y a beaucoup de grands progrès qui peuvent être ajoutés à votre application. Le fichier Service Worker est un script exécuté séparément de votre application en arrière-plan entre votre application et votre réseau. Pour nous lancer, la vue CLI nous permet en fait de nous confier un Service Worker qui met en cache certaines de nos ressources pour une fonctionnalité hors ligne. Jetez un coup d'oeil!

Les techniciens de service peuvent être un peu intimidants mais il est bon de se souvenir qu'ils sont juste fichiers JavaScript. Si vous regardez à travers c'est principalement en utilisant des promesses et si des déclarations pour écouter des événements. C'est aussi progressif. Si vous avez remarqué, il y a une ligne dans le fichier qui vérifie si serviceWorker est supporté.

 if ('serviceWorker' dans le navigateur ... 

Donc, si vous ajoutez un Service Worker il ne cassera pas votre application ? Il y a beaucoup plus de Travailleurs de Service donc je recommande fortement de lire plus comme cet excellent article sur les Travailleurs de Service de Raymond Camden ou de vérifier ce podcast Je viens de le faire avec Jake Archibald Matt Gaunt Patrick Kettner et Dan Shaw

Voyons voir Pour commencer, nous voulons construire notre application en exécutant npm run build .

Déployer, Déployer!

Le Cela signifie que nous avons tout ce dont nous avons besoin pour déployer notre application dans le répertoire dist . n application, et aujourd'hui, nous allons utiliser le Firebase CLI . Pour l'utiliser, installez-le d'abord globalement avec npm.

 npm install -g firebase-tools 

Ensuite, à partir du répertoire de votre projet, lancez firebase init . Il vous guidera à travers quelques étapes. Tout d'abord, il suffit de cocher Hosting choisir un projet (j'en ai déjà fait un dans ma Firebase Console), puis assigner le répertoire dist car les fichiers que nous voulons héberger se trouvent à l'intérieur. Il y a plus d'options pour faire de votre application un SPA (application d'une seule page) et réécrire le index.html mais je viens de dire non à tout cela pour l'instant.

Une fois la configuration terminée vous devez faire est firebase deploy chaque fois que vous voulez redéployer votre application.

Déploiement terminé! Nous pouvons jeter un oeil à notre application hébergée. Pour voir ce qui se passe avec Service Worker, revenez à l'onglet Application dans les Outils de développement. Lorsque l'onglet Manifest était sur le côté gauche, il existe également un onglet Service Workers. En cliquant sur ce que vous pouvez voir les informations de notre Service Worker et que c'est enregistré. Par défaut, la case 'Update on reload' est cochée afin que nous soyons sûrs de garder les choses à jour. C'est un excellent endroit pour déboguer vos techniciens de service.

Pour voir la mise en cache en action, nous cliquerons sur la case à cocher hors ligne pour nous déconnecter du réseau. N'oubliez pas de vous déconnecter complètement de votre propre réseau Wi-Fi ou réseau pour voir comment votre application est réellement hors connexion. Si vous remarquez que nous rechargeons, l'image d'arrière-plan n'est plus là car nous la saisissions depuis un autre site (mes photos google) qui ne peut être atteint sans un réseau. Au-delà, tout fonctionne comme il se doit. Merci, Service Worker ??

Il y a beaucoup de mises en garde avec la mise en cache, donc ça vaut la peine de faire des recherches avant que votre utilisateur cache tout votre site ?. Voici quelques articles que je recommande:

? Validation des nouveaux fichiers d'installation de Firebase.

Donezo! ✅

Nous utilisons une application Web progressive dans Vue ? !! Il y a beaucoup de mesures que nous pouvons continuer à prendre pour rendre nos applications plus PWA-y. Par exemple, nous pouvons utiliser l'API Push pour créer un technicien de service qui envoie des notifications push pour permettre à un utilisateur de consigner son émotion pour la journée. Nifty, c'est ça? Voici un tas de ressources amusantes pour vous aider à construire une application plus robuste avec plus de composants et plus de PWA-y avec plus d'info PWA:

---