iOS 3D Touch API using Javascript for Web App

Question

The iPhones 6s has 3D touch API for native apps. I was wondering if Apple has enabled 3D touch access from Javascript for a web app?

Just like we use standard touch events

element.addEventListener("touchstart", handleStart, false);

Answer 1

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

I can't find any documentation on using it from Safari 9 on iOS, though.

Answer 2

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
  }
});