Udemy

Platform

Français

Language

Mobile Apps

Category

Les Progressive Web Apps (PWA) par la pratique

Maîtriser les API permettant de créer les applications hybrides de demain

4.55 (130 reviews)

Students

4 hours

Content

Jun 2018

Last Update
Regular Price

EXCLUSIVE SKILLSHARE OFFER
Exclusive SkillShare Offer
Unlimited access to 30 000 Premium SkillShare courses
40%OFF ANNUAL MEMBERSHIP

What you will learn

Maîtriser les API indispensables à la création d'une PWA ou l'upgrade d'une application web en PWA


Description

Souvenez vous, il a bien longtemps, presque 15 ans, XMLHttpRequest évoluait dans l'indifférence générale, jusqu'à ce que par la magie du verbe - ou plutôt du nom, 'AJAX' - il devienne l'acteur principal du Web 2.0. Il est en train de se passer la même chose avec le service worker et les PWA.

En août 2015, Alex Russel a nommé les applications web qui recourent à un ensemble de technologies - service workers, cache, push notification ... - des Progressive Web Apps ou PWA. Cela a eu pour effet de les rendre plus visibles et plus populaires parmi les développeurs, particulièrement depuis la rentrée de septembre 2017. Exactement comme ça été le cas il y a plus 10 ans avec XMLHttpRequest et AJAX.

Autrement dit, nous sommes à l'aube d'un tournant aussi majeur que l'a été AJAX. Ce qui revient à avoir en sa possession une boule de cristale qui nous annonce que les développeuses et développeurs qui sauront transformer des applications web classiques en PWA, ou directement créer des PWA, seront recherchés en 2018.

C'est le moment idéal pour monter en compétence sur les diverses API qui utilisées ensemble, permettent d'améliorer vos applications web pour en faire des applications hybrides que vos utilisateurs installeront sur leurs smartphones.


Screenshots

Les Progressive Web Apps (PWA) par la pratique
Les Progressive Web Apps (PWA) par la pratique
Les Progressive Web Apps (PWA) par la pratique
Les Progressive Web Apps (PWA) par la pratique

Content

Création de l'application destinée à devenir une PWA

Au programme

Repo Github

Récupération du code source et configuration d'un serveur live-server

Créer un API REST à l'aide de json-server

Le Service Worker

Définition d'un service worker

Enregistrement d'un service worker

Interception de requêtes HTTP par un service worker

Gestion du cache

Détection l'état de la connexion internet et affichage d'une page d'information

A propos des erreurs durant la frappe

CacheStorage : un 'store' pour vos instances de cache + création d'instances

Cache API : utilisation d'une instance de cache, mettre des fichiers en cache

Gérer la mise en cache depuis le service worker

Revue du code permettant de poster une nouvelle techno

Récupérer les réponses depuis le cache

Gestion avancée du cache

Stratégie de récupération en cache, puis réseau si le contenu n'est pas cache

Répondre à une requête en faisant servir par le service worker le cache (suite)

Stratégie de récupération sur le réseau puis en cache si réseau non accessible

S'assurer que le service worker reste actif à l'aide de waitUntil()

Supprimer les anciennes instances de cache

Rendre votre application web installable

Création du fichier manifest.json

Notifications

Notifications non persistantes (depuis main.js)

Options des notifications

Notifications persistantes (envoyées depuis le service worker)

Options de notifications grâce aux actions

Fermer programmatiquement une notification

Les notifications push

Intercepter une notification push et afficher son contenu dans une notification

Architecture

Génération de vapid keys

Récupération ou création d'une souscription auprès d'un push service

Envoyer une notification push depuis Node

Background Sync

Démonstration

Infrastructure

Background Sync côté Service Worker

Faire un audit de votre PWA et améliorer votre score

Correction de bugs en production puis audit

Améliorer votre score d'audit

Améliorer votre score d'audit en corrigeant le problème de taille de viewport

Bonus

Coupons vers des formations complémentaires


Reviews

J
Julian6 May 2020

Aucune description des outils, le poste servant de formation n'a pas été préparé, dès la section 1) 3eme vidéo, il y a déjà un delta important entre ce qui est affiché dans la vidéo et ce qui apparaît dans le repo github (pratique pour perdre un étudiant, car si on vient ici c'est justement pour apprendre, pas en sachant déjà là où on veut nous emmener..). Pour le moment, je suis plus perdu qu'autre chose... mais je ne suis qu'au tout début de la formation, je laisse donc une chance de remonter la note en espérant que la suite du cours soit moins brouillon...

L
Laurent3 April 2020

un peu brouillon, on a l'impression d'assister à une démo avec quelques petits ratés plutôt qu'à un cours bien préparé.

H
Hamza6 April 2019

Comme toujours : clair, précis et pédagogue, avec des exemples concrets pour bien comprendre les concepts des PWA.

J
Julien21 March 2019

Cours intéressant, concret et pratique mais optimisable dans la forme, notamment sur l'affichage du code (très petit) qui nous oblige à visionner les sessions sur un grand écran : c'est illisible sur un écran de smartphone si on souhaite se former dans les transports, ou encore en split-screen sur un écran d'ordinateur portable.

L
LAINE22 October 2018

Très bon cours pour faire le tour des PWA. Finalement, la chose frustrante est de ne pas pouvoir faire une simulation sur le smartphone en local/LAN à cause des CORS et https.

f
fjk22 August 2018

Le cours couvre bien la base, mais n'est pas à 100% à jour sur certains changements avec les PWA. Le résultat obtenu par les exercices n'est pas toujours aligné ce qui est présenté. L'idéal est de ne pas trop s'en faire avec les premières leçons même si ça ne fonctionne pas de notre côté et d'avancer. Les leçons suivantes apportent souvent les réponses. Je recommande le cours pour ceux qui cherchent une introduction rapide au PWA et qui ont une petite base en Javascript sur les Promesses.

G
Gregoire13 August 2018

Un bon tour d'horizon du sujet, suffisamment approfondie pour pouvoir se lancer ensuite. Mission accomplie.

M
Mickael29 April 2018

Il s'agit du deuxième cours de cet auteur que je suis sur Udemy. Il aborde ici une notion dont je n'avais jamais entendu parler et qui permet de prendre le train non pas en route mais dès le début du voyage parmi les PWA. Les concepts sont très bien expliqués et permettent vraiment de répondre à la définition d'une PWA. Les vidéos proposées sont progressives, montrent aussi les erreurs qui pourraient guetter n'importe quelle développeur ainsi que leurs solutions. Le déploiement en production est même abordé quoique très peu détaillé. Merci à l'auteur pour son travail !

P
Pierre-alexandre22 February 2018

Comme sur les autres cours de mr Samir Medjdoub, c'est parfait.. Très bonne formation sur les PWA qui vont m'ouvrir de nouvelles perspectives de développement.. Merci

L
Lefèvre28 January 2018

Bonne formation! Plutôt satisfait. Coté contenu, le seul point qui manque à mon sens pour être au top est la gestion des notifications push ciblées. En effet, l'envoi des push est effectué pour tous les devices en même temps alors que l'intérêt du push est d'être bien ciblé (évolutions de commandes, baisse de tarif sur des produits surveillés, ...) De bons conseils et des bonnes pratiques, quelques points supplémentaires très utiles (json-server, ...)


1496056

Udemy ID

1/5/2018

Course created date

11/22/2019

Course Indexed date
Bot
Course Submitted by

Twitter
Telegram