iOS 3D Touch API using Javascript for Web App

iOS 3D Touch API using Javascript for Web App

Safari 9 supports it on desktop. See Responding to Force Touch Events from JavaScript in Apples WebKit DOM Programming Topics.

I cant find any documentation on using it from Safari 9 on iOS, though.

You CAN use force touch on BOTH iPhone and Mac. You can use the the JS library Pressure.js. It makes it really easy to get Force and 3D Touch values on iOS and OSX if you have an iPhone 6s or new Macbook with the new Force Touch trackpads. There is currently only support in Safari but hopefully more browsers will have support soon.

The syntax is really simple too, here is an example:

Pressure.set(#element, {
  start: function(){
    // this is called on force start
  },
  end: function(){
    // this is called on force end
  },
  startDeepPress: function(){
    // this is called on force click / deep press, aka once the force is greater than 0.5
  },
  endDeepPress: function(){
    // this is called when the force click / deep press end
  },
  change: function(force, event){
    // this is called every time there is a change in pressure
    // here the force variable passed in container the current pressure force
  },
  unsupported: function(){
    // this is called once there is a touch on the element and the device or browser does not support Force or 3D touch
  }
});

iOS 3D Touch API using Javascript for Web App

Related Posts

Leave a Reply

Your email address will not be published.