This is how you people start to manage url. Some of us start learning and some of these start to taking interest in it because these guys are waiting assignment writer and it is really mean for them to check what kind of instructions is shared for managing url.
There is a growing transparency between the web and applications. Users want a seamless experience when finding and using information on the internet.
Companies such as Google, Yelp and Twitter already offer this deep linking experience in their search results and mobile applications. Take the following for example:
<span class="pln">market</span><span class="pun">:</span><span class="com">//details?id=com.nraboy.otpsafe</span>
If you were to open the above from an Android web browser, it would open using the Google Play application instead.
Mobile applications made with Ionic Framework can leverage custom URL schemes without issue thanks to a great Apache Cordova plugin called LaunchMyApp by Eddy Verbruggen.
To get us started, lets create a fresh Ionic Framework Android and iOS project:
<span class="pln">ionic start </span><span class="typ">IonicProject</span><span class="pln"> blank cd </span><span class="typ">IonicProject</span><span class="pln"> ionic platform add android ionic platform add ios</span>
Note that if you’re not using a Mac, you cannot add and build for the iOS platform.
The next thing we want to do is add the plugin into our project. If you’re familiar with adding plugins to Apache Cordova or Ionic Framework projects, please pay attention because what we’re going to do is slightly different:
<span class="pln">cordova plugin add https</span><span class="pun">:</span><span class="com">//github.com/EddyVerbruggen/LaunchMyApp-PhoneGap-Plugin.git --variable URL_SCHEME=ionicapp</span>
Notice the --variable URL_SCHEME=ionicapp
we included at the end of the command. It is essential otherwise the plugin will fail to add. However, you can replace ionicapp
with whatever you’d like representing your application. If you choose to keep the URL scheme as ionicapp then you will be able to launch your application from any URL that starts like this:
<span class="pln">ionicapp</span><span class="pun">:</span><span class="com">//</span>
It doesn’t need to end there. You could listen in your application for various URL paths and parameters and have your application do various things depending. Add the following code globally:
<span class="kwd">var</span><span class="pln"> handleOpenURL </span><span class="pun">=</span> <span class="kwd">function</span><span class="pun">(</span><span class="pln">url</span><span class="pun">)</span> <span class="pun">{</span><span class="pln"> alert</span><span class="pun">(</span><span class="str">"RECEIVED URL: "</span> <span class="pun">+</span><span class="pln"> url</span><span class="pun">);</span> <span class="pun">};</span>
When I say globally, I mean outside any AngularJS method or controller. This is because the URL scheme will probably load and launch before the
$ionicPlatform.ready()
or onDeviceReady()
methods fire. The LaunchMyApp plugin is going to look for the handleOpenURL(url)
method.
Because the function is global it won’t be tied to any AngularJS. With that said, you wont be able to change states or do any fancy AngularJS stuff. To get around this you should set a local storage indicator. If you’re unfamiliar with local storage, you can check out a previous article I made on the topic. You might do something like this:
<span class="kwd">var</span><span class="pln"> handleOpenURL </span><span class="pun">=</span> <span class="kwd">function</span><span class="pun">(</span><span class="pln">url</span><span class="pun">)</span> <span class="pun">{</span><span class="pln"> window</span><span class="pun">.</span><span class="pln">localStorage</span><span class="pun">.</span><span class="pln">setItem</span><span class="pun">(</span><span class="str">"external_load"</span><span class="pun">,</span><span class="pln"> url</span><span class="pun">);</span> <span class="pun">};</span>
Then in your $ionicPlatform.ready()
or onDeviceReady()
methods you can see if external_load
has been set. If it has, then do something with AngularJS and clear the item from local storage.