Quelques conseils pour créer des applications Web progressives –

Au cours des dernières années, nous avons constaté un certain nombre de changements majeurs dans l’expérience en ligne, principalement liés à la prolifération des appareils mobiles. L'évolution du Web nous a conduit de versions uniques d'un site Web à des versions pour ordinateurs de bureau ou mobiles, à des sites réactifs adaptés à la taille de l'écran, puis à des applications mobiles natives, recréant l'expérience de bureau en application native. comme une passerelle vers la version responsive.

La dernière itération de tout ceci est l'application Web progressive (PWA). Une PWA est une plate-forme logicielle destinée à combiner le meilleur du Web et de l'expérience native pour les utilisateurs de sites Web / applications.

Dans cet article sur les CSS et les PWA, nous allons aborder un certain nombre de techniques utilisé lors de la création du CSS requis pour le développement de PWA.

Que sont les PWA?

Il existe trois caractéristiques principales d'une PWA. Comme vous le verrez, ce qui rend une application Web progressive, ce sont les «problèmes» généralement associés aux applications Web, en adoptant certaines des techniques utilisées par les applications natives pour résoudre ces problèmes.

1. Fiable . Une PWA doit pouvoir être chargée de manière fiable comme une application native (quel que soit l'état du réseau). Ceci est contraire à une page Web, qui généralement ne se charge pas si le périphérique est déconnecté du réseau.

2. Rapide . Les performances d'une PWA doivent être indépendantes de la géographie, de la vitesse du réseau, de la charge ou d'autres facteurs indépendants de la volonté de l'utilisateur final.

3. Engaging . Les PWA doivent imiter l'expérience immersive en plein écran de l'application native sans avoir besoin d'un app store, et même prendre en charge des fonctionnalités telles que les notifications push.

autres caractéristiques Fonctions PWA, mais pour le moment, nous nous en tiendrons aux plus importantes décrites ci-dessus.

Google a été à la pointe de la promotion de ce type d’applications, mais l’adoption des PWA a les fournisseurs et de nombreuses autres sociétés sur le Web contribuent à l'adoption et à l'adoption du concept de PWA.

Ce qui suit sont les commentaires d'Itai Sadan, PDG de Duda présent à Cloudfest 2018:

Les applications Web progressives représentent le prochain bond en avant dans l'évolution de la conception Web et de la gestion de la présence en ligne … elles prennent les meilleurs aspects des applications natives, comme une expérience riche en fonctionnalités et les incorporer dans resp sites Web interactifs. Cela crée une expérience Web incroyable pour les utilisateurs qui n'ont pas besoin de télécharger quoi que ce soit sur leur appareil.

Toute personne fournissant des services de conception Web aux clients voudra proposer des solutions car, avec le temps, devenir le standard de l'industrie.

Ce qui est requis pour développer des PWA?

Le développement d'une PWA n'est pas différent du développement d'une application Web standard, et il peut être possible de mettre à niveau votre base de code existante. Notez que pour le déploiement, HTTPS est une exigence, même si vous pouvez effectuer des tests sur l'hôte local. Les conditions requises pour qu'une application devienne une PWA sont décrites ci-dessous.

1. Créer un fichier manifeste

Les pages Web doivent être disponibles pour être installées directement via un site Web visité, ce qui signifie qu’il n’est pas nécessaire d’installer un app store tiers.

Pour cela, l’application doit fournir un fichier manifest.json – un fichier JSON qui permet au développeur de contrôler l'affichage de la PWA, ce qui doit être lancé et d'autres paramètres.

Un fichier manifeste typique apparaît ci-dessous. Comme nous pouvons le voir, les propriétés définissent un certain nombre de paramètres d’apparence qui seront utilisés sur l’écran d’accueil de l’appareil sur lequel l’application sera installée.

Le style de la PWA commence à partir du fichier manifeste, mais il n'y a pas de véritable CSS impliqué dans cette partie. Il s'agit simplement de propriétés qui définissent le nom, les icônes, les couleurs primaires, etc. de l'application.

2. Utilisation d'un technicien de maintenance

Un technicien de maintenance est essentiellement un type de travailleur Web, implémenté sous la forme d'un fichier JavaScript qui s'exécute indépendamment du navigateur, capable d'intercepter les requêtes réseau, de mettre en cache ou de récupérer des ressources envoyer des messages si nécessaire.

L'agent de maintenance est ce qui rend le PWA réellement hors ligne.

3. Installer les actifs du site, y compris les CSS

Lors de la première inscription de l'agent de service, un événement d'installation est déclenché. C'est là que tous les actifs du site sont installés, y compris les fichiers CSS, JS et autres fichiers multimédia et de ressources requis par l'application:

 self.addEventListener ('install', function (e) {
e.waitUntil (
  caches.open ('airhorner'). alors (fonction (cache)
  {
    return cache.addAll ([
    '/',
    '/index.html',
    '/index.html?homescreen=1',
    '/?homescreen=1',
    '/styles/main.css',
    '/scripts/main.min.js',
    '/sounds/airhorn.mp3'
    ]);
  })
);
})

Le développement de PWA n'est pas très différent du développement d'applications Web, pour autant que les exigences fondamentales soient satisfaites.

C'est là que le CSS commence à s'impliquer, avec les fichiers définis pour le style du Web progressif app.

CSS et PWA: quelques considérations

En ce qui concerne les CSS et les PWA, nous devons garder à l'esprit certaines choses. Toutes ces décisions doivent être prises avant le développement d'une application Web progressive.

L'application devrait-elle suivre les interfaces utilisateur spécifiques à la plate-forme?

Si nous optons pour une autre plateforme (disons Android dans en faveur d’iOS), nous risquons d’aliéner ou de désavantager cette partie de l’audience que nous n’avons pas prise en compte. Il est également probable que les conceptions de plate-forme changent au fur et à mesure qu'elles évoluent entre les différentes versions.

À mon avis, il faut éviter autant que possible le couplage fournisseur.

Platform-agnostic Design

l'idéal est d'opter pour une conception essentiellement indépendante de la plate-forme.

Si ce chemin est choisi, nous devrions nous assurer que le résultat ne diffère pas trop de la forme et de la fonction de l'interface utilisateur exposée par la plate-forme native. Il faut utiliser des comportements standard et effectuer des tests utilisateur approfondis pour s'assurer qu'aucun problème UX n'a ​​été introduit sur des plates-formes spécifiques. Par exemple, il est fortement recommandé d'éviter les composants personnalisés et d'opter pour des contrôles HTML5 standard, que le navigateur peut optimiser pour l'interface utilisateur et la meilleure expérience.

Device Capabilities

La voie à suivre pour les PWA – même si point ils sont principalement axés sur les appareils – est de devenir une solution holistique pour toutes les plates-formes, y compris les ordinateurs de bureau. À partir de mai 2018, Chrome prend en charge les PWA sur les ordinateurs de bureau et d'autres fournisseurs vont bientôt le faire également.

Vos considérations CSS et de style doivent prendre en compte tout cela et le concevoir dès le départ

L'intérêt de travailler avec une PWA est que vous pouvez utiliser une combinaison de CSS et de l'implémentation de Service Worker pour améliorer ou limiter les fonctionnalités en fonction des ressources disponibles.

Amélioration progressive et dégradation progressive

] CSS en général est capable de se rabattre gracieusement;

Cela étant dit, il faut également s'assurer que les éléments critiques ont le bon repli ou ne manquent aucun style essentiel.

Une autre approche de la dégradation progressive est l'amélioration progressive. C'est un concept que nous devons toujours garder à l'esprit lorsque nous travaillons sur notre PWA. Par exemple, nous devons d'abord tester le support d'une API Service Worker avant de tenter de l'utiliser, en utilisant un code similaire à celui-ci:

 if (! ('ServiceWorker' dans le navigateur)) {
  console.log ('Service Worker not supported');
  revenir;
}

Des variantes de cette logique peuvent être utilisées pour gérer différents cas d'utilisation, tels que le style pour des plates-formes spécifiques, et d'autres que nous mentionnerons plus tard.

Suggestions générales

En ce qui concerne l'expérience utilisateur, ils transfèrent beaucoup de responsabilités au développeur lorsqu'il s'agit de gérer les nuances de différentes technologies.

En tant que développeur / chef de produit, il comprend l'équilibre délicat entre les besoins des utilisateurs et disponibilité limitée des ressources de développement, je recommande toujours de trouver un terrain d’entente qui couvre autant de cas d’utilisation que possible, sans surcharger les équipes de développement et de test.

L’émergence de normes de conception telles que Material Design et frameworks tel que Bootstrap, aide à établir des conceptions indépendantes de la plate-forme.

La structure réelle utilisée est généralement capable de traiter des périphériques de capacités différentes, tandis que l fournit une apparence homogène sur toutes les plates-formes, ce qui permet au développeur de se concentrer sur les fonctionnalités et les fonctions de l'application.

Si, par contre, vous préférez regarder le contenu distinct, vous pourrez pour ce faire, utilisez votre agent de maintenance.

JavaScript fournit un certain nombre de fonctions permettant de prendre des décisions en fonction de la plate-forme et des fonctionnalités disponibles. Par conséquent, vous pouvez utiliser votre code pour tester la plate-forme, puis appliquer une feuille de style en conséquence.

Par exemple, la méthode navigator.platform renvoie la plate-forme sur laquelle l'application s'exécute, navigator.userAgent renvoie le navigateur utilisé.

L'agent de navigation n'est pas fiable lorsqu'il s'agit de détecter le navigateur. Le code ci-dessous est donc une démonstration d'un concept plutôt qu'un code à utiliser dans un environnement en direct.

Navigator.platform est une méthode plus fiable, mais le nombre de plates-formes disponibles le rend difficile à utiliser dans notre exemple.

 / **
* Déterminez le système d'exploitation mobile.
* Cette fonction renvoie l’un des noms «iOS», «Android», «Windows Phone» ou «inconnu».
*
* @returns {String}
* /

fonction getMobileOperatingSystem ()
{
  var userAgent = navigator.userAgent || navigator.vendor || window.opera;
  // Windows Phone doit venir en premier car son UA ​​contient également "Android"
  if (/ windows phone / i.test (userAgent))
  {
    retourner "Windows Phone";
  }

  si (/android/i.test(userAgent))
  {
    retourner "Android";
  }

  if (/iPad|iPhone|iPod/.test(userAgent) &&! window.MSStream)
  {
    retourner "iOS";
  }

  retourner "inconnu";
  // retourne "Android" - on devrait soit gérer l'inconnu, soit le replier vers une plate-forme spécifique, disons Android
}

En utilisant la valeur de retour de getMobileOperatingSystem () ci-dessus, vous pouvez alors enregistrer un fichier CSS spécifique en conséquence.

À partir du code ci-dessus, nous pouvons voir que cette logique peut être très compliquée et difficile

Une autre option consiste à utiliser un schéma de couleurs plus simple, seul le CSS appliqué aux styles primaires correspondant au système d'exploitation sous-jacent, bien que cela puisse

PWA Frameworks

En apprenant à développer une PWA, il est bon de tout créer manuellement: c'est un excellent moyen d’apprendre tous les concepts de base de la construction progressive. applications web.

Une fois que vous vous êtes familiarisé avec tous les aspects importants, vous pouvez commencer à utiliser quelques outils pour vous aider, augmentant ainsi votre efficacité de développement.

Comme pour la plupart des scénarios de développement, framewor ks sont disponibles pour rendre le développement des PWA plus rapide et plus efficace.

Chacune de ces infrastructures utilise des techniques CSS spécifiques pour garantir que le processus de développement est maintenable, évolutif et répond aux besoins du développeur et de l'utilisateur final. En utilisant de tels frameworks, vous pouvez vous assurer que votre PWA fonctionne parfaitement sur la plupart des périphériques et plates-formes, car les frameworks ont généralement des capacités multi-plateformes, bien qu'ils puissent offrir une compatibilité ascendante limitée. Ceci est une autre de ces décisions que vous devrez prendre lorsque vous déciderez de ce que vous utiliserez pour développer votre application Web progressive. En utilisant des frameworks, vous cédez une partie du contrôle que vous auriez si vous écriviez tout à partir de rien.

Ci-dessous, nous suggérerons un certain nombre de frameworks / outils pouvant être utilisés pour faciliter le développement de PWA.

conseils, cependant: les frameworks ajoutent beaucoup de temps en termes de performances.

Nous vous recommandons de n'utiliser ces ressources qu'au démarrage, en choisissant éventuellement de ne pas les utiliser et en optant pour des feuilles de style minimalistes, en utilisant une plateforme indépendante conception

1. Create React App

React a tous les composants en place pour permettre le développement d'un PWA, en utilisant ces bibliothèques Create React App .

Ceci est un excellent exemple de création d'un React PWA avec cette bibliothèque .

2. Angular

Étant donné qu'Angular est un produit de Google et que nous avons vu l'entreprise pousser vers les PWA, il n'est pas surprenant qu'Angular supporte entièrement les PWA.

Si vous avez l'habitude de travailler avec Angular, vous pouvez envisager de l'utiliser comme cadre de votre choix.

Angular 2+ prend en charge l'implémentation de fonctionnalités PWA (telles que les fichiers de maintenance et les fichiers manifeste) via la structure en utilisant les commandes suivantes:

 ng add @ angular / pwa --project nom_projet

Ceci est un excellent article qui vous guide dans la création d'une PWA avec Angular .

Ionic

Ionic est un autre cadre pour les PWA. Le cadre

• tire parti d’Angular pour permettre la création d’applications natives à l’aide des technologies Web
• utilise Cordova pour exécuter l’application sur des appareils tels que le téléphone
• . un cadre premium qui inclut un certain nombre de fonctionnalités orientées équipe et destinées aux développeurs, telles que le prototypage rapide, pour accélérer le développement.

  PWA et performance

  L'un des principes fondamentaux des applications Web progressives reste celui d'un processus rapide et engageant. expérience utilisateur

  Pour cette raison, lorsque l'on considère le CSS, il faut s'assurer de garder les choses aussi simples et minimalistes que possible.

  C'est l'un des aspects où les frameworks commencent à souffrir. Ils ajoutent des ressources CSS supplémentaires que vous n'utilisez pas, ce qui peut réduire les performances des PWA.

  Un certain nombre de considérations que vous pouvez garder à l'esprit:

  • utilise HTTP / 2 sur votre serveur
  • pour utiliser des indices tels que rel = preload pour permettre une récupération précoce des CSS critiques et autres Les ressources
  • utilisent le NetworkInformationAPI et une implémentation de mise en cache pour accéder aux ressources mises en cache plutôt que de les télécharger
  • directement dans le document HTML pour optimiser les performances.
  • conserve des ressources aussi légères et minces que possible
  • réduisez toutes vos ressources CSS et implémentez d'autres optimisations telles que la compression des ressources, l'optimisation des images et l'utilisation de formats d'image et de vidéo optimisés.

  performance a d'autres détails à garder à l'esprit.

  Google Lighthouse

  En parlant de performance, le Google Lighthouse est un outil de surveillance des performances centré spécifiquement sur incre performance d'exécution, des sites Web et des applications Web progressives.

  

  Lighthouse qui était un plugin pour Chrome, est aujourd'hui intégré au Chrome Developer outils. Il peut être utilisé pour exécuter des tests sur l'application Web progressive. Le test génère un rapport qui a beaucoup de détails pour vous aider à garder votre développement dans les paramètres de performance d'une PWA.

  Wrapping Up

  L'utilisation de CSS et de PWA présente quelques différences avec CSS pour développer votre application Web ou site web (notamment en termes de performance et de réactivité). Cependant, la plupart des techniques pouvant être utilisées avec le développement Web peuvent être adoptées de manière appropriée pour le développement d'applications Web progressives. Que vous utilisiez des frameworks ou que vous construisiez tout à partir de zéro, pesez les avantages contre les inconvénients, prenez une décision éclairée et respectez-la.

  
  

  David est un concepteur Web curieux qui partage fréquemment ses astuces Rayonnage collectif . Lorsqu'il ne parle pas de design web, quelque chose qu'il a connu au cours des 12 dernières années, il rêve généralement de sa prochaine grande réussite.