Captain Academy/PWA 101: des app web performantes et offline

  • 49,17 €

PWA 101: des app web performantes et offline

  • Fermé

Comment utiliser les fonctionnalités introduites par les PWA afin de proposer une expérience utilisateur performante et déconnectée ?
Quand on accède à un site web depuis un smartphone, on n'est jamais sûr d’avoir du réseau... 
Oui, on a tous déjà eu ce site qui ne charge pas quand on bascule entre différents réseaux… Pour les sites de news par exemple, c’est bien dommage, les données sont déjà là.

Heureusement que le T-Rex Game est là !
Oui, je parle bien du petit jeu où l’on doit faire sauter un dinosaure par-dessus des cactus.
Toujours plus intéressant que de consulter le site pour lequel j’ai ouvert un onglet !

Mais pourquoi déconnecter un site WEB ?
Oui le principe du WEB, c’est d’être connecté… Mais on est en 2019, on peut mieux faire.

Les technologies sont là mais peu de gens les utilisent …
Si maintenant je te disais que les technologies pour déconnecter ton application WEB sont déjà là. Disponibles dans la majorité des navigateurs !

Utiliser pleinement les fonctionnalités du navigateur !
  • Garder des données en cache afin d’éviter les appels réseaux
  • Afficher son site web même quand on n'a pas de connection Internet
  • Installer son application Web sur l’écran d’accueil et l’utiliser comme une application Native
  • Stocker une grande quantité de données pour y accéder à n’importe quel moment
  • Installer son site web sur un Desktop

Tout ça c’est possible maintenant !

Les résultats attendus
Meilleures performances, meilleur score SEO, une fiabilité accrue, une expérience utilisateur augmentée.
En d’autres termes, une meilleure rétention des utilisateurs, un meilleur engagement et potentiellement plus de chiffre d’affaires ….

C’est bien de donner des arguments mais les chiffres parlent d’eux même :

Deux options s’offrent à toi :
Option 1: simplement rajouter un package sans savoir ce qu’il se passe derrière, cela marchera, peut - être… Jusqu’au jour ou ça ne marche plus ... (et tu risques d'y passer des heures)
Option 2: Utiliser la formation pour apprendre les technologies et les concepts derrière ces packages plus ou moins maintenus. Tu pourras toujours rajouter un package si tu le souhaites… mais tu seras armé d’une connaissance qui te permettra de résoudre les problèmes !

Comment suivre la formation ? 
C’est une formation vidéo, je montre le code et je t’explique pas à pas comment ça fonctionne. 
Tu peux la commander dès aujourd’hui ! 
Il y a un module issue de mes vidéos Youtube qui est en accès libre, c’est toujours mieux de goûter avant de commander un plat !
Tu as le choix de suivre la formation avec le code fourni ou de te lancer sur une autre application !

Il y a-t-il des pré-requis ?
  • Connaitre les bases du développement WEB (HTML5, Javascript)
  • Savoir installer un package NPM
  • GIT est un plus, j’ai divisé le code par étapes mais tu peux accéder à la liste des commits
Elle dure combien de temps ?

Je fais du montage sur mes formations, le but est de les garder les plus courtes possible en délivrant un maximum de valeur ! 
Si tu préfères une formation 10x trop long, remplie de blabla, j’ai peur de ne pas être la bonne personne...

Si j’ai un problème ?
En cas de problème, envoie-moi un email à l’adresse suivante: emmanuel@captaindev.io


Contenu

01 - Installation d'une PWA

1. Le Web Manifest
2. Activer les Desktop PWA
3. Ajouter un Service Worker
4. Installation sur Android / Desktop / iOS
5. Customiser l'installation

02 - Les Services Workers en détail

1. Introduction aux Web Worker
2. Le cycle de vie des Service Worker
3. Debugger un Service Worker

05 - Auditer une PWA

1. Introduction à Lighthouse
2. PWA Checklist

04 - Stocker des données hors ligne

1. Analyse d'une PWA Offline (YOUTUBE)
Aperçu
2. Introduction à l'IndexedDB (YOUTUBE)
Aperçu
3. Manipuler l'IndexedDB avec DexieJS (YOUTUBE)
Aperçu

03 - Mettre les données en Cache

1. Les techniques traditionnelles de Cache
2. La Cache API
3. Workbox, le cache ULTIME!

Code

Web Worker (ZIP)
Code Indexed DB avec idb (ZIP)
Code IndexedDB avec DexieJS (ZIP)
step-1.zip
step-2.zip
step-3.zip
step-4.zip
step-5.zip
step-6.zip
step-7.zip
step-8.zip
step-final.zip

HOW TO ?

Comment utiliser le code fourni ?
Conseils pour mieux progresser