Mobile

Table of Contents

It used to be the case that I would have to prepare a specific set of notes related to doing live web types of things on mobile devices. Thankfully, this has changed a great deal. On Android, using Chrome or Firefox, you can do all or almost all of the same things with WebRTC and Web Sockets that you can do on the desktop version of those applications.

On iOS this has not been the case until recently. While Chrome exists on iOS, it is not allowed to use anything other than the built-in webkit rendering engine which makes adding some features that aren’t supported impossible. Fortunately, Apple has added support for WebRTC in Safari version 11 on both the desktop and mobile.

More Information:
Stackoverflow: Chrome IOS – Is it just a UIWebView?
Chrome on Android
Firefox for Android
Highlights of Safari 11.0

MOBILE SENSORS IN JAVASCRIPT/HTML5

mobiforge has a good series of examples using various mobile sensor data in HTML5/JavaScript.

Some Very Simple Examples (Now require HTTPS)

Device Motion and Orientation Permissions on iOS 13

Orientation support for iOS and Android Sample Code

function orientation() {
    //iOS
    if (typeof DeviceOrientationEvent.requestPermission === 'function') {
     console.log("iOS");

    DeviceOrientationEvent.requestPermission()
    .then(response => {
      if (response == 'granted') {
        orientationListener();
      }
    })
    .catch(console.error)
   }
   else
   {
     //not iOS
     console.log("Not iOS");
     orientationListener();
   }
}

function orientationListener() {
  window.addEventListener('deviceorientation', (e) => {
    // do something with e
    alpha = e.alpha,
    beta = e.beta,
    gamma = e.gamma;

    console.log(Math.floor(alpha) + " " + Math.floor(beta) + " " + Math.floor(gamma));
  })
}

More advanced examples