Service Workers - Registration, LifeCycle, Events, and Dev Tools

แชร์
ฝัง
  • เผยแพร่เมื่อ 30 ต.ค. 2024

ความคิดเห็น • 65

  • @redhood7105
    @redhood7105 ปีที่แล้ว +8

    Honestly, This and your other playlists should be gold standard for any youtube educator who creates content for the serious learners. Thank you

  • @scottbockelman310
    @scottbockelman310 ปีที่แล้ว +10

    Best set of concise and informative tutorials I have found on PWAs and JavaScript.
    And I love the almost Bob Ross relaxed delivery. Thanks!

  • @shujaatali8414
    @shujaatali8414 2 หลายเดือนก่อน

    No one can stop me to listen full series. Awesome I loved the way you delivered.

  • @rebelmachine88
    @rebelmachine88 3 ปีที่แล้ว +4

    Thank you for this series, looking forward to the rest. Great explanations as always!

  • @lalmimohammedissam8654
    @lalmimohammedissam8654 ปีที่แล้ว +2

    I would love to be one of your students in real life. You make this look like a piece of cake, as they say, 'easy peasy lemon squeezy.' Thank you a lot professor

    • @SteveGriffith-Prof3ssorSt3v3
      @SteveGriffith-Prof3ssorSt3v3  ปีที่แล้ว +3

      You can be if you come here www.algonquincollege.com/mediaanddesign/program/mobile-application-design-and-development/#overview
      😀

  • @sriramananthasivan482
    @sriramananthasivan482 ปีที่แล้ว +1

    Prof3ssorSt3v3 - what an awesome series. I suppose you are the David Attenborough of the JavaScript world.. beautiful narration and explanation! . Grateful and thankful for your effort.

  • @mikebryan3270
    @mikebryan3270 3 ปีที่แล้ว

    I recently started experimenting with changing the wall colour of an image of a room stored as background with an SVG mapping the areas to change the colour. Your video has prompted me to consider storing the user’s colour selection and room image. An inspirational video! Thanks

  • @kumailn7662
    @kumailn7662 ปีที่แล้ว +2

    Awesome man, awesome, the way you explained is awesome

  • @mauricios3267
    @mauricios3267 3 ปีที่แล้ว +1

    Great video! Looking forward to going through the whole playlist!

  • @staticselector7318
    @staticselector7318 3 ปีที่แล้ว +1

    2:16 😄😆😂🤣 If I can type ".then" super relatable 👌 Awesome series 👍

  • @kelechi.E
    @kelechi.E 2 ปีที่แล้ว +1

    I think a little introduction into service workers and when they are used would really be helpful.

  • @TheAjayluke
    @TheAjayluke 3 ปีที่แล้ว

    Great explanation for service workers. Loved it! Thank you for your effort.

  • @kienphan6436
    @kienphan6436 4 หลายเดือนก่อน

    Thank you sir! This is very helpful.

  • @UmapathiKrishnan
    @UmapathiKrishnan 6 หลายเดือนก่อน

    Thank you for your clear explanation

  • @shanusharma.
    @shanusharma. 9 หลายเดือนก่อน

    Such a nice video, thank you so much for making it.

  • @marinamohsen6940
    @marinamohsen6940 2 ปีที่แล้ว

    This was so informative , Thank You!

  • @endergelisenosasunaatag275
    @endergelisenosasunaatag275 ปีที่แล้ว +1

    Hi Steve, first of all, thank you for sharing those videos, I want to ask you I read MDN docs like this but there are many interfaces, methods, properties on a subject, do these videos give me everything about service workers? should I keep reading MDN docs as a jr? I feel like slow.

    • @SteveGriffith-Prof3ssorSt3v3
      @SteveGriffith-Prof3ssorSt3v3  ปีที่แล้ว +3

      Well, I've been doing web development for over 25 years... I still read the docs, and MDN, and articles, and watch tutorials....
      This is a life long learning career.
      You will never know it all. Enjoy the journey.

  • @bluemangroupie
    @bluemangroupie ปีที่แล้ว +1

    Thanks!

  • @abhim6380
    @abhim6380 3 ปีที่แล้ว +1

    Thank you for this.

  • @derkvanderveen8938
    @derkvanderveen8938 3 ปีที่แล้ว +1

    Great tutorial, thanks.

  • @tudoresan3119
    @tudoresan3119 3 ปีที่แล้ว

    Very interesting! Thank you!

  • @akashshah1080
    @akashshah1080 ปีที่แล้ว +1

    Thanks Steve!

  • @marcepires
    @marcepires 2 ปีที่แล้ว

    Excelente! gracias Mister!

  • @KEVIN-nf9oh
    @KEVIN-nf9oh 2 ปีที่แล้ว

    Hello professor! Can the same service worker principles be used within a Browser-Extension to monitor a fetch call and do [some logic]? I'm partcularly interested because of the introduction of Manifest Version 3 in chromium this year. Thanks as always!

    • @SteveGriffith-Prof3ssorSt3v3
      @SteveGriffith-Prof3ssorSt3v3  2 ปีที่แล้ว +1

      I don't know what the level of support is for service workers in browser extensions for Chrome or Firefox

    • @KEVIN-nf9oh
      @KEVIN-nf9oh 2 ปีที่แล้ว +1

      @@SteveGriffith-Prof3ssorSt3v3 Ahh alright, no issues :)

  • @shushens
    @shushens ปีที่แล้ว

    Amazing video! I learnt a lot! I have a question though. If you have multiple tabs open, which are essentially independent instances of the web application you have built, I assume they are running on different processes. If they are using the same service worker, how does the connection between them look like? The service worker will be a thread in the main process and the JS logic for each app will run in a thread of its own process and they will talk to each other through Mojo or something?

    • @SteveGriffith-Prof3ssorSt3v3
      @SteveGriffith-Prof3ssorSt3v3  ปีที่แล้ว

      The service worker will be on its own thread and all the tabs will share a thread for the scripts on the tabs.

    • @SteveGriffith-Prof3ssorSt3v3
      @SteveGriffith-Prof3ssorSt3v3  ปีที่แล้ว

      Here is a Playlist about ways to communicate between tabs or windows and service workers
      th-cam.com/play/PLyuRouwmQCjk-hvtzQSrCSxBd4S0nOMh9.html

  • @frontend_ko
    @frontend_ko ปีที่แล้ว +1

    can i use this as a state manager like zustand or redux in react?

    • @SteveGriffith-Prof3ssorSt3v3
      @SteveGriffith-Prof3ssorSt3v3  ปีที่แล้ว +2

      You can build a state management script into a service worker using messaging but it's not really what they are intended for.

  • @leolowe22
    @leolowe22 6 หลายเดือนก่อน

    Hey! Thanks for the video, Just wanted to understand, The part where we delete the sw, so at one place it shows that its deleted and just below it still shows that its running and active at 17:21

    • @SteveGriffith-Prof3ssorSt3v3
      @SteveGriffith-Prof3ssorSt3v3  6 หลายเดือนก่อน +1

      The dev tools are not always completely accurate for service workers when it comes to updating the status. It's like there are different parts of the code that track different things and not all of them listen for the same events.
      The note at the top appeared saying that it was deleted. But the line with the green dot down below hadn't received the message yet.
      I've seen situations where the same worker is shown twice too.
      It may have to do with garbage collection of the worker. The connection between the page and worker has been severed but the actual script is still in memory. So, since it is still in memory the line with the green dot still thinks it is the current active worker, just because it was the most recent one, and it still exists, and it was activated at some point.

  • @ricardodesirat2590
    @ricardodesirat2590 2 ปีที่แล้ว

    Hi Steve
    Just out of curiosity, is there a special reason for having all the logic inside an object (const APP)?
    Thank you

    • @SteveGriffith-Prof3ssorSt3v3
      @SteveGriffith-Prof3ssorSt3v3  2 ปีที่แล้ว

      Namespacing is a great way to avoid naming conflicts with other code and libraries, it helps to organize your code, and I teach it as a first step towards using ES modules.

    • @ricardodesirat2590
      @ricardodesirat2590 2 ปีที่แล้ว

      @@SteveGriffith-Prof3ssorSt3v3 Thanks! Good to know. So, implementig it on everything is always a good idea? As well as the init on DOMContentLoaded?

    • @SteveGriffith-Prof3ssorSt3v3
      @SteveGriffith-Prof3ssorSt3v3  2 ปีที่แล้ว +1

      @@ricardodesirat2590 it is a good practice and will make you think about how you organize your code more. And it will help you transition to modules

    • @ricardodesirat2590
      @ricardodesirat2590 2 ปีที่แล้ว +1

      @@SteveGriffith-Prof3ssorSt3v3 Thanks, Steve! This is a true learning channel.

  • @USPSLaura
    @USPSLaura 6 หลายเดือนก่อน

  • @codingroom928
    @codingroom928 ปีที่แล้ว

    is there any way to communicate between different browsers like from chrome to edge or firefox?

  • @siddhant3852
    @siddhant3852 3 หลายเดือนก่อน

    Is this still relevant for today tech landscape, I want to use service worker for offline storage and caching some assets.

    • @SteveGriffith-Prof3ssorSt3v3
      @SteveGriffith-Prof3ssorSt3v3  3 หลายเดือนก่อน

      @siddhant3852 absolutely. Service workers are the core technology behind progressive web apps PWA.

  • @anushaavanigadda8124
    @anushaavanigadda8124 ปีที่แล้ว

    How can I use service workers with typescript in a nextjs app?

  • @norbertperka9231
    @norbertperka9231 3 ปีที่แล้ว

    hi Steve ,good tutorial but still doesn't work for me .I can't registered SW it testing on localhost ,don't know if webpack is responsible for this . Thanks Anyway for good explanation

    • @SteveGriffith-Prof3ssorSt3v3
      @SteveGriffith-Prof3ssorSt3v3  3 ปีที่แล้ว

      check for spelling of the filename, errors in the browser dev console, if another service worker is already registered for localhost in the browser application tab.

    • @norbertperka9231
      @norbertperka9231 3 ปีที่แล้ว

      @@SteveGriffith-Prof3ssorSt3v3 I unregistered everything ,that's what console return to me Uncaught (in promise) TypeError: Failed to register a ServiceWorker for scope ('localhost:5500/') with script ('localhost:5500/sw.js'): A bad HTTP response code (404) was received when fetching the script. I change localhost; was 8080 and enabled it for save though flag in chrome , not sure if webpack is messing or im doing probably somethig wrong , i tried many option what i found on MdM about SW
      BY the way thank You for replying for my comment

    • @SteveGriffith-Prof3ssorSt3v3
      @SteveGriffith-Prof3ssorSt3v3  3 ปีที่แล้ว

      If you are getting a 404 error and you are running a webpack build script then the change in path from webpack is definitely your issue.

    • @norbertperka9231
      @norbertperka9231 3 ปีที่แล้ว +1

      @@SteveGriffith-Prof3ssorSt3v3 thanks Steve a LOT, I knew it must be something with it I just can't sort it out ,will have to gig dipper in to it

    • @norbertperka9231
      @norbertperka9231 3 ปีที่แล้ว

      probably will try workerbox

  • @Turnables
    @Turnables 3 หลายเดือนก่อน

    Why am I now learning about this?

    • @SteveGriffith-Prof3ssorSt3v3
      @SteveGriffith-Prof3ssorSt3v3  3 หลายเดือนก่อน

      @@Turnables I would guess that you are learning about PWA

    • @NphiniT
      @NphiniT 3 หลายเดือนก่อน

      @@SteveGriffith-Prof3ssorSt3v3 It's actually a little more interesting. There is an experiment builder called Gorilla that allows one to write JavaScript to create custom components for the experiment. Now I'm trying to add a component to detect AI usage in respondents' text responses which requires me to make an asynchronous request. But all the lifecycle events are synchronous. So I was here because I was wondering if I could use a service worker to spawn a separate thread and have the life cycle method being called to wait for the service worker response before continuing. Basically, a way to call an asynchronous function within a synchronous function and have it wait for the async to complete before continuing 😫
      If you have any ideas, I will gladly take them. But this service worker approach seems to not be it

    • @SteveGriffith-Prof3ssorSt3v3
      @SteveGriffith-Prof3ssorSt3v3  3 หลายเดือนก่อน +1

      @@NphiniT sounds like you need a web worker or a shared web worker.

  • @whatappstatus6937
    @whatappstatus6937 10 วันที่ผ่านมา

    Please Talk Slow