Double Slash

Le podcast sur le code, le développement web et les outils modernes.

//.
AccueilLes Progressive Web Apps avec Stéphanie Alix

//.11 - Les Progressive Web Apps avec Stéphanie Alix

August 31, 2020
Épisode "Les Progressive Web Apps avec Stéphanie Alix"
Durée : 01h 13mn 12s

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 :

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 :

Si vous voyez une erreur ou une faute sur cette page, vous pouvez ouvrir une PR directement sur le repository github du site.
Le fichier se trouve ici : https://github.com/double-slash-podcast/double-slash/blob/master/src/content/podcasts/progressive-web-app.md