CSS et PWAS: quelques conseils pour créer des applications Web progressives

Applications Web progressives (PWAS): une plongée profonde dans le CSS et le développement

Le paysage en ligne a considérablement changé avec la montée en puissance des appareils mobiles. Les sites Web sont passés de versions uniques aux variations de bureau / mobile, des conceptions réactives et enfin des applications mobiles natives. La dernière itération est l'application Web progressive (PWA), visant à mélanger les meilleures expériences d'applications Web et natives. Cet article explore les techniques CSS cruciales pour le développement de PWA.

Concepts clés:

• PWAS combinent la fiabilité, la vitesse et l'expérience engageante des applications natives avec l'accessibilité du Web, éliminant le besoin de téléchargements d'App Store.
• Le développement PWA ressemble à un développement standard d'applications Web mais nécessite un fichier manifest.json (contrôler l'apparence PWA), un travailleur de service (permettant des fonctionnalités hors ligne) et une gestion minutieuse des actifs du site, y compris CSS.
• Les considérations CSS cruciales incluent l'adhésion à l'interface utilisateur spécifique à la plate-forme, la conception des capacités de périphérique et la mise en œuvre de dégradation gracieuse / amélioration progressive. Une conception maigre et minimaliste est essentielle pour des performances optimales.
Les frameworks
• comme Create React App, Angular et Ionic Simplify Pwa Development mais peuvent avoir un impact sur les performances; Considérez soigneusement leur utilisation.
• Les outils de surveillance des performances comme Google Lighthouse sont inestimables pour optimiser la vitesse et la réactivité PWA.

Comprendre PWAS:

Trois fonctionnalités PWA de base Addressent les lacunes typiques de l'application Web:

1. Fiabilité: PWA Chargez de manière fiable, imitant les applications natives même avec une mauvaise connectivité réseau, contrairement aux pages Web standard.
2. vitesse: Les performances PWA restent cohérentes quel que soit l'emplacement, la vitesse du réseau ou d'autres facteurs externes.
3. Engageant: PWA offrent une expérience immersive et plein écran similaire aux applications natives, sans installation d'App Store, et prennent souvent en charge les notifications push.

Google a défendu l'adoption de la PWA et sa popularité augmente rapidement. Comme Itai Sadan, PDG de Duda, l'a noté au CloudFest 2018: "Les applications Web progressistes représentent le prochain grand saut ... ils prennent les meilleurs aspects des applications natives ... et les incorporent dans des sites Web réactifs."

PWA Development Essentials:

Le développement de PWA est similaire au développement des applications Web standard, nécessitant des HTTP pour le déploiement (les tests locaux de Host sont acceptables). Les exigences clés comprennent:

1. Fichier manifeste (manifest.json): Ce fichier JSON contrôle l'apparence de PWA sur l'écran d'accueil de l'appareil, la définition du nom, des icônes, des couleurs, etc. CSS n'est pas directement impliquée ici; C'est une configuration purement. (Exemple indiqué ci-dessous)

   

2. Travailleur de service: Un fichier JavaScript exécutant indépendamment du navigateur, interceptant les demandes de réseau, les ressources de mise en cache et la gestion des notifications push. C'est le fondement de la capacité hors ligne. (Exemple d'extrait ci-dessous)

   <code class="language-javascript">self.addEventListener('install', function(e) {
   e.waitUntil(
     caches.open('airhorner').then(function(cache) {
       return cache.addAll([
         '/',
         '/index.html',
         '/index.html?homescreen=1',
         '/?homescreen=1',
         '/styles/main.css',
         '/scripts/main.min.js',
         '/sounds/airhorn.mp3'
       ]);
     })
   );
   });</code>

3. Les actifs du site (y compris CSS): Pendant l'installation des travailleurs de service, tous les actifs du site, y compris les fichiers CSS, JavaScript et multimédia, sont installés. C'est là que le style CSS prend effet.

Considérations CSS pour PWAS:

Plusieurs décisions clés ont un impact sur la mise en œuvre du CSS:

• UIS spécifiques à la plate-forme: Éviter les UIS spécifiques à la plate-forme empêche d'aliéner les utilisateurs et réduit la dépendance à l'égard des conceptions de plate-forme potentiellement modifiées. Une approche autochtone, tout en recherchant un comportement natif, est généralement recommandée.

• Capacités de l'appareil: Conception pour toutes les plates-formes, y compris les ordinateurs de bureau (Chrome prend déjà en charge les PWA de bureau). Utilisez CSS et les travailleurs de service pour adapter les fonctionnalités en fonction des ressources disponibles.

• Dégradation gracieuse et amélioration progressive: La dégradation gracieuse inhérente de CSS (ignorant les propriétés non soutenues) doit être complétée par une amélioration progressive. Testez la prise en charge de l'API avant d'utiliser des fonctionnalités telles que les travailleurs de service:

  <code class="language-javascript">if (!('serviceWorker' in navigator)) {
    console.log('Service Worker not supported');
    return;
  }</code>

• Suggestions générales: Équilibrez l'expérience utilisateur avec les ressources de développement. Utilisez des normes de conception (comme la conception de matériaux) et des frameworks (comme Bootstrap) pour les conceptions d'agnostiques de plate-forme. Le chargement CSS conditionnel basé sur la plate-forme (en utilisant navigator.platform ou navigator.userAgent, bien que ce dernier soit moins fiable) peut être utilisé mais ajoute de la complexité.

frameworks pwa:

Les cadres accélèrent le développement de PWA mais peuvent avoir un impact négatif sur les performances. Utilisez-les judicieusement, en particulier pendant les phases d'apprentissage initiales. Plus tard, efforcez-vous pour les feuilles de styles maigres et minimalistes et les conceptions d'agnostiques de plate-forme.

• Créer une application React: Fournit des composants React pour le développement PWA.

  

• Angular: Le framework de Google offre une prise en charge native PWA (ng add @angular/pwa).

  

• ionic: exploite la prise en charge des travailleurs / manifestants de service Angular, Cordova et intégrés pour le développement de PWA multiplateforme.

  

Optimisation des performances PWA:

Le maintien de la vitesse et de l'engagement est crucial. Gardez CSS maigre et minimaliste. Considérez:

• Http / 2 Server utilise
• rel=preload pour CSS critique
• NetworkInformationAPI et mise en cache
• inclinaison CSS critique
• Minimisation et optimisation des ressources

Google Lighthouse: Cet outil de surveillance des performances (intégré dans Chrome Devtools) génère des rapports détaillés pour aider à optimiser les performances PWA.

Conclusion:

Le développement de PWA avec CSS nécessite une attention particulière à la performance et à la réactivité. Bien que de nombreuses techniques de développement Web soient applicables, les décisions éclairées sur l'utilisation du cadre et l'optimisation CSS sont essentielles pour créer des expériences utilisateur très performantes et engageantes. N'oubliez pas de hiérarchiser une conception maigre et efficace.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!