Découverte des Progressive Web Apps et Service Workers

Article ► grafikart.fr/tutoriels/decouv...
Abonnez-vous ► bit.ly/GrafikartSubscribe
Dans cette vidéo je vous propose de découvrir le principe des [**P**rogressive **W**eb **A**pps](developer.mozilla.org/en-US/d...) (applications Web progressives en français). L'objectif des PWA est de faire en sorte d'offrir une expérience utilisateur proche d'une application native en passant par l'utilisation des APIs Web modernes et des stratégies d'amélioration progressive.
Soutenez Grafikart:
Devenez premium ► grafikart.fr/premium
Donnez via Utip ► utip.io/grafikart
Retrouvez Grafikart sur:
Le site ► grafikart.fr
Twitter ► / grafikart_fr
Discord ► grafikart.fr/tchat

[@lesdevseniors8730]

J’ai attendu cette vidéo depuis1 ans merci bro 💪🏿💪🏿

[@khraken3518]

J'ai tellement louché sur les PWA et les SW sans approfondir le sujet que je commençais à culpabiliser. Et la, tu nous offre le package tout emballé, tout maché. Merci Grafikart.

[@PopCultureQuest]

Depuis le temps qu’on attendait une formation sur les pwa ! Merci Grafikart !

[@nicolasdesprez3534]

Un grand bravo pour la clarté ! ;) impressionnant comme toujours !

[@devdiagnostics]

Y’a pas mieux que vous pour expliquer. J’ai adoré la vidéo. Merci

[@hfahari]

Très bon tutoriel, je ne pensais pas qu'il y avait autant de choses possibles avec cette techno. Hâte de voir les push notifications...

[@AnthonyCollet]

Encore un super tuto. Un complément sur la mise en place de notification push ce serait TOOOOP !!! Merci

[@alexjswill]

Tout simplement génial! Merci Jonathan

[@fab313]

Merci pour cette leçon de qualité !

[@zeydanegaye9666]

Vous avez encore une fois assuré 🤗

[@clementromanowski7333]

Superbe vidéo j'espère que tu pourras nous faire d'autres vidéos sur les différentes fonctionnalités des PWA.

[@johnmbaye]

Super cool ... Merci Merci Merci .. Une super approche .. et des explications top, comme d'habitude.

[@jjuliefrance]

Magnifique ! Merci beaucoup.

[@skavunga]

Salut. Merci beaucoup pour cette vidéo. ça serait encore plus cool si tu faisais la vidéo avec d'autres trucs que l'on peut faire avec le service worker: (Notifications, Messages Push, Users connectés, etc...). Merci d'avance!

[@adnag7117]

Très jolie merci pour ce tuto qui est très utile.

[@alexfrn7657]

Une vidéo sur l'utilisation de Workbox pourrait être intéressante, surtout en sachant que React l'utilise par défaut sur leur template de pwa.

[@aziz0x00]

ive been waiting for this vid since forever!!!!

[@blm7929]

Un grand merci, excellente vidéo très compréhensible et éducative, comme d'habitude ! Bon par contre j'ai lâché à 36:20 quand ça parle de lazy cache, je referrais peut-être un passage dessus mais dans les grandes ligne j'ai pu tout comprendre du fonctionnement du Service Worker !

[@kidkarate2010]

Merci Grafikart

[@kashalamukendi7658]

encore une fois merci

[@julienconnault1612]

Je viens de commencer la vidéo, et je voudrais juste faire un commentaire bête: j'adore ta voix. J'utilise des écouteurs, et en général les vidéos de coding sont assez aggressives pour mes oreilles, mais les tiennes je me verrais bien les écouter pour m'endormir ;)

[@stefouy]

Je plussoie ! Assez sensible à la voix également, surtout quand on se tape des heures à écouter des vidéos. C'est pour ça que les vidéos d'Indiens parlant dev en anglais y'a pas moyen, même Honoré (Les teachers du net si je dis pas de conneries) je l'aime bien mais je peux pas l'écouter plus de 2 minutes quoi ^^ J'irais pas juqu'à l'écouter pour dormir mais une chose est sûre il est reposant Graf :-)

[@mobilephone5140]

Merci vraiment bravo super vidéo!!! Les notifications push seraient super aussi... et l Envoie de messages offline et récupéreration en online

[@frank4852]

Vidéos superdes!! S'il te plait fait nous d'autres vidéos sur le PWA

[@Descartes1789]

super video !

[@cxxi8045]

Super video, merci beaucoup. Plutot que de developper un aspet en particulier il pourrait etre interessant de présenter tout ce qu'il est possible d'ameliorer grace au service worker. je pense que comme beaucoup j'ai encore du mal a trouver des cas d'application intéressant au dela de ceux que vous démontrez.

[@enockmulamba1381]

Très bonne vidéo j'aimerai vraiment que tu continues avec une série sur les PWA qui à sont à ces jours un atout pour nous les developers

[@grafikart]

Quel aspect des PWA veux-tu voir développé.

[@shikokmer]

@@grafikart les messages push par exemple

[@gobajoseph5064]

Merci infiniment

[@ricokidd49]

Bonjour, oui pour la vidéo sur les notifications push . Merci

[@laurentsoria1528]

Bonjour . Excellent tuto, et expliqué de façon claire . Du coup, ça permet de créer des applis accessibles sur les portables, sans avoir besoin de passer par les langages natifs ? Est ce qu'il y a aussi la possibilité de les mettre sur des stores ?

[@cesargracelouzala1551]

J'aime bien

[@excellenztechnique7002]

Merci encore...

[@pixelkiller67]

Parfait exactement ce que je cherchais

[@daveglad3554]

Super ()👍🏽

[@kinderpinguiin7064]

Super vidéo ! Un système de news personnalisée selon le pays grâce à la géolocalisation pourrait être intéressant.

[@victorienpestre3003]

Attention au scope du sw.js. Pour être actif sur tout le site, il est conseillé de le mettre à la racine. Pour info, dans l'onglet Application>Service Worker de la console de chrome tu peux cocher "Update on reload" ça évite de mettre le skipWaiting/claim dans le code ou de fermer/ouvrir sa session. Il y a aussi une checkbox pour le Offline sans avoir à repasser par l'onglet Network et une checkbox Bypass pour ignorer le SW. Petite question sur laquelle je butte depuis un moment, est-ce que tu sais comment récupérer la date des ressources mises en cache?

[@jonathanscapin1814]

Merci pour la vidéo. J'étais en pleine lecture de la doc, ça m'a aidé ^_^. Petite question bête au passage, j'ai un problème avec la mise en cache de Font Awesome. Le fichier est bien mis en cache, mais impossible d'afficher les icônes.

[@devchannel5359]

Merci beaucoup pour cette vidéo! J'essaye de builder des web component avec vue 3 mais lorsque je fait un "vue-cli-service build" (run serve marche sans problème) le wc n'est pas fonctionnel... Tu as réussi à créer des web components réutilisables sur d'autres projets ?

[@lalune7425]

ca serait pas mal que tu fasse une vidéo pour apprendre a crée une option de parrainage sur un site web

[@tanganyikamusictv]

bonjour jessaye de le faire mais erreur de (aucun service worker correspondant detecter) mais je deja enregistrer le sw.js lerreur retourne toujours je sais pas pour quoi je essaye ca sur serveur enligne en php

[@adnag7117]

Que-ce que vous avez dans les fichiers posts.json,settings.json?

[@myfreedom42]

tu peux faire un tuto pour ajouter notre PWA sur google play par exemple ? stp il y a le git du code final d'ailleurs ?

[@emichel]

cool

[@z1982_]

Vidéo très intéressante! merci! Je travaille sur next js et j'ai du mal à comprendre comment définir les URL à cacher, vu que next build des chunks qui ne sont pas directement nommés comme fichiers présent dans le projet, comme dans ta vidéo. Une idée ?

[@pierrenapoletano3889]

Salut, très bonne vidéo, comment as-tu fait pour avoir le design de la souris d'Apple ?

[@roronoa_d_law1075]

Pourquoi il faut faire clients.claim() en navigation privée ?

[@mamadou330]

Salut quelles sont extensions que tu utilises pour VSC

[@SimonLedoux]

J'adorerais avoir une suite de messagerie en Laravel avec les notifications push des PWA

[@stephanehenault4390]

Si j'ai bien comprit actuellement on ne peut pas créer un fichier et l'enregistré ?

[@MrgnUTube]

Safari supporte les services workers, les notifications push, l'ajout sur le menu principal et l'ouverture de l'app sans barre d'adresse. C'est pas encore au top de l'intégration, des choses spécifiques sont à faire (Apple...) mais c'est utilisable. On ne peut pas dire qu'il ne les supporte pas du tout.

[@juleslanquetin7093]

Bonjour, J'adore votre vidéo cependant je ne parviens pas à écouter l'événement "fetch", j'ai l'impression qu'il n'est jamais déclenché. Auriez-vous une idée de la source de ce problème ? Merci d'avance

[@vognmonique3330]

Merci de votre vidéo, par contre je n'arrive pas a testé le code, j'ai ceci qui pose problème :Note: id is not specified in the manifest, start_url is used instead.

[@kerenhassan3561]

Salut. Merci beaucoup pour cette vidéo. Comment tu conseilles de tester automatiquement le service worker ?

[@grafikart]

C'est à dire que cherche tu a tester ?

[@Noxsniper]

Please un tuto NVM. Merci Grafikart

[@grafikart]

Je ne comprends pas le problème.

[@Noxsniper]

@@grafikart je voulais savoir si tu peux faire un tuto de comment installer et utiliser NVM et paramétrer un projet pour utiliser une version node spécifique différente de celle installée sur le système avec le NVM. Merci encore

[@Gweedzy]

Bonjour @Grafikart, encore une superbe vidéo, désolé de commenter sous cette vidéo car cest un peu "hors sujet" mais je suis vraiment en galere :/ Je cherche à enregistrer un pdf géneré avec jspdf dans une Hybrid App avec Cordova Aurais tu des indices/ vidéos sur lesquels je peux continuer d'investiguer? Jai visité 100+ liens je cherche depuis 1 semaine rien ne fonctionne correctement Je te remercie Bonne journée

[@Gweedzy]

J'ai fait le test sur pc sur Chrome tout fonctionne le pdf se genere télécharge sans probleme mais cest quand jai cordova build et testé sur mon téléphone que le malheur a commencé

[@0liverr]

Les Service Workers n'ont pas l'air d'avoir un comportement similaire sur FF ou des navigateurs issus de Chromium. En suivant ces exemples, j'ai eu le même comportement sur Brave, mais sur FF, tout ce qui est lié aux events ne semble pas fonctionner.

[@psenej]

super vidéo découverte ! je me demandais comment marché ce type d'app justement ! 18:26 le "je vais aller sur un autre site ... au hasard hein" m'a eu :/

[@jibhey]

Intéressant, mais je me demande si les PWA ont encore de l'avenir dans la mesure ou Apple semble les refuser. Mine de rien, qu'une boite comme ça les refuse, ça empêche les PWA de devenir un standard.

[@thehikarilab]

☺️

[@samyftaita3832]

Super vidéo !! Est t'il possible de rendre un projet symfony react lié par webpack Encore une PWA? Quoi que je fasse le manfest Json ne se retrouve jamais dans application .

[@grafikart]

Il suffit de mettre le fichier dans le dossier public. Je ne comprends pas trop la demande :(

[@samyftaita3832]

@@grafikart bah en fait quand je le met dans le dossier Public, et que je lance un nom build ou dev , il n'est pas pris en compte et quand je vais dans application, il est écrit que il n'y a pas de manifest Json.

[@ApprendreSansNecessite]

26:18 tu n'es pas obligé de faire ça ``` event.waitUntil( caches.keys().then(keys => Promise.all(keys.map(key => key !== PREFIX && caches.delete(key))))) ``` La maintenabilité exigerait des variables et fonctions correctement nommées, mais tu admettras que cette proposition existe (déjà) et qu'elle est plus légère syntaxiquement. Je t'encourage à essayer de répliquer cette méthode sur le code de l'écran 31:36 (en utilisant `.then` et `.catch` plutôt que `try/catch`). Tu vas voir à quel point tu peux être gagnant en utilisant les Promises directement. Dans cette vidéo c'est évident que tu luttes contre la nature même de l'abstraction que tu utilises.

[@ynno66]

mdr 🤣

[@Xman34-]

Trés bonne vidéo jusqu'a 33:26 ou tu sors un fichier index.js et un posts.json de ton chapeau pour continuer la vidéo (il faut payer). C'est Dommage.

[@grafikart]

Comme je l'ai dit ce code n'est pas le sujet du tutoriel donc je n'ai pas jugé nécessaire de le détailler. Tu peux trouver le JSON pour les article depuis jsonplaceholder par exemple jsonplaceholder.typicode.com/posts

[@Xman34-]

@@grafikart merci

[@nukmaccon9554]

le top : Angular + pwa

[@yazidthedev4281]

Le top laravel vuejs pwa

[@sanisaj1147]

any chance (English) that the rest of the world can also be benefitted from this