Ce diaporama a bien été signalé.
Le téléchargement de votre SlideShare est en cours. ×

Refcard Progressive Web App (PWA)

Publicité
Publicité
Publicité
Publicité
Publicité
Publicité
Publicité
Publicité
Publicité
Publicité
Publicité
Publicité

Consultez-les par la suite

1 sur 17 Publicité

Refcard Progressive Web App (PWA)

Télécharger pour lire hors ligne

Si aujourd'hui, sur mobile, les "applications" sont assez éloignées des web apps, demain, avec l'évolution du web, il sera naturel d'installer les sites Internet que nous visitons en mode applicatif.

Cette RefCard a pour but de vous montrer comment les PWA permettent de réconcilier le monde du web et du mobile. Elle aborde de manière simple l'installation, l'usage de fonctionnalités mobiles et la gestion des indisponibilités réseaux dans le web.

Quelle stratégie de cache choisir en fonction de votre cas métier ? Comment vous y prendre ? Et surtout quelles erreurs éviter ? Vous trouverez les réponses à ces questions dans cette publication.

Si aujourd'hui, sur mobile, les "applications" sont assez éloignées des web apps, demain, avec l'évolution du web, il sera naturel d'installer les sites Internet que nous visitons en mode applicatif.

Cette RefCard a pour but de vous montrer comment les PWA permettent de réconcilier le monde du web et du mobile. Elle aborde de manière simple l'installation, l'usage de fonctionnalités mobiles et la gestion des indisponibilités réseaux dans le web.

Quelle stratégie de cache choisir en fonction de votre cas métier ? Comment vous y prendre ? Et surtout quelles erreurs éviter ? Vous trouverez les réponses à ces questions dans cette publication.

Publicité
Publicité

Plus De Contenu Connexe

Plus par OCTO Technology (20)

Plus récents (20)

Publicité

Refcard Progressive Web App (PWA)

  1. 1. THERE IS A BETTER WAY octo.com I blog.octo.com QUICK REFERENCE CARD p ur les Une PWA gouverner tou+ +es.
  2. 2.  UNE PWA - PO UR LES GOUVER NER TOUTES  TRIBU WEBF  OCTO TECHNOLOGY Une “Progressive Web App” ou PWA permet d'"augmenter" un site internet (ou application web) pour être utilisé comme une application. En mettant en place une PWA, on approche une expérience d’application native sur un site internet : L’application web est installable sur ordinateur, mobile et tablette (grâce au manifest). Elle apparaît alors dans la liste des applications installées. Elle est utilisable de manière fluide hors ligne ou en faible connexion (grâce à gestion du cache via le Service Worker). Elle profite des fonctionnalités natives des périphériques (API HTML5). Cela permet de développer et maintenir une base de code unique sans spécificité selon les plateformes (natives ou web). Les principes. C'est quoi une PWA? AUTHORS Powered with by Simon Belbeoch, Florian Lévy, Aghiles Ben Kaoudjt, Sophie Delronge WebF Tribe. S’INSTALLE COMME UNE APPLICATION NATIVE FONCTIONNE COMME UNE APPLICATION NATIVE A LE LOOKFEEL D’UNE APPLICATION NATIVE MAIS C’EST UN SITE WEB https://whatwebcando.today/ https://developer.chrome.com/origintrials/#/trials/active
  3. 3.  UNE PWA - PO UR LES GOUVER NER TOUTES  TRIBU WEBF  OCTO TECHNOLOGY Pourquoi faire une PWA? “one ring to rule them all” Du web standard rétrocompatible et pérenne Les Progressive Web App (PWA) utilisent les standards du web. Le site est construit avec les langages standard du web (HTML CSS, JS). Le protocole d’échange utilisé est le HTTPS. Le Service Worker (SW), technologie principale sur laquelle se reposent les PWA, est défini dans les standards W3C au même titre que les API HTML5. Ces standards garantissent la pérennité des applications dans le futur. Ils permettent aussi, pour les fonctionnalités partiellements supportées, d’assurer un usage minimal sur tout navigateur. Un développement unique Les PWA permettent de développer et maintenir une base de code unique : un seul développement suffit pour obtenir un site et les applications android, iphone, windows et macOS. Les PWA permettent un déploiement unique, sans le délai des stores. Utilisation de fonctionnalités natives En utilisant le HTML5, on accède aux fonctionnalités natives des appareils des utilisateurs. Une version toujours à jour Les utilisateurs disposent toujours de la dernière version car le Service Worker se met à jour en tâche de fond. La gestion de version se trouve ainsi simplifiée. Plus léger Le Service Worker fonctionne sur le moteur javascript du téléphone. Les fichiers sont donc plus légers et ne comportent que les scripts d'exécution. DISCLAIMER: Développer une PWA peut être simple, à condition de penser certains points en amont: Les appels en écriture différés (hors ligne) (POST/PUT/PATCH) doivent pouvoir être réconciliés par les API REST contactés par la PWA. Les stratégies de cache doivent être adaptées au besoin métier. Le SW n’a accès ni au DOM ni au local storage. Il ne peut modifier la page affichée. Le SW lance des requêtes navigateurs de fond non interceptables. Les fonctionnalités natives accessibles varient selon l’appareil (son système et sa version). Il ne faut pas activer le cache HTTP sur le service worker ou l’index, sous peine de rendre l’application impossible à mettre à jour. u n e p w a p o u r l e s g o u verner toutes une pwa pou r l e s g o u v e r n e r t o u t e s
  4. 4. Stratégies de cache dynamique au “runtime”. 1. Network first Le Service Worker va toujours effectuer une requête réseau . Il enregistre le retour dans un cache à chaque appel . Quand l’appel échoue à cause d’un problème réseau (client ou serveur hors ligne), le Service Worker répond avec le dernier contenu du cache . Ce cas est à privilégier si vous ne souhaitez pas investir beaucoup d’effort dans votre PWA. L’utilisateur en ligne verra les données à jour de l’API. Hors ligne, il verra les dernières données mises en cache. Utilisateur Service Worker Internet Cache En ligne, l’affichage ne s’effectue qu’une fois la requête terminée, ce qui peut conduire à une lenteur.  UNE PWA - PO UR LES GOUVER NER TOUTES  TRIBU WEBF  OCTO TECHNOLOGY
  5. 5. Stratégies de cache dynamique au “runtime”. 2. Cache first Le Service Worker retourne la donnée mise en cache . S’il ne la trouve pas , le Service Worker réalise l’appel réseau , met à jour son cache et renvoie la donnée. Ce cas doit servir pour les données ne changeant que très peu, ou dont la mise à jour n’est pas importante. Utilisateur Service Worker Internet Cache Cette stratégie ne remet jamais à jour la donnée.  UNE PWA - PO UR LES GOUVER NER TOUTES  TRIBU WEBF  OCTO TECHNOLOGY
  6. 6. Stratégies de cache dynamique au “runtime”. 3. Stale while revalidate Le Service Worker retourne directement la donnée mise en cache et envoie en parallèle une requête pour mettre à jour la donnée dans le cache . Elle permet d’afficher instantanément le résultat pour une expérience fluide tout en mettant à jour la donnée. Cette stratégie est préconisée pour s’approcher d’une expérience native. Cache Utilisateur Service Worker Internet La donnée ne sera à jour que lors de la requête suivante. Néanmoins, on peut mettre en place une stratégie d'événe- ments pour afficher la dernière donnée récupérée (par exemple grâce à workbox broadcast update).  UNE PWA - PO UR LES GOUVER NER TOUTES  TRIBU WEBF  OCTO TECHNOLOGY
  7. 7. Stratégies de cache dynamique au “runtime”. 4. Network only Le Service Worker va uniquement appeler le réseau . En mode hors ligne, les données ne s’afficheront pas. Ce cas doit être utilisé pour des données qui doivent impérativement être à jour. La stratégie n’annule pas le cache HTTP. Les parties du site qui utilisent cette stratégie ne seront pas fonctionnelles hors ligne. Utilisateur Service Worker Internet 5. Cache only Lorsqu’il intercepte la requête, le Service Worker ne fera pas d’appel réseau et renverra l’implémentation locale du cache. Il permet de bloquer un appel réseau pour le remplacer par une implémentation locale. S' il n'y a pas de données en cache, la requête échouera toujours (à utiliser avec précaution).  UNE PWA - PO UR LES GOUVER NER TOUTES  TRIBU WEBF  OCTO TECHNOLOGY
  8. 8. Service worker. Pour gouverner le chargement instantané Le Service Worker agit comme proxy entre l’application web et le réseau. Il permet la gestion du cache et est un des composants principaux des PWA. Il s’agit d’un script javascript qui va intercepter toutes les requêtes réseau réalisées par l’application web. Il traite les appels selon la stratégie de cache définie. Il restitue ou substitue ensuite la réponse à l’application web de manière transparente. Les SW sont définis dans les normes W3C comme un standard du web. Pour fonctionner, votre hébergement doit être accessible en HTTPS pour permettre l’activation du service worker. Différentes stratégies de cache standards existent.On les définit indépendamment pour chaque ressources. Il convient de définir la stratégie à appliquer selon les besoins (voir slide XX pour les stratégies de cache les plus utilisées en PWA).  UNE PWA - PO UR LES GOUVERNER TOUTES  TRIBU WEBF  OCT O T E CHNOLOGY
  9. 9. Manifest - Web manifest. Le manifest est le fichier plat de configuration qui permet l’installation et la personnalisation de l’application. Il spécifie toutes les informations (méta-données) d’usage hors navigateur concernant : l’installation les spécificités de fonctionnement l’affichage Les exemples suivants impactent la PWA installée : Name name et short_name désignent le nom de l’application qui sera installée. Icons icons permet de donner une liste d’icônes adaptées aux périphériques. Theme theme_color et background_color, personnalisent l’affichage de l’application. Display - Orientation display et orientation personnalisent l’affichage (fullscreen, standalone…) et l’orientation pour un affichage adapté au mobile. Pour gouverner tous les terminaux https://developer.mozilla.org/fr/docs/Web/Manifest Voir la documentation ici  UNE PWA - PO UR LES GOUVERNER TOUTES  TRIBU WEBF  OCT O T E CHNOLOGY
  10. 10. Background sync. Pour gouverner les pertes de réseau Le Background Sync sert à rejouer, en tâche de fond, les requêtes en échec à cause d’une perte de connexion. Présentation Les requêtes API d’écriture (POST, PUT, PATCH, DELETE) ne peuvent pas être mises en cache par le Service Worker. Le Background Sync intercepte ces requêtes lorsqu’elles sont en échec de connectivité, les enregistre dans une file d’attente et les rejoue dans l’ordre une fois la connectivité rétablie, même si l’application est fermée. Points d’attention La mise en place du Background Sync nécessite que la PWA gère les erreurs remontées par l’API de manière asynchrone (par exemple via des notifications natives ou des évènements). La requête dans la file d’attente est figée dans le temps. Les appels relancés par le Background Sync se feront sur la même URL et avec le même format de donnée qu’au moment de la première tentative. Il convient alors de correctement gérer le versioning de l’API. Enfin, n’oubliez pas de spécifier un temps maximum de rétention de vos requêtes.  UNE PWA - PO UR LES GOUVERNER TOUTES  TRIBU WEBF  OCT O T E CHNOLOGY
  11. 11. Background sync. Pour gouverner les pertes de réseau Pour garantir une expérience utilisateur optimale avec le Background Sync, il est nécessaire de simuler les retours API (hors connexion). Cela permet à l’utilisateur de continuer sa navigation, même sans réseau (ex : ajout d’un produit au panier). Les erreurs doivent alors pouvoir être affichées à posteriori sur d’autres pages (ex: plus de stock à la reprise réseau). Demandez bien à votre UX de penser “optimistic design”. Ils permettent d'obtenir une expérience optimale semblable à du natif. Ce choix implique une réflexion importante sur : le métier (ex: expiration panier ou concurrence d’accès) l’UX (User Expérience) le développement Si ces étapes sont respectées, l’application fonctionnera hors ligne, de manière fluide et sans temps d’attente. REQUÊTE DONNÉES carts/12/line-items carts/12/line-items { product: 12, quantity: 2 } { product: 42, quantity: 1 } Utilisateur Internet Internet Cache «post/put/patch/delete» Pile de requête (fifo)  UNE PWA - PO UR LES GOUVERNER TOUTES  TRIBU WEBF  OCT O T E CHNOLOGY
  12. 12. Cache statique et lifecycle. Pour gouverner les montées de version et être toujours à jour Utilisateur Cache Service Worker Internet Utilisateur «updateFound» «updated» Service Worker Internet Cache Téléchargement SW à jour Premier lancement de l'application Lancements suivants  UNE PWA - PO UR LES GOUVER NER TOUTES  TRIBU WEBF  OCTO TECHNOLOGY
  13. 13. Cache statique et lifecycle. Pour gouverner les montées de version et être toujours à jour Avec une configuration non adaptée, vos utilisateurs seront figés sur la première version du site qu’ils auront visité. Pour éviter cela : Prévoyez une solution d’invalidation de cache de votre SW. Désactivez, sur le serveur, le cache http du SW. Forcez la mise à jour du SW. workbox.core.skipWaiting(); workbox.core.clientsClaim(); Le Cache statique permet de mettre en cache les assets (images, scripts, pages html…). Ces ressources sont enregistrées puis servies en direct pour un rendu navigateur instantané. Quand un fichier est mis à jour sur le serveur, le précédent fichier connu du SW est rendu. Le SW le met ensuite à jour en tâche de fond. Les développeurs mobiles sont déjà habitués à avoir de multiples versions de leur “front” en ligne. Pour les déve- loppeurs web, cette question est nouvelle et demande plus d’attention. On peut configurer : Expiration : permet de limiter la durée du cache. La ressource cachée sera invalidée après le premier appel invalide de la ressource (il y aura donc un appel caché avant son invalidation). Max entries : permet de limiter le nombre d’objets mis en cache (par exemple en ne cachant que les 12 dernières images). Precaching : agit à l’installation du SW. Il permet notamment de cacher des ressources au démarrage de l’application ou de nettoyer le cache. Évènement updated : La mise à jour du SW ne met pas à jour l’affichage de l’application web. Pour afficher la dernière version, il faut rafraîchir la page, soit de manière automatique, soit en affichant un bandeau invitant l’utilisateur à rafraîchir la page.  UNE PWA - PO UR LES GOUVER NER TOUTES  TRIBU WEBF  OCTO TECHNOLOGY
  14. 14. Progressive Enhancement. Pour gouverner les fonctionnalités des smartphones Une PWA s’appuie sur les standards web (HTML, CSS, JS). Son fonctionnement minimal est donc assuré même sur de vieux navigateurs. Pour un usage universel, une PWA fonctionne sur le plus simple des terminaux. Pour améliorer son fonctionnement, on peut ajouter des fonctionnalités avancées qui sont activées selon la compatibilité du périphérique et du navigateur. Pour cela, on utilise l’API HTML5 (par exemple : appareil photo, NFC, GPS, USB, Bluetooth...). Pour découvrir les fonctionnalités avancées utilisables et leurs compatibilités avec un périphérique, il suffit de se rendre sur le site whatwebcando.today avec le périphérique souhaité. Le fonctionnement “progressif” du One Time Password par sms permet de toujours valider la possession du téléphone de l’utilisateur tout en améliorant son expérience sur des périphériques modernes via web-otp. Pour recevoir votre code, veuillez saisir votre numéro de téléphone (Par défaut) : L’utilisateur saisit le code reçu par sms sur son clavier L’utilisateur clique sur la suggestion autocomplétée dans son navigateur Validation automatique sans saisie utilisateur Waiting 1 implémentation, 3 niveaux de comportement selon le device : SMS OTP  UNE PWA - PO UR LES GOUVER NER TOUTES  TRIBU WEBF  OCTO TECHNOLOGY
  15. 15. Progressive Enhancement. Pour gouverner les fonctionnalités des smartphones Native first Natif différenciant (fonctionnalité, concurrence d’accès, expérience utilisateur) Impact Architecture, coût... Web extend ++ Extension plus poussée (appels GET, ressources POST sans concurrence d’accès) Web extend Installation et usage basique Code Front Service Worker Manifest et TWA Manifest Affichage Mobile Déploiement Store Mise en cache get api accueil Register SW Gestion cycle de vie Cache des assets static Affichage hors ligne Analytics hors ligne Dégradation gracieuse Adaptation selon device Full optimistic design Màj du contenu selon message cache Fonctionnalités HTML5 Pré-caching Push notification Modification hors ligne Cache dynamique à la navigation  UNE PWA - PO UR LES GOUVER NER TOUTES  TRIBU WEBF  OCTO TECHNOLOGY
  16. 16. Qui sommes-nous ? I IT Consulting I THERE IS A BETTER WAY octo.com I blog.octo.com IMPLANTATIONS 7OO 2 PRODUITS COLLABORATEURS 2 CONFÉRENCES FORMATION La conférence tech par OCTO 4 Paris Provence Toulouse Haut-de-France OCTO EN TÊTE DU PALMARÈS PLUS DE 6x Nous croyons que l’informatique transformenossociétés.Noussavons que les réalisations marquantes sont le fruit du partage des savoirs et du plaisir à travailler ensemble. Nous recherchons en permanence de meilleures façons de faire. THERE IS A BETTER WAY ! – OCTO Technology Manifesto  UNE PWA - PO UR LES GOUVERNER TOUTES  TRIBU WEBF  OCT O T E CHNOLOGY
  17. 17. WWW.OCTO.COM tribu.webf@octo.com © OCTO Technology 2021 - All rights reserved NOUS VOUS accompagnons DANS LA MISE EN PLACE de frameworks et architectures RÉPONDANT À VOS BESOINS d’applications Web toujours PLUS RICHES ET MULTIPLA+EFORMES.

×