Add 3D touch quick actions to your Ionic app

Since the release of iPhone 6s and 6s plus last year, more and more users expect your app to have at least some sort of 3D touch support. A lot of the most popular apps have implemented the barest minimum: quick actions menu that opens when the app icon is deep pressed. Since you want your hybrid Ionic app to be able to fit in with the rest of the crowd let's see how we can achieve this really quickly and easily.

I wrote a wrapper for the Cordova 3D touch plugin that will allow us to just that with a few lines of code: ng-cordova-3dtouch

To install the necessary plugins open up your console and use
bower install ng-cordova-3dtouch
We also need the Cordova plugin
cordova plugin add cordova-plugin-3dtouch

That's all we need. Now, include <script src="lib/ngCordova-3dtouch/dist/3dtouch.js"></script> into your index.html and add ngCordova.plugins.3dtouch as a module dependency in your app.

Let's add the first quick action to our app:

                
angular.module('example', ['ionic', 'ngCordova.plugins.3dtouch'])

.run(function($ionicPlatform, $cordova3DTouch, $state) {
    $ionicPlatform.ready(function() {

        //Add a dynamic quick action with title "Saved" and a built-in "Favorite" icon
        $cordova3DTouch.addQuickAction('saved', 'Saved', 'Favorite', null, null, function() {
            //Navigate to target state when the quick action was pressed on home screen
            $state.go('tab.saved');
        });
    }

    });
})
              
That's all there is to it. The quick action will be available in the menu that pops up when the user deep presses on the app icon and tapping it will open up the app and take the user to the screen at state "tab.saved".

Now, if the default available icons (full list) aren't to your liking or if you want to use your own then drag a single-color .png image (atleast 35x35 pixels) to your Resources folder in Xcode.

Then, we'll use it like this:

                
angular.module('example', ['ionic', 'ngCordova.plugins.3dtouch'])

.run(function($ionicPlatform, $cordova3DTouch, $state) {
  $ionicPlatform.ready(function() {

      //Add a dynamic quick action with title "Frontpage" and a custom 'customicon' icon
      $cordova3DTouch.addQuickAction('frontpage', 'Frontpage', null, 'customicon', 'Latest posts', 
        function() {
          //Navigate to target state when the quick action was pressed on home screen
          $state.go('tab.frontpage');
      });
  }

  });
})
              
And that's all you need to add quick actions to your Ionic app. Check ng-cordova-3dtouch for more detailed documentation,

← Other posts