Découverte des Progressive Web Apps et Service Workers

Поділитися
Вставка
  • Опубліковано 26 жов 2024

КОМЕНТАРІ • 77

  • @noukode_haiti
    @noukode_haiti 3 дні тому

    Je te suis depuis Haiti je me suis aboné depuis le tuto sur phonegap! Je sais ca fait un bail! mais merci pour tout ce que tu m'as appris! Meme la faculte ou je suis allé, ne m'apprends rien de plus que toi. Un grand merci bro

  • @lesdevseniors8730
    @lesdevseniors8730 3 роки тому +17

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

  • @khraken3518
    @khraken3518 3 роки тому +2

    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.

  • @devdiagnostics
    @devdiagnostics 2 роки тому +1

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

  • @alexfrn7657
    @alexfrn7657 3 роки тому +5

    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.

  • @clementromanowski7333
    @clementromanowski7333 3 роки тому +3

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

  • @skavunga
    @skavunga 3 роки тому +5

    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!

  • @julienconnault1612
    @julienconnault1612 3 роки тому +1

    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
      @stefouy 3 роки тому +1

      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 :-)

  • @PopCultureQuest
    @PopCultureQuest 3 роки тому

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

  • @AnthonyCollet
    @AnthonyCollet 3 роки тому

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

  • @hfahari
    @hfahari 3 роки тому

    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...

  • @frank4852
    @frank4852 Рік тому

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

  • @laurentsoria1528
    @laurentsoria1528 Рік тому +2

    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 ?

  • @enockmulamba1381
    @enockmulamba1381 3 роки тому +1

    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
      @grafikart  3 роки тому +1

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

    • @shikokmer
      @shikokmer 3 роки тому +1

      @@grafikart les messages push par exemple

  • @fab313
    @fab313 2 роки тому

    Merci pour cette leçon de qualité !

  • @johnmbaye
    @johnmbaye 3 роки тому

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

  • @nicolasdesprez3534
    @nicolasdesprez3534 3 роки тому

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

  • @alexjswill
    @alexjswill 3 роки тому

    Tout simplement génial! Merci Jonathan

  • @blm7929
    @blm7929 2 роки тому

    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 !

  • @ricokidd49
    @ricokidd49 3 роки тому

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

  • @mobilephone5140
    @mobilephone5140 3 роки тому

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

  • @zeydanegaye9666
    @zeydanegaye9666 3 роки тому

    Vous avez encore une fois assuré 🤗

  • @adnag7117
    @adnag7117 2 роки тому

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

  • @jjuliefrance
    @jjuliefrance 2 роки тому

    Magnifique ! Merci beaucoup.

  • @cxxi8045
    @cxxi8045 3 роки тому

    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.

  • @victorienpestre3003
    @victorienpestre3003 3 роки тому +1

    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?

  • @myfreedom42
    @myfreedom42 2 роки тому +1

    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 ?

  • @z1982_
    @z1982_ 6 місяців тому

    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 ?

  • @lalune7425
    @lalune7425 3 роки тому

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

  • @pierrenapoletano3889
    @pierrenapoletano3889 3 роки тому

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

  • @aziz0x00
    @aziz0x00 3 роки тому

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

  • @jonathanscapin1814
    @jonathanscapin1814 3 роки тому

    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.

  • @juleslanquetin7093
    @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

  • @MrgnUTube
    @MrgnUTube 3 роки тому

    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.

  • @kidkarate2010
    @kidkarate2010 3 роки тому +1

    Merci Grafikart

  • @kashalamukendi7658
    @kashalamukendi7658 3 роки тому

    encore une fois merci

  • @devchannel5359
    @devchannel5359 3 роки тому

    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 ?

  • @tanganyikamusictv
    @tanganyikamusictv 2 роки тому

    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
    @adnag7117 2 роки тому

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

  • @kerenhassan3561
    @kerenhassan3561 3 роки тому

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

    • @grafikart
      @grafikart  3 роки тому

      C'est à dire que cherche tu a tester ?

  • @roronoa_d_law1075
    @roronoa_d_law1075 Рік тому

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

  • @vognmonique3330
    @vognmonique3330 2 роки тому

    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.

  • @jibhey
    @jibhey 3 роки тому +1

    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.

  • @SimonLedoux
    @SimonLedoux 3 роки тому

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

  • @0liverr
    @0liverr 3 роки тому

    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.

  • @Gweedzy
    @Gweedzy 3 роки тому

    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
      @Gweedzy 3 роки тому

      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é

  • @pixelkiller67
    @pixelkiller67 3 роки тому

    Parfait exactement ce que je cherchais

  • @kinderpinguiin7064
    @kinderpinguiin7064 3 роки тому

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

  • @stephanehenault4390
    @stephanehenault4390 3 роки тому

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

  • @excellenztechnique7002
    @excellenztechnique7002 3 роки тому

    Merci encore...

  • @samyftaita3832
    @samyftaita3832 3 роки тому

    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
      @grafikart  3 роки тому

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

    • @samyftaita3832
      @samyftaita3832 3 роки тому

      @@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.

  • @gobajoseph5064
    @gobajoseph5064 3 роки тому

    Merci infiniment

  • @mamadou330
    @mamadou330 3 роки тому

    Salut quelles sont extensions que tu utilises pour VSC

  • @cesargracelouzala1551
    @cesargracelouzala1551 3 роки тому

    J'aime bien

  • @psenej
    @psenej 3 роки тому +2

    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 :/

  • @Kerb_888
    @Kerb_888 3 роки тому

    super video !

  • @Noxsniper
    @Noxsniper 3 роки тому

    Please un tuto NVM.
    Merci Grafikart

    • @grafikart
      @grafikart  3 роки тому +1

      Je ne comprends pas le problème.

    • @Noxsniper
      @Noxsniper 3 роки тому

      @@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

  • @ApprendreSansNecessite
    @ApprendreSansNecessite 2 роки тому

    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
      @ynno66 2 роки тому

      mdr 🤣

  • @Xman34-
    @Xman34- 3 роки тому

    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
      @grafikart  3 роки тому

      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-
      @Xman34- 3 роки тому

      @@grafikart merci

  • @emichel
    @emichel 3 роки тому

    cool

  • @daveglad3554
    @daveglad3554 3 роки тому

    Super ()👍🏽

  • @nukmaccon9554
    @nukmaccon9554 3 роки тому

    le top : Angular + pwa

  • @sanisaj1147
    @sanisaj1147 Рік тому

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

  • @thehikarilab
    @thehikarilab 3 роки тому

    ☺️