Uw betrouwbare partner voor (mobiele) web applicaties
TwitterEmailRSS

PhoneGap Toast plugin

PhoneGap Toast plugin for iOS, Android and WP8

It’s always a good idea to show your mobile app user feedback about his actions. I have used the alert function of the Notification plugin a lot, but never really liked its blocking in-your-face behavior. You even force the user to click a button to continue using your app 🙁

Native Android apps have  a lovely little gem called a Toast and that’s exactly what this plugin tries to bring to PhoneGap apps. Now I can finally show feedback like ‘Logout succeeded’ or ‘Account created’ without annoying the user with a blocking popup, or showing an HTML message which may or may not be inside the viewport (don’t you hate it when your error message is rendered offscreen?). If you want feedback messages like this, use the PhoneGap Toast plugin:

PhoneGap Toast plugin on iOS

PhoneGap Toast plugin in action on iOS

PhoneGap Toast plugin on Android

PhoneGap Toast plugin in action on Android

Display text inside a native popup

Showing a Toast using some sensible default values would have been sufficient for most users, but I wanted to make it a bit more flexible than simply passing a message.. so let’s see what else we need.

Positioning the Toast

On Android, Toasts are often shown at the bottom of the app, but this may not satisfy all usecases. If you have a menubar at the bottom, it could block those buttons for a few seconds. Or what if the message is very important? Then you’d want to show it in the center of the screen. So I need the plugin to have a ‘position’ parameter.

Showing the Toast a bit longer

When you want to display more than a few words, you’ll want to show the Toast a bit longer. So I also need a ‘duration’ parameter. Since Android only supports ‘short’ (2 seconds) and ‘long’ (5 seconds), we have to settle with that. Note that you can use an arbitrary length on iOS, but I like uniform API’s.

Putting it all together: the Toast Javascript API

Now that the requirements are clear, it’s time to show the final API:

toast.show('Hello!', 'long', 'center')

Since there are only six options, I’ve added a few convenience methods:

toast.showShortBottom('I hit rock bottom..')
toast.showLongTop('I'm at the top of the app!')

What about PhoneGap Build?

Check out the plugin page and search for the Toast plugin (I would have provided a deeplink, but the URL changes with every update of the plugin).

PhoneGap share plugin for Facebook, Twitter and other social media

PhoneGap share plugin

Adding social media to your PhoneGap app is always a good idea – you can draw attention to your app by letting your users do the promotional work for you. All you need to do is adding share buttons for Twitter, Facebook and other social media to your app. BUT how does this work on PhoneGap.. and what about PhoneGap Build? Use this PhoneGap share plugin and you get stuff like this:

PhoneGap share plugin in action on iOS7

SocialSharing plugin in action on iOS 7

PhoneGap share plugin in action on Android

SocialSharing plugin in action on Android 4.4 (Kitkat)

Share text using the native sharing widget

Using this plugin, you can have your iOS or Android device open the native share widget, so the user can choose where to share the content to. For example, sharing a message ‘My message’ can be started by clicking a button:

<button onclick="window.plugins.socialsharing.share('My message')">share!</button>

Sharing a link

Sharing text is nice, but why not spice it up a little? Let’s add a link:

  share('My message',
        null,
        null,
        'http://www.x-services.nl')

Sharing an image

What about sharing an image? That’s possible as well. You can share links from the internet and from the local device. You can even share base64 encoded image which you just grabbed from the Camera!

  share('My message',
        'PhoneGap share plugin',
        'https://www.google.nl/images/srpr/logo4w.png', // check the repo for other usages
        'http://www.x-services.nl')

Sharing text, a subject, a link and an image together

Let’s combine all options and share like a boss! A subject can be used for the email client, but other apps may use it as well, but that’s up to the receiving app:

  share('My message',
        'PhoneGap share plugin',
        'https://www.google.nl/images/srpr/logo4w.png',
        'http://www.x-services.nl')

Skipping the share dialogue

If you don’t want your user to choose where to share to, you can skip the share widget and directly share to Twitter, Facebook, or other apps:

  shareViaTwitter('My message');

  shareViaFacebook('Message via Facebook',
                   null,
                   null,
                   console.log('share ok'), // success callback
                   function(errormsg){alert(errormsg)}) // error callback

  shareVia('com.apple.social.sinaweibo' // for options, see the repo
           'Message via Weibo on iOS',
           null,
           null,
           console.log('share ok'), // success callback
           function(errormsg){alert(errormsg)}) // error callback

What about PhoneGap Build?

Check out the plugin page and search for the SocialSharing plugin (it’s one of the most used plugin thanks to you all!).