Quelles technologies utilisent les Progressive Web Apps ? Le détail complet de GoodBarber

Service worker

Les Service Workers sont un élément clé des PWA. Un Service Worker est un script qui s'exécute en arrière plan dans le navigateur. Il se positionne entre la PWA et le serveur. En fonction de la disponibilité du réseau, le Service Worker, agissant tel un proxy, va servir des éléments depuis son cache ou bien les récupérer via le réseau sur le serveur. Les Service Workers rendent possible l'utilisation de la PWA en mode hors-ligne. Parmi d'autres tâches qu'ils accomplissent, les Service Worker sont aussi un rouage essentiel pour la réception des notifications push dans votre PWA.

Notifications push pour le web:
Firebase and APNs

Votre PWA peut recevoir des notifications push. Cette fonctionnalité est prise en charge par la majorité des navigateurs Web récents. Pour Chrome, Firefox et Opera, les notifications push sont fournies par Firebase, la plate-forme de Google. Pour Safari, les notifications sont fournies par APNs, la plate-forme d'Apple.

Prise en charge des navigateurs

Votre PWA est adaptative. Elle offrira toujours la meilleure expérience possible compte tenu des capacités du navigateur sur lequel elle s'exécute. Plus le navigateur est moderne, meilleure sera l'expérience

* Cette fonctionnalité sera bientôt disponible dans GoodBarber

** Disponible avec Chrome 68

** Statut fonctionnel de WebKit pour le manifeste Web App https://webkit.org/status/#specification-web-app-manifest

* Cette fonctionnalité sera bientôt disponible dans GoodBarber

Ce tableau est maintenu à jour par GoodBarber sous une licence Creative Commons

Framework

Angular

Votre PWA est construite avec la dernière version stable d'Angular. Angular est un framework développé par Google. Il est particulièrement adapté pour créer des PWA. Il permet de créer des expériences utilisateur similaires aux applications natives, mais dans le navigateur Web : haute performance, fonctionnement hors ligne, sans barrière à l'installation. Votre PWA est conçue pour exécuter un code hautement optimisé pour les machines virtuelles Javascript actuelles. En combinant la génération de page coté serveur (SSR) à des fins de référencement et la génération de page coté client (CSR) pour un affichage rapide, hors ligne et fluide, GoodBarber vous fournit une PWA isomorphique très complète.

Angular Material

Votre PWA fonctionne avec la dernière version du framework Angular Material UI. Toutes les interactions que vous construisez bénéficient d'un design moderne et unifié. L'interface est simple, homogène, et pensée pour fonctionner parfaitement sur mobile, tablette et ordinateur de bureau. Material Design est un language visuel inventé par Google.

HTTP/2

Votre PWA est servie en HTTP/2. La dernière et puissante version du protocole http. HTTP/2 permet la compression des en-têtes, une gestion intelligente pour la diffusion des paquets, la priorisation et la parallélisation des requêtes. Cela accélère le téléchargement des pages et réduit la latence.

Le futur des apps

App Shell

L'App Shell est le squelette de votre PWA. Il contient les éléments principaux d'interface et les composants strictement nécessaires pour afficher l'application dans le navigateur. L'App Shell conserve les éléments d'interface localement, tandis que les contenus sont récupérés dynamiquement depuis une API. Grâce à l'App Shell, notamment dans le cas des visites récurrentes, votre PWA s'affiche vite, consomme le moins de bande passante possible, charge les ressources statiques depuis son cache local, et sépare le contenu de la navigation.

PWA isomorphique

Votre PWA execute du code Javascript à la fois coté serveur et coté client. La première requête du navigateur est exécutée coté serveur. C'est ce qu'on appelle du Server Side Rendering (SSR), mais la PWA effectue également des calculs dans le navigateur. C'est ce qu'on appelle le Client Side Rendering (CSR). Le SSR est excellent pour le référencement car il permet aux robots des moteurs de recherche d'indexer une page construite entièrement. Le CSR permet à l'app de fonctionner hors-ligne car tout le Javascript de la PWA est téléchargé en arrière plan et stocké en cache.

Gestion du cache local par Header API

Votre PWA télécharge les ressources depuis le réseau uniquement lorsque cela est nécessaire. Nous avons développé une API dédiée pour gérer les réponses d'en-tête. Un en-tête personnalisé récupère la dernière date de modification des fichiers. Cette information est obtenue avec un ping de 45 octets (la taille a été divisée par 1000) avant de demander de nouveaux fichiers. S'il n'est pas nécessaire de retransmettre les ressources demandées, une réponse HTTP 304 est envoyée par le serveur et la PWA utilise son cache local.

Modèle PRPL

Votre PWA est construite d'après le modèle PRPL. Ce modèle est utilisé pour offrir une expérience Web mobile plus rapide. Il permet de résoudre les problèmes liés à une couverture réseau incertaine, ou à des téléphones mobiles peu puissants, en tirant parti des technologies web les plus modernes pour toujours offrir une bonne expérience utilisateur. PRPL signifie : Pousser les ressources critiques pour l'affichage initial / Réaliser l'affichage initial / Pré-cacher les affichages secondaires / "Lazy-load" et créer les affichages restants à la demande. Grâce à ce modèle, le coût de la première interaction avec votre PWA est minimal. Au fur et à mesure que l'utilisateur continue de naviguer, les ressources sont intelligemment mises en cache, ce qui confère à votre PWA une expérience utilisateur de première classe.

Vitesse

Compresseur d'image optimisé

Afin de minimiser la consommation de bande passante et de réduire le temps de chargement, nos ingénieurs ont développé un algorithme dédié pour gérer la compression des images. Chaque fois que vous téléchargez une image, plusieurs copies de différentes tailles sont créées. Chaque copie est compressée avec notre algorithme qui a été codé pour minimiser la perte de qualité. Les copies sont ensuite utilisées pour fournir une image qui n'est jamais plus grande que la version affichée sur l'écran de l'utilisateur. Ce mode opératoire permet d'améliorer la qualité de votre PWA et reste conforme aux recommandations de Google Lighthouse, en chargeant les images rapidement et en consommant moins de données cellulaires.

ORIGINAL

COMPRESSED

CDN

Chaque ressource statique de votre PWA (code Javascript et images) est distribuée sur un réseau de diffusion de contenu (CDN) en utilisant le protocole HTTP/2. Partout dans le monde, votre PWA s'affiche rapidement car les ressources sont situées à proximité de tous vos utilisateurs finaux. Nous nous appuyons sur le réseau mondial de Stack Path. Les ressources sont hébergées dans des Datacenter haut de gamme disposant de connexions 10 Go/s à Internet, répartis sur 18 sites dans le monde entier.

Gestion asynchrone des polices

Dans votre PWA, les polices sont chargées de manière asynchrone pour augmenter la vitesse de chargement des pages. Sachant que les polices sont des fichiers qui bloquent l'affichage lors de la création d'une page Web s'ils sont absents, nous utilisons les polices par défaut de l'appareil lors de la première interaction de l'utilisateur avec l'application. En arrière-plan, le PWA charge les polices manquantes et les utilise lorsqu'elles sont téléchargées complètement. Pendant ce temps, l'utilisateur a pu accéder au contenu en un rien de temps.

Référencement

URL Slugs

Le lien hypertexte est l'élement fondamental pour la distribution de votre PWA. Le Slug est l'URL exacte d'une page Web. Vous pouvez personnaliser chaque Slug de votre PWA, pour rendre l'URL des pages importantes SEO friendly. Étant donné que chaque page de votre PWA a un Slug dédié, un lien profond vers une page interne de votre PWA est facile à faire.

HTTPS

Les Service Workers peuvent effectuer des opérations très puissantes depuis le navigateur de l'utilisateur. Pour s'assurer que ce pouvoir est utilisé à bon escient, l'installation d'un service worker n'est possible que si la page web est servie en https. Par défaut, toutes les pages de votre PWA sont servies en https. Cela garantit que l'installation du service worker n'a pas été altéré par un tiers. C'est également un facteur positif pour le référencement de vos pages.

Manifest.json

Votre PWA est décrite dans un fichier JSON appelé le manifeste (Web App Manifest). Il contient les méta-informations nécessaires à l'indexation de votre app dans un Store comme le Windows Store, ou à l'installation de votre app sur l'écran d'accueil de votre utilisateur. Le Web App Manifest est une spécification établie par le W3C.