Transcript from the "Share Button" Lesson
[00:00:00]
>> So right now we have a PWA that works on iOS, it works on Android, it works in desktop, and it works offline. So the PWA is kind of ready. But we still have some room for improvement. For example, let's see if we can integrate our code better.
[00:00:20] Of course, the opportunities are unlimited, okay? There are several APIs that we can actually use, there are APIs for background execution, but time is limited. So something that we can do quickly is to add a share. So because we are in full screen mode or standalone mode, remember that we don't have typically, on mobile devices at least, we don't have a browser navigation bar.
[00:00:46] So if we have content, such as the text that we are writing, sometimes we will not move that content out of our app. So creating a share action is actually a good idea. I'm here in material icons, the search, so we can actually search for an icon, and we have an icon with a name Share that we can use.
[00:01:11] So let's add a new button in our toolbar to actually share the contents that we have in our notes. Back in VSCode, I'm opening the HTML and I'm looking for the toolbar. I'm going to duplicate this line that has a button, Learn, and we're going to use, instead of Learn, Share.
[00:01:39] And the icon will be also share. And changing the ID to btnShare. So let's see that in action. So now, we can see at the bottom that we have two buttons, Learn and Share. And Share will actually trigger the native share dialog using one of the new APIs available for PWAs.
[00:02:00] But before, let's click on Learn. Learn will actually open frontendmasters.com. And because it's actually a URL outside of the scope, we can see that within our app, we have an inner browser with a URL bar at the top, and the same happens on iOS. So remember, every time you link to an external URL, you will get this inner browser experience.
[00:02:33] Now, let's go back to VSCode and write the share function. Opening app.js, within the DOM content loaded event handler, we're going to search, For buttonShare, and add a click event listener to it. And what we need to do here is to actually call navigator.share. This is a new API that might not be available on every OS.
[00:03:08] So we should be able also to check if the API is not there. And if it's not there, maybe we can show a message or just disable the button or remove the button from the DOM. So navigator.share receives an object with some data. It can have a title, such as I can use the name of my app for the title.
[00:03:31] Remember that in the manifest, we use Codepad. So we can say, Codepad. And then for the text, I actually need to go and take my notes. So what I can do, Is create a noteString here. NoteString, we can use map, or I can just do an old fashioned for loop here in the code.
[00:04:09] So I will start empty, and then I'm going to take for each note of note, I'm going to concatenate the new string, that would be the note. And maybe we can separate with a pipe or something. So this is just grades in a text. So this is actually pretty simple, you can use navigator.share, as well, to share files, also, or images, and also URLs.
[00:04:39] So you can add a URL, but from now I think it's good enough. And now, we're back in our mobile devices. If I click Share on Android, you can see it's opening the standard share sheet. And the same happens on iOS. So we have these kinds of integration all over the place to actually connect with different services in the OS.