Magento PWA Studio, 22 May 2020

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: PWA Studio Community Sync 22 May, 2020

Description

Zero Total Checkout, Service Worker Caching, Expired Payment Nonce, and Extensibility demos.

A

No worries at all all right shall we get started about 14 people here, I, don't know the normal welcome.

A

Welcome all you, cool cats and kitten.

A

Community sync today is Friday May 22nd and we have demos from Steven, with zero total check out and revamp with the serviceworker caching and expired payment nods. So Steven you want to kick us off all right sure.

B

C

As always, I'm extremely prepared for this demo.

C

So, just to give some background on this on this issue in the in the in the check out page we've been working on we're very close to finishing, but there was an edge case that we hadn't planned, for, which is that there's, what's called a Magento, a zero total check out and that's a configurable option.

C

So I don't exactly know what it means, but basically, if if there is a if the cart total is zero, there is a payment method that must be selected on the cart called free, and this is just sort of like a requirement. So, if the, if the, if the zero total checkout is enabled, then then the cart must have that value selected on it in the backend and it doesn't do it automatically.

C

So if you, if you're working through your you, know your you're working through an order and you end up with zero total through adding a gift card or through removing or having a gift card and then removing an item that reduces your total under the gift card cover them out, then the server doesn't do it automatically and we have to tell it to apply the free method. So this this ticket with quite a few changes.

C

You know as simple as it sounds: there's there's quite a few changes that were involved, but the the core of it is. That is that, whenever is that, we basically monitor through all the cart mutations that can occur and I can pull this up in the and then change. If it, oh, my Internet's working I go.

C

Slow am I lagging.

C

It's really slow, forgive up anyways. So so where was I so anytime? We make a mutation. We need to check to see that if free is now available- and that's because we have this this effect in the payment information component- that's listening to know whether or not free is available, and if it is, we need to automatically select it.

C

It's just sort of implied that it's the only available value, so I'll just work through happy path and show you how that works, and then maybe if anyone has suggestions or comments about things that I missed or didn't think about that'd be great, but just so just to give you an idea like I'll just work this as if I'm a user, so I'm have a gift card.

C

You know it's $120 and I like this skirt a lot but I'm gonna buy two of it. So we'll add those to the cart.

C

We'll go to our cart now and I'll enter my gift card. That I totally remember hope this works cool, so the gift card was added, totals now 116 proceed to checkout enter some information. Shipping information.

C

Free actually just for it just for the demo sake, let's just say that it, let's just say, fix the seal. This is the current option. So, right now the total was like 1/16 plus was $10 ship, no sorry 118 times 2 plus $10 shipping.

C

So we know we have the gift card applied from the cart page, but it's asking for credit card information and then I review my order. I have a debugger break point on accident, and so you get to the review view. I'll just make this a little bit bigger so that it's easier to see the demo and then, let's just say you know, they're like oh, it's 126 bucks. You know my gift card was only 120. How do I change this? How do I? What, if I, what? If I I'm like I?

C

Actually don't want two items, so maybe they click their back button go back to their cart. I know this is the workflow on the a word, but we're not trying to be them. So, let's just say, I remove the item and then I go back to checkout. Well, the it's still valid right. It's not as it's not a zero total checkout, but now, maybe maybe if the total. For some reason there was a rule, that's applied that makes shipping free payment.

C

Information information is not required because the total is now zero and you can't see that on the mobile view, but on desktop you can see that the total zero so anytime, the any time the the total chain is away from zero. We must require the card and any time we go back to zero. We must we must display free payment information to make it an allowable order, because if you try to place an order without setting that free method, it it fails, graphical tells us there is a problem.

C

So I know maybe on the surface is a really straightforward. You know, example from the UI perspective: it's just if it's zero, then it's then it shows no payment information required, but if it's, if it's more than zero, then require a credit card, but the logic to do that was kind of touchy because of the the implicit nature of applying this free payment method.

C

So yeah I basically had to test all the different ways that a user could get to this page with a zero total and then go back from having a zero total. You know, maybe they remove their gift card. Maybe this is actually pretty straightforward. If I just add you know, change the shipping method back and forth, but either way must work and they must be able to get back to their checkout page and have that if they have valid data, we want to make sure it's still the current valid state.

C

So hopefully, by the time this PR gets merged and I fixed all the tests. The checkout page will just it's one more use case that we'll be working on the checkout page, though I.

A

C

Really go into the code because there's a lot there, but if anybody has suggestions or thoughts, so I'd love to hear him just have.

D

A quick question when you said if they use free meta method, is that something that comes from graph QL? Is that a check that you have yes.

E

C

D

To show the payment or not.

C

So, yes, so that that so, first of all, just a second ago, I was showing the mutation. So all the mutations that affect cart that can affect the cart, total now returned available payment methods or they request that information in the response, all right and and so, and so we have an effect here.

C

Patient's, so so here here's the important effects. So whenever available payment methods changes, we reset the this is payment information. By the way, this is the talent for payment information.

C

The this section right here where a credit card is so anytime of available payment methods, changes the that section resets and this this is coming from graph QL, this available payment methods and then, if it's ever available, if it's in that, if that, if so so, there are other things that could make that method, the methods RH, but if free is available, then we have to automatically select it for the user.

C

So we we make this mutation and then we say we're done, and so that's what you see here when free so right now, if I looked at the graph kill, backend free would not be available if I queried for for what available payment methods were on this car.

D

So free is the code that you receive. That's a payment man yeah.

C

Yeah free is it so if I look, I can dig into that.

D

Was just wondering how he would work with a web payment or ease and I will pay just right now going to show credit cards? Yes, but yes, it's a.

C

Code, we haven't gone that far. We we, we hard-coded Braintree as the current only selection writers, also in this in this er I, made it so that you could have multiple.

C

Methods so inside payment methods- there's like component here well I have to I, have to I have to rewrite this. Basically, if you have an implementation for the code, you can just add it to this object, this map and then the payment methods component. Will the parent component will iterate over whatever available payment methods there are for like the current data and and then it will render each of them for you so right now we only three. So that's what you see, but there could be check money order.

C

There could be another option for PayPal, etc. So it's you know completely customizable and hopefully generic enough that people can add their own implementations as they want.

D

Okay, but as far as the free is it's just a code that you receive right. Yes,.

C

D

You use ax here. Yes,.

C

That was it. That's that's! Actually it's an interesting point. You bring up, because this is the topic we kind of talked about on the team during the review of this PR free comes back as an available method. So technically we check it here inside payment methods. If free had an implementation, we could list it here and we could actually have some display. It would just be another checkbox under here, because it's an implied like an it's it's a value that should be automatically selected.

C

If available, we don't have an implementation for it and we just have that effect that you saw in the parent payment information, but it's totally doable that we could add it as an implementation. As like we have with credit card for Braintree. We could have a free component that does the same effect of basically okay yeah I'm, just trying to find it. But if I look at a network make this update call, we can.

D

Make the response.

C

For the shipping money.

D

Shown in a poll go right in your applet tab, yeah.

C

I was trying to find it, but it's kind of this nasty to look at oh I was just showing here we made the we made the mutation to go to free and in the inside the available payment methods. Array free was there when I set the shipping method back to a non non zero value, making the cart three dollars. The available payment method does not include free, so, okay, so so yeah that this little snippet here available payment methods. This is required anytime.

C

You make a mutation that that could affect the the free methods we could possibly get around this by doing like a network, only call for this guy, maybe I, think there are some graph QL patterns that I haven't quite tried, but one easy ways just to make sure the cash is always the valid state for the whole app, which is what we're doing so, any all the mutations that make card mutations just say or that make card mutations that affect the value of the card. Just ask for this data. Okay,.

A

That's awesome thanks, Steven, any other questions for Steven check the chat, real, quick Lars, just much better to extend. Thank you cool nice, alright, cool thanks, Stephen rebonds! You ready.

E

E

B

Okay, thanks for joining the first one I would like to go with is the the checkout experience also because we have seen it just now in Stephens demo? Okay, this also includes the paving information. Can you see the screen right now? It should be trying to check out page yep.

A

Weakens it: okay,.

B

So right now, I am on the develop branch, let's into something I'll give a default payment method, okay, right now, payment nonce is generated and it has been uploaded to the backend. The problem is each payment. Nonce that has been generated has a TTL on it by default, it's three hours, but the padding can change.

B

The issue happens when the pavement nonce has expired and when you click the place order button, like maybe you come back after four or five hours, and that's when you click the place order button, the server fails because the payment loss is not valid anymore, like Braintree cannot identify it so right now we can emulate it. You're saying I'm using the upload tab. I gave the same cart, ID and I'm. Giving the invalid fare in dance. Just to you know, create the error.

B

As we do this, we can see that the mutation went through and right now, even though we don't see it here, because we haven't. If it's the page, the the payment nas has been expired and once you click place, order to simulate like a three-hour wait time. The server crashes, like you, don't see anything like it takes a while, and then you see a error message saying something went wrong, but it actually doesn't tell you what went wrong and the payment the nonce still stays here like the payment.

B

Somebody still stays here and that's an issue because the user needs to know what exactly went wrong with this particular figure. Handling invalid. The Planetree nonce I mean we're entering a place in the use check out a way for all the components beneath it, like the shipping information, shipping method and payment information to. Let them know of any errors that comes through and writing handlers into them, so they can handle each one of those because the place order happens at the use checkout level, but all these children they don't they don't contribute to place order.

B

So if an error happens here, you have to drill down, you'll, extend the error messages down to each one of these children and it will be handled in their own balance that there are multiple pieces in order right now. If we look at the examples.

B

Okay: let's look at the branch.

B

Okay, that's where we are right now and I have the watch so we're going on right now so yeah is, it done, looks like it is done. Building and let's clear the cache.

E

B

Awesome so we are back to everybody: let's enter the same information again.

B

B

Okay, so the nonce again will do the same thing will expire the payment. Now, let's look at the cart ID, maybe to have change.

E

To the fresh color doesn't pick up: okay.

B

Yeah right now, I'm doing the same thing now for this particular car. Today, I am invalidating the payment nods. Okay, that's done, and if I click place order.

B

The same error comes back through the network. It's still going on it's pending right now. For some reason: they're slow, okay, you'll, see that it gives the right information saying the transaction has been declined in the same happens like and the payment, since the payment ions is expired.

B

It will be invalidated and you'll be back to the step where you have to enter the payment information once again right now, this PR handles payment information error handling, but it also provides a way for other components like shipping method and shipping information to handle the errors as well and they will be handled in their respective peers. An example would be like you selected, a payment method and, like you, come back after fires and the payment method is not available anymore, so it has to be invalidated and licky of enter the payment method.

B

Once again, that is a valid example, the PRS still open. We had some conversations around that and if someone is interested, they can look at it and look at the PR and let you know make any suggestions of things that we have missed any questions around. That.

B

Thanks Annie Evan: does this flow bill applicable for registered user?

B

So right now we don't have the difference between a saved payment method for a attenti, kated user and unsaved made payment method for the guest user right now everything is the same for all of them. At this point it's there's no difference but yeah. It's a good question like once. We implement authenticated payment users at that point. I, don't think we'll have payment nonces that actually get expired. Yeah.

F

B

There will be paint, revolt and stuff, but if, for some reason something actually happens, something actually fails, it will still be caught. Okay, thank.

D

G

B

Good question any other questions: I.

C

Like your approach and the way that you set up the air handling for the child components, I think.

D

C

It really easy for people to extend an add-on yeah, they have extra sections, they want to add, or you know.

B

C

They want to do yeah.

B

It is still not approved the way we have done this. It's just kind of a fancy way that I came up with where I was.

B

Some reason get took this kind of slow today. Okay, the view we have the checkout error. This is the. This is a special class we have created. You know that extends the error message. So if someone wants to add, they can add functions to it like here, I've added has you know payment expired. So when this error is drilled down to the children, they can call like error.

B

Dot has permit expired and they'll know if this is a payment method, if this is a issue that they have to handle, for instance, you can, let's say you know what to do. They can add each shipping payment method and wherever they using it, they can simply do a door in shipping method, information, error or something like that, and if it's true that's when they handle that else, they can just you know, ignorant because it's analysis handle it is still not approve.

B

At this point, it's a PR that is open, so this might change, but the underlying idea of sending errors down to children and letting them handle it instead of check out place, handling it I guess will stay the same.

B

That way you want, you know a lot of the you know the use check out page and also the check out page component.

B

Any ideas, any questions in the chat.

A

Christopher mentioned, keep in mind that the vaulting of cards is configurable in Magento and not always wanted or enabled by merchants. Oh yeah.

B

Yeah, that's it that's a nice! You know solution at this point. We don't have world enabled because we'll have all the graphical coverage for authenticated payment methods, but once we do it definitely this is something you have to keep in mind.

A

Very cool all right, and then you actually have the next one. The service work.

B

A

Yes, okay and we.

B

Are done with the deck I've shared? Let's move to the service provision, okay,.

E

B

Okay dude: this is an error that Jordan brought up and I. Guess one more community members, I guess Nicholas they they did let most of the research around us, letting us know what the error might be. So what happened was the initial service worker that we have written? It is to catch the HTML file for ease of use. So once you move from, let's say your home page to the category page and then you move the category to product page.

B

If you don't have SSR and stuff, usually the hits table page is the same thing like. Even if you go with a different HTML file on the top like the URL, it tends to be the same HTML file. So, instead of fetching it all the time which usually takes you know a roundtrip for maybe hundred bytes or one kilobyte, and also a time involved.

B

We wanted to ship it directly from the service worker and then the service worker internally fetches it from the server, and it compares the both HTML files, one which is in cache and when it came back from the server and if they are different, because just just by file name changes or like the script files have changed its meaning. Like a new deployment.

B

The Service Worker sends a message to the UI saying a new version of the app is available, so the UI shows a toast and when someone clicks the toast app refreshes by getting the new version of the app that worked. Fine, except for use cases where, if someone loaded the app and then they haven't, used the app in a while, a new version of the app can come up and people never refresh the page and they go from homepage to a category. Page error.

B

Error comes up because there are certain files that are cached in the history file, but are deleted from the serviceworker and also the deployment because they are not available anymore. So you just made a new deployment. New client file, a new vendors, fine. So the app is to crash and Jordan was good enough to create a video around that.

B

Unfortunately, we cannot demo it right now, because our develop has the new set of code. The PR has been merged, but the good thing is, since we have the video from Jordan, we can actually look at it and see the exact issue that used to happen before fix in the sphere. I hope this works just fine and you know in Eng sorry losing's. First.

F

We need to start the surgery.

B

So right now he is starting the sobered and runs he goes there. It works fine, because, okay, so right now, I just switched off the audio, because I can give the voice all right see. They say that way.

B

So once he went there at this point, the HTML file has been catched and the, and if you look at the runtime renders inclined or JS files, they have a 200, which means this. When the I have loaded when the histamines file loaded, these files have been requested and they have been cached in the serviceworker.

B

But now he is going back to his code and he is making a change to simulate a new version of the app being deployed right now. He needs the change. He is bundling it, and once that is done, the server is not crashed here. If the server is still running all the service, all the server does is. When someone requests a file, it looks inside its filesystem and picks it up and returns it. So he doesn't need to crash the server. At this point, the right side. There is the bundler that's going on.

B

Okay, it's done. It has created all the new assets and right now he's going to the same app using a bookmark like he has a bookmark in once. He clicks it he's going there.

B

Titan of the app has crashed and that's because if you actually pay attention towards the bottom of the terminal, runtime dot, hash, Dodgers and client or heist audience, they have a photo for this happened, because the HTML file that was cached inside the serviceworker was returned first and then that serviceworker had links to these J's files, which are not available anymore because of a new deployment.

B

If the sir, if the user would have refreshed the page, this would have never not happened, because all the files would have been down with it internally and he is actually showing the same.

B

Like all the the instances of these two HTML, these two J's files have crashed, but we have fixed this using a box plugin, we upgraded the work box plugin to the latest version and in the latest version they kind of you know helps us using the web pack plug-in that they have what they do is once the backpack process is done, the bundling of it. It invokes it actually injects all the assets that it has ejected in that bundling process into the serviceworker fine. We can actually see that here.

B

So this is the bundle serviceworker file, and here we have a list and an array of all the J's files that have been affected from the pack. So what happens is we are telling serviceworker once it starts booting up in the in the browser, the first time before it even gets activated? It is supposed to download all these files and precache them into the service server by doing that, we have future-proofing.

B

Yet so, even if someone is is doing the same, like they opened the app and they haven't touched anything in a while and a new deployment comes in and they go to the new page. Everything that the new page needs has already been cached.

B

So they don't need to worry about, like you know, 404 errors, or you know, files missing and once they refresh the page, a new service worker will be downloaded with the new set of assets which were rejected by the new bundling process and the aptly lords and everything comes back to the same.

B

We can look at.

B

I have the same setup. I would call it a similar setup, like Jordan asked you I have handled, which is building discover for building the code right now and here once it started start the server and.

B

Okay, this is done right now. I'll do a onstage vignette.

B

Okay, the server is ready, let's go to the home page and just clear the storage for now, okay, I'll do the same thing: I'll just difference the page right now. If you see it actually downloaded a lot of files, you can also see that here in the free cash you can see that it actually downloaded at 35 files compared to just three or four previously, because all these files, all these mini chunks, were actually not involved in the hitch then we'll find previously, but now they are because they are being injected into the serviceworker.

B

So, even if we do the same, like go back to the example and lick delete as piece of code just to replicate a new deployment, I'll do the same and Leon there. The server is still running. I can just close the tab open that up. I have a bookmark here.

E

Okay, this is done.

B

Okay, it's done so I'm doing the same thing once I click Cubs not check this home, page, nine, nine one four! This is the server that is running right now. It won't find it never crashed and if you actually paid attention here, it has to download all the new set of files that were specific to this particular deployment. Like things that have changed and the things that haven't changed like the vendors file, which usually doesn't change, it shouldn't have been requested. Maybe a vendor's category, which is like a internal.

B

You know mini chunk of vendors, so we can see the same here.

B

All the files have been pre cached and if you look at the serviceworker, the new serviceworker is actually running.

B

This is a lot of information at once, but if someone wants to, you know understand like what is that exactly happening, I try to be explicit with all things that are happening, I've written it down here.

D

B

This peer, it might be merged, but you can still go over it and like if you feel there's something that we have missed, please let us know and actually thanks to zetlen. This is the third version of the app the third version of this PR that we have. The first two versions were very complicated, which I came up that, but Zeppelin came up with this, which is Basinger, even though it has 900 lines change. It's a very simple example: kudos to that.

G

A

Had a question actually is that list of files that it's going to precache just kind of going to ever increase as we keep releasing versions of PWA studio like is that ever do we ever throw any of those out like? Oh, this is way too old. I.

B

Guess it's the black box that takes care of this, then what happens is when you have to looked here. It actually daunted a lot of fights, but you still see 35 files for like 36, because index dot HTML has been added, but everything else like was the same because what happens is when the new service worker comes up? It makes the death between the pre cached manifest it had previously, and the pre cached manifest it has in the new one that understands what are the differences and deletes the unused fight.

A

So maybe a little more of a hit, the very first time someone comes because someone hits your PWA because they have to download all these files.

B

Yeah one idea that one actually reason: why is that Alan mentioned this? Is the nice ideas, because the whole point of serviceworker is or like a PWA is to work offline.

B

The previous instance that we had of the serviceworker it wouldn't support offline, because it would have downloaded your GS files like the main J's files, but it wouldn't have downloaded these mini chunks unless you into that page like this, these are the chunks that are like written into the code base of this client or JS file, for instance, so the serviceworker wouldn't even know how to actually catch them till it actually encounters this file and the crease through it, five leaves breach through the file. So.

A

B

Yeah, if we can make this offline, for instance the app won't crash, but it will still show you offline, because there are HTML files and like now the the graph kill it countries the graphical server, but the app won't crash with, because this add shell is part of a J's file that has cached here so yeah. That's the important thing with PW. So that's a nice thing that we're doing that now. We are caching everything out of that back.

A

That's very cool any other question. Thank you very much. I read about any other questions.

H

Just want to clarify that I'm glad that you told it when I helped you but like what happened was I was eager to figure out the web pack plugin for work box before it had this feature where it could integrate into the existing compiler and yet instead I just built the second one, and then I wrote some, like wit pack, integration and just added some complexity, and so we just had to unwind the stuff that I have made, though everyone should feel free to do that.

H

Because later you know, when we look at it, we might discover that things can get way simpler and so appreciated about for doing that. Code deleted is better than code written.

A

Yeah I did notice that in your PR you had like a thousand lines or something like that.

B

That's not needed anymore.

B

A

Very cool all right, well, I, think that's the content we have for today, Lars if you're still here, we don't have anything for community corner right. We only got about five minutes left you guys.

H

Want to see something: cool, yeah, okay, so Carlos.

H

Carlos, your sticker, so remember how you really like next Jas.

D

H

And there's some great advantage to it. So I was thinking like what, if there was an extension for PW, a studio that just made it do routing leg, necks, Jas. What? If that to have the the file structure, routing kind of leading question, because there is now I, have a repository called PW, a studio target experiments? And let me just get any business and.

H

I can just give me a second I just.

G

D

I stop the recording.

H

This okay, so now that I have pushed it. My target experiments repository, which is available here at Magento Research, will eventually contain kind of some examples of how you might add some functionality and then maybe pull request to pwace to do to enhance that functionality so that your plugin can work a little bit easier. I made an XJS routes plugin, so in your PWA studio. If you want to enjoy my plugin, you go to your env and you add this bill bus depths additional and Link it to your repository.

H

That's actually all documented here, and so now, let's say in my pwace studio: I had a folder called pages. This pages folder just has hello next mdj. Yes, so what? If I now went to hello next, stop T?

H

What if I restarted the watch server and then.

D

How does this overlap with upward with the upward configuration panel.

H

The upward configuration files so just to be clear, this isn't doing any special SSR. This is just giving you the ability to organize things in the way that you're familiar with. So now you have a pages directory. You can put files in there, I mean we're going to support more and more as time goes on.

H

Certainly, but the main thing about this is to demonstrate that you can have an external integration which is actually pretty easy to make which says alright when the WebP a compiler is booting up and asking for routes, you can just look through your pages directory and then push them into the routes and, furthermore, we went ahead and supported the dynamic variables. So there we go I've, also added a markdown plug-in so that you can just make a markdown page and it just automatically looks nice, so that page is being driven by this file.

H

And then we have a compare it's really simple and dumb, but we have cooler compared with a subfolder called left and a subfolder called right and those have brackets because they translate into parameters which Carlos is already familiar.

D

H

So we're just grabbing a couple of products, so let's say I just happen to know offhand that will compare media Levin and B d-10.

A

We got about one minute left, so that's it.

G

H

That out yep we are, we are actually grabbing dynamic elements from the URL because of the next Jas style. That's Carlos, I didn't forget about you.

H

Awesome we'll take it offline and talk more, but this is this is where the additional functionality happens. I hope that you enjoy.

H

We'll explain more offline, but there are a few other neat things in this experiment. Repository that works pretty well. I'll show you later.

D

B

D

Your routes into Page, folders, very cool, very cool, all.

A

Right, we got a run, that's it for today stay safe, honk, honk click like and subscribe.