How to Use Capacitor Share with Ionic

[Music] what's up some money welcome back to in you quick win and today we're talking about the share API that we can use within our ionic app and especially with capacitor so capacitor has a core plugin for the share API which works kind of nice on a device but it's a bit difficult ayuh in the regular browser because on the web it's using the web share API which isn't available everywhere so we will look at three different scenarios today to make a regular share to share an image that we just captured and also to share a local file using a little plugin so let's do this so far i've created a blank new ionic application with angular and capacitor and i also installed the progressive web element since then we're able to test things on a browser as well although i'm not sure if the thing will actually work anyway good idea if you're planning to use the camera i want to give it a test we will take a look at this later for now let's also add the HTTP client module to the ethmoidal sins we will need this for our third option to share a local file once you're done with that you can also add to your main T as the following two lines which are loading the progressive web elements that we just installed and once we're done with this we can actually go to our home page and add three simple buttons so that's actually all the HTML we are going to write today just three simple buttons and three functions then we now going to fill out let's start with the most basic example because that's actually super boring it is the basic form of using the share plucking you can pass to this plug-in a title a text and a URL so you could now run this with ionic surf I will directly use the live reload so we can also see it on my device and also let's quickly talk about browser support as I said the capacitor share API on the web uses the web share API the problem is this chart is pretty red and the only green boxes you see our safari iOS Safari and Chrome for Android latest version well that is not really something we can work with so I will just show you how it would actually look like within Safari and actually to be honest I don't think it's the best way of sharing something on the web so this is Safari let's try the basic share it looks like this I don't know I I just know I don't really like this at all you see it kind of works it brings up my mail it usually inputs also the values perhaps my mail is a bit slow yeah check out the ionic Academy so that was definitely edit and once we take a look at this on a device it looks actually a lot better so on a real device we can tap the basic share and we get this share dialog right here let's try to open the mail and we see the subject lauren ionic fast and my text was headed right to the mail now that is I think for a mobile version of your application in a nice way to shower share that look again Safari doesn't really look that good within Chrome it's not even working at all so really limited support for the share API the share API also has a version 2 which is not really supported anywhere besides latest versions of Chrome which enables you to use a file array but since we want to make this as cross-platform as possible usually with ironing we can't stick to that solution as well but a simple way to for example share an image is actually to first of all copy it and then using the URIs not any base64 string or anything like this but the URI type and then calling the ship plug-in and using it for the URL now one problem with this approach again this approach will actually not work within the browser again so for browsers you really need to come up with a different solution for share it's actually kind of complicated I didn't expect this topic to be that complicated if you have specific requirements we will talk about that in the end again so this is really just a general share anyway if you want to share photos quite easily let's take a look where's my device there we go let's try the share image I can capture an image so nice image section again and use this and then it should automatically restart my application um well it was actually not my idea let's go ahead again okay there we go now we see the photo in here and I can once again open the mail and it would be a right inside my mail so that works actually kinda nice I'm fine with that share dialog so number one super easy share number two a bit more complicated because we have to get the image first you might also work if you are loading a local image file in here and pav pass the path right in here I just did it with the camera since this already returns the right type that the plug-in expect so you can't put in base64 data it might work if you're luring a file from the file system but it could be tricky in general now the third option is to share a local file for that case I added a simple test PDF file into the assets folder of my application you can just use whatever you want and then we will make use of a plug-in actually can we look at the github repository I think that's it there we go capacitor file Sheriff not too many stars but it's actually kind of updated already for capacitor 2.0 so that's nice you can go ahead and install it like this or just check it out on the github repository by told capacitor file sharer in order to make this work we need to take a little extra step so for reasons I'm not sure about we need to register this plugin for the web therefore we need to import right here which are not completely actually they are shell so nice we need these two imports in our app component and then we can call register web plug-in with a file share this might change in the future because I haven't seen this with other plugins I'm not sure if it's the standard for capacitor web plugins but I don't think so but anyway to make it work we need this approach once we got it in there we can actually use it within our files so let's go back and now we can actually also close this and make a simple request to our file and that's why we install the HTTP plug-in in the first place because using the HTTP plug-in from angular we can get a local file as a block and what we now need is actually base64 string so perhaps you already have one perhaps this would also work with the camera approach which could also return base64 but if you want to use a local file this approach would work great for you as well so you would get back result which is a blob and then I will well let's try to do this without making any typos so we can create a new file reader which will read our file so there will be dragons within reader on and actually it looks a bit different like this and then in the end you call Rita Rita as data your L the result that we got back from the HTTP client so all of this is really just to load the local file and to convert it to a base64 string that's really the whole idea of this approach and once you're in here we got the block data no we got the base64 data but we also need to split the string since it starts with like application blah blah blah slash anything and therefore we need to split the result and to do this we first of all grab the result and say a string because typescript what otherwise complain a bit about our implementation of this so to get the data we can now say result split and the comma and and take the first item of the array so again it looks like application PDF blah blah blah blah blah and then at some point the real data starts so we're splitting it and we're taking the part that follows that's the idea and now we can get back to the plucking that we just installed so that's the file Sara I'm actually not sure why it looks like this again normally you extract it so that could actually work file sure makes life a bit easier and did we get typings no okay no typing today for me well well well anyway to this plugin we pass the filename let's just call this test PDF the data we just created here because the short form of writing this is just having it once in there and the content type in our case will be application PDF and that's enough to share our file we can also add and a catch block if you encounter any errors that is of course recommended to do but let's see again I'm pretty sure this is not working in the browser or I think it's kind of working but it just downloads the file it's not really the idea of this plug-in or of sharing anyway but capacitor file well it's to download and share files yeah I'm not sure why it downloads the file but okay also quick edition for Android since for iOS we can use the plug-in we installed without anything else but for Android we have to go to Android app source main main activity or find it somewhere else and import our plugin that's basically always the case for any other capacitor plug-in so you add the import for the plug-in and then you go ahead and add a little snippet with add in here actually I think the original plug-in states that you should use something like additional plugins add that's not really true for all capacitor plugins it just looks like this and it works also like this they also have this override block I'm not sure if it helps our applications are not but I didn't see if any problem in adding it so simply add this block as well to your main activity save it and make sure you sync all your capacitor stuff to the native projects after installing the plugins so you can also use it on Android cool edition anyway the interesting part happens within our application so let's press the third button share file and then we see the document that is in my assets is now attached to this and I could also of course delete this and use can I use something like Twitter or so well apparently not anyway um why you I can't share perhaps it's a PDF that we can share to Twitter can I my image to Twitter or anything like like Facebook or Instagram okay I can at least share my image to Twitter so it's just about the plug-in and I guess I just destroyed everything in here or perhaps I have just tweeted this image could be possible but it's also quite big image okay Instagram share works that we see the preview once again so once again three options for sharing the simple option using the capacitor share the second option using capacitor share with file pass to an image or anything like this or the third option with the additional plug-in to share a local file or PDF CSV anything like this within your application once again everything is kind of limited on the browser so the browser support for all of this isn't really great I don't know when the Web API the share API is available everywhere nobody knows and also we still need to wait for word and 2 to be included until we can really pass files to the API then it would be really like perfect everywhere but so far this is what we can use if you now want to use something like share directly to whatsapp share directly to Twitter with a button in that case I think you have to fall back to the old Cordova plugins that we used it's no problem to use Cordova plugins with capacitors so simply install it with NPM and the ionic native wrapper and use it like usual but of course you know you can't use those Cordova plugins inside your web version of capacitor of the capacitor but it's alleged alternative if you want to have direct share to any other social platform if you just need this basic share go with capacitor and you'll be fine if you enjoyed this video please hit the like button and stay subscribe so you get notified about all the new tutorials quick wins and other F development and web development videos on this channel if you want to learn more about ironing with in-depth courses a community of like-minded developers so you can learn and build your apps faster you should definitely check out the ionic Academy which is my code school to help you with everything ionic with a huge library of courses material and the supportive select channel so we can get your app powered I hope you enjoyed this video I will see you inside the next video have a great day and happy coding Simon [Music]

Channel: Simon Grimm

Views: 7,966

Keywords: ionic framework, learn ionic, angular, ionic angular, ionic guide, cross platform, hybrid app, ionic for beginners, ionic course, ionic, cordova, javascript, ionic 5, learn ionic 5, ionic 5 for beginners, angular 9, ionic 5 tutorial, ionic 5 angular, ionic 5 course, ionic academy, ionic tutorial

Id: p7f6yamZxCk

Length: 15min 54sec (954 seconds)

Published: Tue Jun 23 2020