Les Progressive Web Apps avec Stéphanie Alix

Dans cet épisode assez technique, nous allons faire le point sur les Progressive Web App en 2020. Définir ce qu'est une PWA, les principales features d'une PWA. Puis, pourquoi choisir une PWA au lieu d'une application native. Et enfin, revenir sur les blocages de Safari par rapport aux PWA. Notre invitée pour l'épisode : Stéphanie Alix : https://stephaniealix.com/ et @StephanieAlix95 Développeuse Web et spécialisée dans les PWA Principales fonctionnalités d'une PWA : webmanifest pour l'apparence (icônes, couleurs, nom..) ajout d'un raccourci avec "icône" dans les apps du device fonctionnement dans une fenêtre dédiée (fullscreen, stand-alone, minimal-ui) comme une application native. Auto-update: juste rafraichir la page après un déploiement Notifications push (application ouverte et fermée) service worker (gestion du cache, etc..) Cache/offline Background sync Minimum pour être une PWA : Être en HTTPS Avoir un Service worker Avoir web manifest avec au moins les icônes iOS >= 11.3 et Chrome >= 71 / 11.3 mars 2018 et chrome 71 décembre 2018 Prise en charge des fonctionnalités par les navigateurs : Service workers browser : https://caniuse.com/#search=service workers Web App Manifest : https://caniuse.com/#search=Web App Manifest Web Notification : https://caniuse.com/#search=web notification Pourquoi une PWA et pas une app native ? Plus léger qu'une application mobile Plus accessibles en mauvaise connection grâce aux services workers Pas besoin de passer par l'App Store et pas obligé de l'installer Multiplateforme: 1 seul code pour toutes les plateformes Peut être indexée par Google Features natives de plus en plus disponibles: Web Share API, camera access. Voir le Projet Fugu pour ajouter des fonctionnalités natives pour chromium Possibilité de remplacer/intégré dans des applications natives si besoin (web view, pwabuilder, TWA) Augmentation du nombre de pages vues, d'utilisateurs qui reviennent (prouvé avec des PWA connues: Pinterest, Starbucks, Twitter..) PWA et app natives peuvent aussi être complémentaires PWA VS Safari Les blocages de la part de safari : Notifications (obligé de passer par le système Apple) Prompt "add to Home" (obligé de passer par le menu "Sur l'écran d'accueil") WebManifest icônes (pas bloquant) cache capacity 50MB (pas bloquant) Background sync IOS purge le cache (indexDB, localstorage) et maintenant iOS purge aussi les cookies après un jour ou une semaine selon la version webkit.. Note spécifique sur IOS : Apple interdit de développer un navigateur pour IOS avec un moteur de rendu différent de WebKit. Donc les navigateurs disponibles sur IOS sont en réalité des applications composées de WebViews WebKit. Ils n'ont donc pas les fonctionnalités PWA (ex: impossible d'ajouter la PWA à l'écran d'accueil via iOS chrome ou d'utiliser les Services Workers) Podcast présenté par : Alexandre Duval @xlanex6 Patrick Faramaz @PatrickFaramaz

Episode source