Aller audelà des bases

À propos de l'auteur

Gert Svaiko est un rédacteur professionnel et travaille principalement avec des sociétés de marketing numérique aux États-Unis et dans l'UE.
En savoir plus sur
Gert
…

Les applications Web progressives (PWA) gagnent toujours en popularité en 2020. Ce n'est pas une surprise , considérant les avantages des taux de conversion plus élevés, de l'engagement des clients, de la vitesse de chargement des pages réduite et des coûts de développement et des frais généraux réduits.

Nous pouvons voir des entreprises respectées jouissant également du succès avec leurs PWA ]comme Twitter, Uber, Tinder, Pinterest et Forbes. Et ils se vantent tous des avantages énormes de la mise en œuvre des applications progressives.

La bonne nouvelle est que le développement d'une PWA n'est pas quelque chose que seules les entreprises à gros budget peuvent se permettre. Ces applications sont aussi utiles que les petites et moyennes entreprises et ne sont pas si compliquées à créer.

Vous pouvez trouver un Guide du débutant complet des applications Web progressives sur Smashing Magazine qui se concentre sur la création du noyau des PWA.

] Cependant, allons plus loin et apprenons à déployer des qualités modernes sur les PWA, telles que les fonctionnalités hors ligne, l'optimisation basée sur le réseau, l'expérience utilisateur multi-appareils, les capacités de référencement et les notifications et demandes non intrusives. Vous trouverez également des exemples de code ou des références à des guides plus spécifiques afin que vous puissiez implémenter ces conseils dans votre PWA.

Présentation rapide des applications Web progressives (PWA)

Ne sautons pas les bases et passons rapidement au cœur

Qu'est-ce qu'une PWA?

«Les Progressive Web Apps (PWA) sont conçues et améliorées avec des API modernes pour offrir des capacités, une fiabilité et une installabilité améliorées tout en atteignant n'importe qui, n'importe où, sur n'importe quel appareil avec une seule base de code . ”

– Les développeurs de Google

En d'autres termes, les PWA sont des sites Web que les utilisateurs peuvent utiliser en tant qu'applications autonomes. Elles diffèrent des applications natives principalement parce que les PWA ne nécessitent pas d'installation et peuvent être utilisées avec divers appareils – les applications natives sont principalement conçues pour les appareils mobiles.

Comment fonctionnent les PWA?

Le cœur d'un PWA se compose de trois composants: un manifeste d'application Web, des techniciens de service et un shell d'application. Vous pouvez trouver des instructions détaillées pour les construire dans le guide du débutant mentionné ci-dessus.

Voici ce que font ces composants.

Manifeste de l'application Web

Le manifeste de l'application Web est au cœur de la création d'un site Web s'exécuter en tant qu'application autonome en mode plein écran. Vous pouvez définir l'apparence de la PWA, l'optimiser pour différents périphériques et attribuer une icône qui s'affiche après l'installation de l'application.

Service Workers

Les techniciens de service activent l'utilisation hors ligne de la PWA en récupérant les données mises en cache ou en informant le l'utilisateur à propos de l'absence de connexion Internet. Les techniciens de service récupèrent également les dernières données une fois la connexion au serveur rétablie.

Architecture du shell d'application

Le shell de l'application est ce que les utilisateurs voient lorsqu'ils accèdent à une PWA. Il s'agit du minimum HTML, CSS et JavaScript requis pour alimenter l'interface utilisateur. Lors du développement d'une PWA, vous pouvez mettre en cache les ressources et les actifs du shell de l'application dans le navigateur.

Déploiement de caractéristiques modernes sur votre PWA

En plus des fonctionnalités de base, les PWA modernes adoptent des caractéristiques supplémentaires qui poussent davantage leurs utilisateurs vers une expérience utilisateur extraordinaire.

Examinons quelques caractéristiques modernes spécifiques d'une PWA et apprenons comment les ajouter à votre PWA. Les qualités suivantes sont considérées comme de grands ajouts à la PWA de base par développeurs Google .

L'application fonctionne hors ligne comme elle le fait en ligne

Lors de la création de votre PWA, vous pouvez également développer une page hors ligne personnalisée dans le cadre du noyau. Cependant, il est bien plus convivial si votre PWA continue de fonctionner même sans connexion Internet – jusqu'à un certain point où la connexion devient nécessaire. Sinon, l'expérience utilisateur pourrait être aussi frustrante que l'épreuve d'Ankita Masand avec la commande d'un gâteau, comme elle le décrit dans son article sur les points faibles des PWA .

Vous pouvez obtenir une expérience utilisateur plus significative en utilisant la mise en cache le contenu, la synchronisation en arrière-plan et les écrans squelettes. Examinons chacun d'eux.

Contenu mis en cache avec IndexedDB

IndexedDB est un système de stockage NoSQL intégré au navigateur que vous pouvez utiliser pour mettre en cache et récupérer les données nécessaires pour créer votre PWA fonctionne hors ligne.

Cependant, tous les navigateurs ne prennent pas en charge IndexedDB donc la première chose à faire est de vérifier si le navigateur de l'utilisateur le prend en charge.

 if (! ('indexedDB' in la fenêtre)) {
  console.log ('Ce navigateur ne prend pas en charge IndexedDB');
  revenir;
} 

Après cela, vous pouvez créer du contenu mis en cache avec l'API IndexedDB. Voici un exemple de développeurs Google d'ouverture d'une base de données, d'ajout d'un magasin d'objets et d'ajout d'un élément à ce magasin.

 var db;

var openRequest = indexedDB.open ('test_db', 1);

openRequest.onupgradeneeded = fonction (e) {
  var db = e.target.result;
  console.log ('running onupgradeneeded');
  if (! db.objectStoreNames.contains ('store')) {
    var storeOS = db.createObjectStore ('stocker',
      {keyPath: 'nom'});
  }
};
openRequest.onsuccess = fonction (e) {
  console.log ('running onsuccess');
  db = e.target.result;
  ajouter un item();
};
openRequest.onerror = fonction (e) {
  console.log ('onerror!');
  console.dir (e);
};

function addItem () {
  var transaction = db.transaction (['store']'readwrite');
  var store = transaction.objectStore ('store');
  var item = {
    nom: 'banane',
    prix: '2,99 $',
    description: 'C'est une banane violette!',
    créé: nouvelle Date (). getTime ()
  };

 var request = store.add (élément);

 request.onerror = fonction (e) {
    console.log ('Erreur', e.target.error.name);
  };
  request.onsuccess = fonction (e) {
    console.log ('Woot! C'est fait');
  };
} 

Synchronisation en arrière-plan

Si votre PWA synchronise les données en arrière-plan, l'utilisateur peut effectuer des actions hors ligne, qui sont ensuite exécutées lorsque la connexion Internet est rétablie. Un exemple simple est une application de messagerie. Un utilisateur peut envoyer un message hors ligne sans avoir à attendre son envoi – la synchronisation en arrière-plan envoie automatiquement le message lorsque la connexion est rétablie.

Voici un exemple de développement d'une fonction de synchronisation en arrière-plan par Jake Archibald .

 // Enregistrez votre technicien de service:
navigator.serviceWorker.register ('/ sw.js');

// Puis plus tard, demandez une synchronisation unique:
navigator.serviceWorker.ready.then (function (swRegistration) {
  return swRegistration.sync.register ('myFirstSync');
}); 

Ensuite, écoutez l'événement dans /sw.js :

 self.addEventListener ('sync', function (event) {
  if (event.tag == 'myFirstSync') {
    event.waitUntil (doSomeStuff ());
  }
}); 

Écrans squelettes

L'un des principaux avantages de l'utilisation des écrans squelettes est que les utilisateurs perçoivent l'application fonctionner plutôt que rester inactive. Bien que l'utilisateur n'ait pas de connexion, l'écran squelette dessine l'interface sans contenu – qui se remplit ensuite une fois la connexion rétablie.

Code My UI a d'excellents extraits de code disponibles que vous pouvez utiliser pour créer un écran squelette pour votre PWA.

Optimisation en fonction de l'utilisation du réseau

L'un des principaux avantages d'un PWA est qu'il offre une expérience plus rapide aux utilisateurs. Vous pouvez optimiser davantage la vitesse de chargement en demandant à la PWA d'utiliser la mise en réseau du cache en premier, en hiérarchisant les ressources et en utilisant le chargement adaptatif en fonction de la qualité du réseau.

Voyons comment vous pouvez les développer sur votre PWA.

Cache d'abord, puis network

Utiliser d'abord le contenu mis en cache permet à votre PWA de fonctionner hors ligne et ouvre la voie aux utilisateurs pour accéder au contenu même sur des zones de faible couverture réseau. Vous pouvez le faire en créant un service worker pour mettre en cache le contenu, puis en le récupérant.

Voici un exemple de Jeff Posnick sur la mise en cache HTML statique à l'aide de service workers.

 self.addEventListener ('fetch ', événement => {
  if (event.request.mode === 'naviguer') {
    // Voir / web / fundamentals / getting-started / primers / async-functions
    // pour une amorce async / await.
    event.respondWith (fonction asynchrone () {
      // Facultatif: normalisez l'URL entrante en supprimant les paramètres de requête.
      // Au lieu de https://example.com/page?key=value,
      // utilisez https://example.com/page lors de la lecture et de l'écriture dans le cache.
      // Pour les documents HTML statiques, il est peu probable que vos paramètres de requête
      // affecte le HTML renvoyé. Mais si vous utilisez des paramètres de requête
      // déterminer de manière unique votre HTML, modifier ce code pour le conserver.
      const normalizedUrl = nouvelle URL (event.request.url);
      normalizedUrl.search = '';

      // Créer des promesses pour la réponse du réseau,
      // et une copie de la réponse qui peut être utilisée dans le cache.
      const fetchResponseP = fetch (normalizedUrl);
      const fetchResponseCloneP = fetchResponseP.then (r => r.clone ());

      // event.waitUntil () garantit que le service worker est maintenu en vie
      // assez longtemps pour terminer la mise à jour du cache.
      event.waitUntil (fonction asynchrone () {
        const cache = wait caches.open ('mon-nom-de-cache');
        attendre cache.put (normalizedUrl, attendre fetchResponseCloneP);
      } ());

      // Préfère la réponse mise en cache, revenant à la réponse d'extraction.
      return (attendre caches.match (normalizedUrl)) || fetchResponseP;
    } ());
  }
}); 

Priorisation des ressources

Par défaut, les PWA ont de meilleures performances par rapport aux applications natives similaires en raison de leur nature allégée. De plus, comme les PWA utilisent le cache du navigateur, il est possible d’indiquer quelles ressources sont prioritaires et doivent être rendues avant même qu’elles ne soient utilisées. Cela fonctionne principalement avec des éléments statiques car le contenu dynamique doit être mis à jour avant d'être récupéré.

Vous pouvez spécifier la priorité des éléments en utilisant la chaîne dans le HTML. Vous pouvez également spécifier des fichiers de serveur tiers en utilisant rel = ”preconnect” et rel = ”dns-prefetch.”

Maximiliano Firtman en donne un exemple simple en priorisant Polices Web dans le moteur du navigateur:

Implémentation du chargement adaptatif

Les vitesses Internet du WiFi et de la 4G ne sont pas accessibles partout, et les utilisateurs continuent à accéder à Internet avec des connexions 2G et 3G. Puisque vous voulez que votre PWA soit accessible par autant de personnes que possible, vous pouvez l'optimiser pour fonctionner également à des vitesses Internet inférieures.

Vous pouvez y parvenir en implémentant un chargement adaptatif, qui charge les éléments PWA en fonction de la type de connexion dont dispose l'utilisateur.

Le moyen le plus simple est d'utiliser l'outil Google Workbox qui comprend de nombreux plugins prêts à l'emploi pour les stratégies de mise en cache.

Supposons que vous souhaitiez définir un stratégie de mise en cache personnalisée. Voici comment vous pouvez le faire en tant qu'exemple de Demian Renzulli et Jeff Posnick:

 const adaptiveLoadingPlugin = {
  requestWillFetch: async ({request}) => {
    const urlParts = request.url.split ('/');
    laissez imageQuality;

    interrupteur (
      navigateur && navigateur.connection
        ? navigator.connection.effectiveType
        : ''
    ) {
      // ...
      cas '3g':
        imageQuality = 'q_30';
        Pause;
      // ...
    }

    const newUrl = urlParts
      .splice (urlParts.length - 1, 0, imageQuality)
      .joindre('/')
      .replace ('. jpg', '.png');
    const newRequest = new Request (newUrl.href, {headers: request.headers});

    return newRequest;
  },
}; 

Ensuite, transmettez le plugin à une stratégie cacheFirst contenant une expression régulière correspondant aux URL d'image (par exemple / img / ):

 workbox.routing.registerRoute (
  nouveau RegExp ('/ img /'),
  workbox.strategies.cacheFirst ({
    cacheName: 'images',
    plugins: [
      adaptiveLoadingPlugin,
      workbox.expiration.Plugin({
        maxEntries: 50,
        purgeOnQuotaError: true,
      }),
    ],
  }),
); 

Excellente expérience utilisateur sur toutes les plates-formes

Un excellent PWA fonctionne de manière transparente sur les navigateurs, les mobiles et les tablettes. Bien que l'utilisation d'un appareil Android soit le moyen le plus populaire (avec une part de marché de 38,9%) d'accéder à Internet, l'optimisation de votre application pour toutes les plates-formes fait partie du développement des fonctions de base des PWA .

Vous pouvez prendre d'autres mesures pour augmenter la convivialité et offrir une excellente expérience utilisateur, comme réduire la nervosité lorsque votre PWA se charge et vous assurer que votre PWA fonctionne avec n'importe quelle méthode d'entrée.

Voici comment vous pouvez aborder chacun de ces aspects.

Réduction du chargement de contenu «instable»

Même avec Internet à haut débit, le contenu du site peut changer pendant le chargement parce que les éléments du site se chargent dans l'ordre. Cet effet est encore pire avec des vitesses de connexion plus lentes et nuit gravement à l'expérience de l'utilisateur.

Les éléments les plus courants provoquant le déplacement du contenu lors du chargement sont des images, car elles sont généralement plus grandes et ne constituent pas une priorité lors du chargement du contenu. Vous pouvez résoudre ce problème avec le «chargement paresseux» en utilisant des images d'espace réservé plus petites que vous pouvez prioriser après le rendu de la structure HTML.

Voici un exemple des développeurs de Mozilla sur la façon d'ajouter une image légère qui est chargé en premier avant l'image réelle en JavaScript:

Le fichier app.js traite les attributs data-src comme suit:

 let imagesToLoad = document. querySelectorAll ('img [data-src]');
const loadImages = (image) => {
  image.setAttribute ('src', image.getAttribute ('données-src'));
  image.onload = () => {
    image.removeAttribute ('data-src');
  };
}; 

Et puis créez une boucle:

 imagesToLoad.forEach ((img) => {
  loadImages (img);
}); 

Vous pouvez également consulter un guide détaillé sur Smashing Magazine sur la réduction du saut de contenu avec d'autres éléments.

PWA fonctionne avec n'importe quelle méthode d'entrée

Nous avons expliqué comment les PWA devraient travailler avec une variété d'appareils différents. Pour aller plus loin, vous devez également prendre en compte les autres méthodes de saisie que les utilisateurs peuvent utiliser sur ces appareils, telles que le toucher, la souris et le stylet.

L'ajout de l'API Pointer Events à votre PWA résout principalement cette question. Voici comment vous pouvez l'aborder selon les développeurs de Google.

Tout d'abord, vérifiez si le navigateur prend en charge les événements de pointeur:

 if (window.PointerEvent) {
  // Ouais, nous pouvons utiliser des événements de pointeur!
} autre {
  // Retour aux événements souris et tactiles, je suppose.
} 

Ensuite, vous pouvez définir les actions que différentes méthodes de saisie peuvent effectuer:

 switch (ev.pointerType) {
  cas 'souris':
    // Ne fais rien.
    Pause;
  cas 'touch':
    // Autorise le mouvement de glissement.
    Pause;
  étui 'stylo':
    // Autorise également le mouvement de glissement.
    Pause;
  défaut:
    // Obtenir une chaîne vide signifie que le navigateur ne sait pas
    // de quel type d'appareil il s'agit. Supposons la souris et ne faisons rien.
    Pause;
} 

Étant donné que la plupart des navigateurs ont déjà des fonctionnalités tactiles, vous n'avez rien d'autre à ajouter.

Découvrable via la recherche

L'un des principaux avantages des PWA par rapport à une application native est que la PWA est un site Web par la nature et les moteurs de recherche peuvent les indexer. Cela vous permet de déployer des stratégies de référencement pour rendre votre contenu PWA plus découvrable.

Vous pouvez commencer par vous assurer que chaque URL de votre PWA a un titre descriptif et une méta-description uniques, qui constituent la base de toute activité d'optimisation SEO. [19659006] Examinons quelques autres mesures que vous pouvez prendre pour rendre votre PWA consultable.

Analysez la trouvabilité de votre PWA

Google a un excellent outil dans sa Search Console qui analyse votre site (PWA ) et rend compte des résultats. Vous pouvez l'utiliser pour lancer une analyse de base de votre site et découvrir les points faibles que vous pouvez ensuite commencer à corriger.

Vous pouvez également utiliser Lighthouse dans le navigateur Chrome pour exécuter un audit SEO.

Tout d'abord, accédez à l'URL cible. Appuyez ensuite sur Ctrl + Maj + J (ou Commande + Option + J sur Mac) pour ouvrir le menu des outils du développeur. Choisissez l'onglet Phare, cochez la case de la catégorie SEO et générez le rapport.

Utiliser des données structurées

Le moteur de recherche de Google utilise des données structurées pour comprendre l'objectif du contenu de votre page Web.

Les données structurées sont un format normalisé permettant de fournir des informations sur une page et classer le contenu de la page; par exemple, sur une page de recette, quels sont les ingrédients, le temps et la température de cuisson, les calories, etc.
– Google

Avant de commencer à coder, Google a également dressé une liste utile des erreurs de données structurées courantes et des directives pertinentes pour les corriger. L'étude de ce matériel devrait vous donner une bonne base de ce qu'il faut éviter.

Frederick O'Brien a écrit un excellent guide sur Smashing Magazine, Baking Structured Data Into The Design Process qui décrit comment construire

Notifications et demandes d'autorisation conviviales

Enfin et surtout, vous pouvez augmenter l'expérience utilisateur en optimisant les notifications et les demandes d'autorisation, afin qu'elles servent vos utilisateurs – au lieu d'être simplement déroutantes et ennuyeux.

Bien que vous puissiez généralement vous fier au bon sens, il existe des astuces pratiques que vous pouvez également mettre en œuvre, telles que la création de notifications push non intrusives et la possibilité pour l'utilisateur de se désabonner des messages.

Demandes d'autorisation subtiles pour la communication

Il existe deux façons modernes d'automatiser la communication entre un site Web et un utilisateur: les chatbots et les notifications.

Dans un contexte de PWA, le principal avantage d'un chatbot est qu'il ne nécessite pas l'autorisation de l'utilisateur pour interagir avec l'utilisateur. Cependant, selon l'application de chatbot que vous utilisez, l'utilisateur peut manquer le message subtil. Les notifications, en revanche, nécessitent l'autorisation de l'utilisateur mais sont beaucoup plus visibles.

Puisque vous pouvez ajouter un chatbot en tant qu'application tierce distincte concentrons-nous sur la création d'une notification push conviviale . Si vous avez besoin d'un guide sur la création d'une notification push en premier lieu, en voici une excellente par Indrek Lasn.

Le moyen le plus simple de créer une demande d'autorisation non intrusive est d'utiliser une double demande. Cela signifie que vous incluez une interaction personnalisée avec votre site en plus de celle par défaut du système d'exploitation de l'utilisateur.

Matt Gaunt propose des illustrations parfaites pour cet effet avec les images suivantes.

Voici la valeur par défaut Demande d'autorisation de notification qui ne fournit aucun contexte:

Et voici l'interaction personnalisée ajoutée avant l'autorisation de notification par défaut décrite ci-dessus:

En ajoutant une alerte personnalisée avant celle par défaut du système d'exploitation, vous pouvez décrire plus clairement l'objectif de la notification à l'utilisateur. Cela augmente les chances que l'utilisateur accepte les notifications de votre site.

Permettre à l'utilisateur de se désinscrire des notifications

Pour un utilisateur, désactiver les notifications push d'un site est assez ennuyeux quel que soit l'appareil sur lequel il est en utilisant. Par conséquent, donner à l'utilisateur la possibilité de se désabonner des messages va très loin en termes d'expérience utilisateur.

Voici un exemple de Matt Gaunt sur la façon d'implémenter une fonction de désabonnement dans votre code et UI:

Tout d'abord, définissez l'écouteur de clic de pushButton :

 pushButton.addEventListener ('click', function () {
  pushButton.disabled = true;
  if (isSubscribe) {
    unsubscribeUser ();
  } autre {
    subscribeUser ();
  }
}); 

Ensuite, ajoutez une nouvelle fonction:

 function unsubscribeUser () {
  swRegistration.pushManager.getSubscription ()
  .then (fonction (abonnement) {
    if (abonnement) {
    // TODO: dire au serveur d'applications de supprimer l'abonnement
      return subscription.unsubscribe ();
    }
  })
  .catch (fonction (erreur) {
    console.log ('Erreur lors de la désinscription', erreur);
  })
  .then (fonction () {
    updateSubscriptionOnServer (null);

    console.log ('L'utilisateur est désabonné.');
    isSubscribe = faux;

    updateBtn ();
  });
} 

Voici à quoi cela ressemble dans la console après avoir implémenté avec succès le bouton d'inscription pour désactiver les notifications si l'utilisateur le souhaite.

Conclusion

Les PWA peuvent être très puissants pour augmenter le trafic de votre site et améliorer l'expérience utilisateur. Pour optimiser davantage votre PWA, vous pouvez utiliser ces solutions modernes décrites dans cet article pour améliorer les performances et les fonctionnalités.

Vous n'avez pas non plus besoin de tout implémenter en même temps. N'hésitez pas à choisir les options les plus pertinentes, car chacune de ces suggestions vous aide à développer votre PWA.

Autres ressources

(ra, yk, il)