• newer project
• service worker
• post message
• outer application
• url data
• fetch request
• web worker

Is everything, and they turned around thought they'd need you where we need to?

We got him on the spot.

Welcome back.

Welcome back.

Welcome back.

Welcome back.

Welcome back.

Welcome back.

Welcome back.

Always good spot.

Welcome back and a smile way, I think and I know you went to see you again.

Learn to me what this song is my favorite come back, never lead you.

All right, so welcome back.

My whole last, like, work session was kind of preoccupied because I noticed it was taking longer than normal to generate the Highlight clip.

I am like, that's weird.

And, so I went I looked at the logs and I will sing out.

An error from this one API like everything else seemed to go through, fine.

And I know it wasn't like the recording because I was able to download the recording from like the source and so and it said it's scented to Vimeo to be archived, but I didn't see it in Vimeo.

But I saw this weird error for this another API.

I am like, I noticed that a palace kind of acting kind of funny because I wasn't really getting information about like, maybe it's just Hiccup or something.

And then I went to login back into that dashboard.

For that API that endpoint and yeah, apparently my trial expired.

And so, yeah, I had to go and put in like a card and everything.

So we will see how much it cost.

But I have been using it for a while almost since the beginning.

So I am like, 10 weeks in And so because it's based on certain things, so I can't it's a pay-as-you-go and so only do this like once a week twice a day for that one time a week.

So we will see because based on different things and time and all that stuff other stuff.

So, but it's weird that it would like cause an error for everything else that I was doing.

So, I am going to go back and look at the code.

I wrote, Because odd because everything should be independent.

So it shouldn't.

It shouldn't have messed with the uploading to Vimeo.

That's weird.

So I just have to do it manually and so everything is working now, whatever.

But I still didn't get the Highlight clip to tweet out.

So I will see.

Hopefully by actually putting a card on there and actually having a working API, it will fix everything.

So we will see.

That's super weird, though.

I have to go back into the code as some other point, but it's working.

It was working fine, you know, everything works fine.

As long as, you know, you have your apis are actually working in your credit your like you have enough credits.

Basically, everything works fine.

As long as you have enough credits.

So alright, so yeah, that was odd.

So I basically spent the whole time like, why is this thing not working?

It's weird.

And I am looking through logs and stuff and try for yourself up web development.

Okay, so speaking of web development, so I wasn't able to actually like spin up a scaffold for my new project, but I have been doing research on it.

And so, whenever I started like a new side project, I kind of like right out like a documentation on like what it's going to do with things that may need anything.

I may run into and kind of like think through it.

And so and it's cool because it All my projects seem to kind of like go together somehow, so I can always take something.

I learned from a previous project onto a newer project.

And so like I said earlier, I was I made the my previous side project the office scheduling app.

I made it just a little bit of a pwa to the point where we re like its kind of available offline will tell you if you're offline.

Ida scheduling app kind of needs to be online so you can be able to schedule and see everything, but neither there.

So it will tell you if you're offline and you're able to actually install it on your device.

So you don't have to open up the browser.

Go to the website.

You just click the icon in your home screen and you're good to go.

So that required the service worker.

And so service, worker is kind of like the brains again and so for this.

New side project, the service worker is going to play an even more important role.

And so what I needed to be able to do was to communicate between the actual application and the service worker because the thing I need the service worker to do, like the browser may not be open.

So normally I would do it on the browser, but the browser may not be open.

So that's why I need the service worker, which is kind of always running in the background to accomplish two things.

That the browser would normally do.

So I need to be able to communicate like certain tasks from when the browser is open, unless the service worker know whether or not to do stuff, pretty much.

So when the browser is closed, the service worker now is known what is job is to do.

So I need to be able to communicate between them.

And, so I basically just looked up on Google like how to communicate with the service worker or something like that.

And, so I came across some stuff, and so I went to mdn the Mozilla developer Network web docs and me share my screen real quick.

So this guy like this, the journey I went down and I think it may work because I have from what it looks like in the example code looks like it may work now, so I was going to serve the project and kind of like validated, but we will see.

Alright cool.

So we're going to do this thing.

Basically long story short, post message.

And it's funny because I use post message before for another application.

Like, another side project I did, but it was for some totally like use it differently in a different context, which is kind of cool that it's the same thing, but can be used in a different context.

So let me stop blabbering.

Alright, so here's post message.

Now the previous time I used it was for an iframe.

And, so I was taking this iframe from another site.

Right, but I needed the information that iframe was putting out.

I needed to be able to listen to it in the surrounding application at iframe was in so it could do certain things.

So I post message.

So the iframe was doing post messages out.

And so with that, I was able to listen on the iframe for those messages just like a regular, like add event listener.

I think it was.

And I was able to depending on what the message was.

Does correspond like respond to that in the outer application, which is like, a totally different domain?

So, I thought that was pretty cool.

And to see this now.

I am like, oh, that's kind of awesome.

So I think this will hopefully help out.

So I am going to actually copy the link to this first one to the client post message, right?

And so I see the link.

All right, so the post message method of the client interface allows a service worker.

So I think that's probably why it came up in the search terms, to send a message to a client where the be windowed another worker or a shared worker.

Right?

The message is received in the message events on Navigator dot service worker.

So what happens is, this is kind of the opposite of what I wanted, but it was a good start for Come back.

I post message.

Maybe I could do that.

So this is from the service worker to the site, the client, right to the browser.

And so that's pretty cool.

So kind of went through here.

So as an example, so here is from the server.

So sending a message from a service worker to a client.

So, in your service worker, you have this code, right?

And so you're waiting until it's, you have an event that It's like and then exit early?

If we don't have access to the client, so you check and see if you have access to the client.

If not just return get out of there.

But if you do have it you can get the clients from by doing this.

But then exit early, if we don't have access, if you don't get the client's, yeah, okay, so you don't have access but then if you have access but you still can't get it for some reason returned.

Okay?

Again, I haven't done any of this.

This is just all the research and the random.

So, again, if anyone knows anything more about this, that's why I am doing this kind like a lightning talk.

And so, this is where I am at now.

So if, you know, of a better way, please let me know.

Alright, and so then we send the message to the client.

So, Here we have access to the client and here we can actually get the client.

So then here we can do the post message and just like, hey, I just got to fetch from you.

So you listen for a fetch event and then you're sending back the request URL, and the message.

They're cool.

Now, back on the actual client.

You're getting the message, which is this here from the post message and their console logging.

Actual data that message, which is this message here, and the URL data that URL, which is this URL here.

So it's kind of from the client.

It's sending a fetch request, which that's what the server work is server service worker.

Does it kind of like listens like everything?

All the traffic kind of passes through that.

And so depending on how you have your service workers set up any like requests, like you can send, so, it's quicker.

You can send back a cached, like a cached response.

Sponge that you have before or you can just let it go through to the internet and so it can pull something Fresh So it all kind of depends on what you have there.

So what this is doing is from the client is sending a fetch request.

The service workers listening for that.

Fetch request.

And it's like, all right, cool.

Let me send a message back to the client, let you know that I did get the fetch request and then this is what the URL was basically.

So that's that right, then, that led me to the worker post message.

Right?

Just kind of like doing more research.

I think I search more, for instance.

I knew about postmessage now.

I think I did like service worker, post message and then it took me here.

Now, this Is of the worker, right?

And so this is sends a message to the workers Interscope.

So, basically, we have different kind of workers.

There's like web workers service workers and I think another one I like shared or something like that.

I think again, I am not to sure about all this but this is kind of like what my I am thinking.

So correct me if I am wrong, but oh, let me post a link to this one as well.

So I am gonna copy and so that we can you go.

It's check out everything I mentioned in the archive.

All right.

So now, this kind of got me closer because then I am able to send the worker, and I am thinking service, worker the message, right?

And so, I am going through here and it's like, cool looks like it.

So here, the following code snippet of the creation of a worker object.

So this is in your client, your browser.

You're creating a worker, right?

So and workers are Basically, like web workers and I guess the same thing as workers.

I don't know.

What will they do?

Is because you have like that main thread in the browser.

So if you're doing anything that's kind of like heavy as far as computational, you kind of block that main thread.

So what you can do now is with the worker, you can take that computational heavy thing and take that to the side.

It's like a side worker.

So that does its thing while the main thread can still do it what it needs to do.

And then when that's done, Lll, send a message like hey, I am done.

Here's the information.

So that's where I think this is doing.

So you're creating a new worker and using the worker does JS.

I think it shows the file somewhere.

And then on the first change is something listening for your posting message with the first value.

Second value, and console logging message posted to the worker and then the second change, you're doing basically the same thing.

And so, let me show you the actual thing here.

So, this is the example.

Like, when you click the simple worker example, you get this.

And so what this is doing now is like, it's taking like the multiplication of two different numbers putting that to a side worker and calculating that out and then posting a message back with the calculation.

And so let us say seven.

Times.

So you see right here.

So on that change on this first one message posted to worker and the worker is saying, message received from Main script, which is on here on the client.

And then it says, the worker posting message back to the main script.

And then the message received from the worker.

So this is the client, the browser that we're typing stuff in is the workers say cool.

I got the message.

Thanks, then it's sending a message, back to the client and the client.

And the worker is sending a message back, which is this one?

And then the quiet saying, cool.

I got the message from the worker.

All right, and so when we you should see something similar when you do, multiply the second number.

And then, so when I move this is going too far as on change and then you see bam, it does the same thing.

And so it, then the receive it comes back with 42 when this was a 0, what does it say?

Hold on?

Yeah, so that's why it was 0 because it took the two values.

So, yeah, that's why it's zero.

So when I put in seven and it changes, see, it sends a 7 and the 0 multiplies it together on the worker comes back with a zero, but then what I put in the sea.

X since both, the 7 and the 6, and then comes back with 42.

So it's 77262.

The worker.

The worker, does the multiplication, guesses the answer and sends that back to the client to be displayed here.

That is kind of like what I am looking to do except when my new project is step with the web worker because again, this browser has to be open for that to happen.

I am thinking I could do the same thing with the service worker.

Sending a message.

And, so I did some more research, and I was like, all right, cool.

Kept digging.

Keep digging.

Oh, by the way, I am Gonna Give You All some more time because yeah, because we're a bit over that.

Then I found this article how to communicate with service workers.

So that's pretty much everything and it gives more ways.

So there's like the message channel, the broadcast API.

And what we just went over like the client API, I think what we did.

And so now there's a bunch of different ways.

So compared for Two-way, communication.

So I am going to read through this article, some more, and I am thinking, and then use that based on what I have seen previously from the Mozilla.

Developer networks.

Take all that and try to come up with my own solution or something.

So, so this was pretty cool to see.

So, shouts to Felix GE chao-ge Chow now and again, I am going to post a link to this so that anyone can check it out.

And video archives.

And yeah, that's where I am at now.

Hopefully let me stop sharing, so I can talk to y'all.

I die.

So now hopefully with me putting my card, so I can get more credits and you know, get my that API working again.

I am hoping that I won't have any more issues with things not look because it's working fine.

Like I did nothing.

I was like, this is so weird.

Why isn't that Working and yep?

Sure enough the trial expired.

Like I ran out of trial credits.

I guess it would have you.

So it's a cool service and I want to support because it's like a smaller company.

And so yeah, so, but we will see how much it cost.

So we will see you then in a month because it's like time-based depending on how long videos are or what have you?

So I don't think it should be too bad because like I said, the initial credit lasted a long time, so we will see.

But yeah, so that's where we're at now.

Now, I am going to give you all again.

We will get some more.

Give you all some time to get back to work.

And so this is the final break session that's coming up.

So if anyone wants to show anything, cool, and what I just did is kind of like an example of what you would normally do in, like, one of those show-and-tell things just kind of like, you know, like, what Rabbit Hole, you went down, and what you found out and what you learned and stuff, stuff like that.

So, Pressure or anything?

It's super like just chill, I guess and kind of stuff.

So yeah, so if there's not, then we're going to take a look, if there's no show-and-tell going to go and take a look at an artist's website that we have been playing on the radio show and stuff.

So, yeah, and then maybe you, like, maybe you like them as well.

So there we go.

All right.

So cool.

I am going to head out of here.

So let me make this thing full screen and then start screen share, definitely.

To make sure to have audio.

I am really hoping that between the time of me putting in my card to get my account working again, and now that everything went through because I think it's the same API key.

Does.

Another thing you have to watch out this is, so I am really hoping it's the same API key and that I don't have to change anything and hope everything works.

So we will see.

We will see the joys of making random side projects.

So again, thank you all.

I got that worked out.

Cool.

And yeah, Chazz to upon EB and new Jabez the track is called.

Thank you.

All right, we're gonna be out of here.

So, 15 minutes after our much progress and productivity to you.

Alright, wish you that.

All right.

Let us go.

Where's the mouse?

Okay, here we go.

Thanks.

Y'all.

See you soon.