Transcript
Hello, France. Here's a very interesting problem I've recently encountered. So here, let's say I'm navigating the local host of Seat rails, uh, and I want to share a URL. Well, as I'm running it in a browser, I can just go with the URL and share it with whomever I want, or I can click on this native share button that would open a popup with different options of how I can share this URL. If I'm running it on a mobile app here I have, uh, uh, safari opened. I run s in a mobile app, and I have the URL. I can cope with the URL or I can, uh, click on the native share button. That'll open a model with different sharing options I can share in an app or whatever. But what if I'm running RELs as a, for example, PWA? Well, uh, here I've previously already clicked on, uh, add the app to home screen. So now I have, uh, RELs available as a PWA here. And you see there is no native share button like this one. And, uh, there is no, uh, UL bar I cannot copy with the URL to page. Yes, of course, I have, uh, previously manually added a link to copy with the UL to the clipboard so I can share it to somebody. But I want to have this kind of, uh, native, uh, popup model, uh, on mobile. And I want to have, uh, this kind of button on desktop. So how can I add a native share button to my application? Well, for this, I can use the, uh, browsers navigator share method, and we're going to implement it. And, uh, even if you are on, uh, PWA, you would be able to have a share button and it would open up, uh, this kind of model so that you can share, uh, URL to a page in your PWA, uh, with anybody you want. So, uh, let's, uh, go to our application and I'm going to create a new stimulus controller. I will create rails, generate stimulus, I will name it, share. Now, going back to the application, I will create open the share controller, and here we're going to have an action named, uh, share. And we're going to run navigator share. So, uh, share and we'll have navigator share. And we're going to share a URL. So URL will be, we need to pass in A URL, so we'll have a stimulus target, uh, no actually stimulus value. So it'll be this, uh, URL value. Uh, we don't need anything except of the URL. Actually, there are a few different pres that you can pass into this, uh, navigated the chair, but, uh, only the URL is supported across all the browsers, or at least should be supported. A few different other types of data that you can share are not supported in a few browsers. So, uh, we'll have this navigated share. And we need to add this, uh, uh, value. So static values, URL, that is a string. And now let's add a button and we can make this button available everywhere around our application. Let's, let's do it in application html, ERB, and above everything, we can say something like equals button two share. Uh, we not pass any URL, so nil. And we'll pass data controller will be share. Then, uh, action will be, uh, when we click on share by default, uh, the button for the action for button is click. So I will just say, um, share controller, share stimulus controller, and share action. Uh, now to make it a bit less confusing, let's make it click. So share controller, click action. So, uh, then click on this button. We're going to activate the click action of, uh, this share controller. And finally, we need, uh, URL value. So we'll have, uh, uh, share URL value equals request dot u rl. Now closing the data controller, and let's see if we display it, uh, here. Okay, let's turn the server bin dev. Okay, I have the share button. I will click the share button. And you see it does pop up this, uh, native, uh, share menu, but you see it still tries to load the, the page each time 'cause it's, uh, using the default button, uh, clear behavior. So we are going to prevent that by adding the prevent default e dot prevent, uh, default. Now I will refresh the page to reit, initialize the stimulus controller. And now the share button does not refresh the page. It only gives us this, uh, popup menu. Okay, let's, uh, try running this in, uh, mobile. I'm going to refresh the page here. I have the share button and it opens the, uh, native share model. Let's try run it in the local host, PWA. So I will refresh, oh, it doesn't work like this. Okay, let's try navigating somewhere. Okay, you have the, the share button. And you see even that, uh, we don't have the browser controls visible all around. We have this, uh, native share button, so it works well. Uh, let's try running this application in another browser. Here I have, uh, Google Chrome. So I will refer the page here, have the share button. And you see click cl the share button does nothing. So apparently this, uh, navigated the share. The share is not available in the this Chrome browser. So let's hide this button if the browser does not support this behavior. So I will say if, uh, not navigator share, uh, this, uh, element, let's say hit them equals true. Now I will refresh it here, and you see the share button doesn't pop up. If the browser does not support the share button. But, uh, on Safari, I will refresh again or try and never get into another page. You see the share button is visible. So that's basically it. I think it is, uh, important for you if you're building a TUR native mobile app. If you are building a PWA to still have, uh, such, uh, basic functionality as, uh, share, if you go to Instagram or any other Messenger app, uh, it is highly likely that you'll be able to share information from there. And the same way you can share different pages in your web application. So, thanks and see you in the next one.
8