Your phone can do that
from a browser?

Agenda

Today

1. 01Lights off, phones out
2. 02Your phone can sense things
3. 03Your phone has hardware
4. 04Native-feeling phone UX
5. 05Android vs iPhone, honestly
6. 06Game time
7. 07Takeaways & Q&A

Why this talk

We use about 5% of the phone.

No app store. No install. One URL.

02 · Senses

Motion: the phone knows how you move it

// iOS needs a tap first, then the same events as Android
await DeviceMotionEvent.requestPermission?.();

addEventListener('devicemotion', e => {
  const { alpha, beta, gamma } = e.rotationRate;   // degrees per second
  const speed = Math.hypot(alpha, beta, gamma);
  if (speed > 350) castSpell();                   // a wand flick
});

Try it: Magic wand duel · Shake battle · Tilt the ball

02 · Senses

Compass: which way is Marina Beach?

// Android: true north on a separate event
addEventListener('deviceorientationabsolute', e => heading = 360 - e.alpha);

// iOS: a non-standard field on the normal event
addEventListener('deviceorientation', e => heading = e.webkitCompassHeading);

arrow.style.rotate = `${bearingTo(MARINA) - heading}deg`;

Try it: Point to Marina Beach

02 · Senses

The microphone is a sensor, not just a recorder

const mic = await navigator.mediaDevices.getUserMedia({ audio: true });
const analyser = audioCtx.createAnalyser();
audioCtx.createMediaStreamSource(mic).connect(analyser);

analyser.getByteTimeDomainData(buf);
const loudness = rms(buf);            // blowing on the mic = very loud
balloon.scale += loudness * 0.12;

Try it: Blow to pop the balloon

03 · Hardware

The flashlight is a camera setting

const stream = await navigator.mediaDevices.getUserMedia({
  video: { facingMode: 'environment' },
});
const [track] = stream.getVideoTracks();

if (track.getCapabilities().torch) {
  await track.applyConstraints({ advanced: [{ torch: true }] });
}

That’s how the light show worked. iPhone falls back to flashing the screen.

03 · Hardware

NFC: read and write a ₹10 sticker

const nfc = new NDEFReader();

await nfc.scan();
nfc.onreading = ({ message }) => show(message.records);

// Write this page’s link. Anyone who taps it opens the site.
await nfc.write({ records: [{ recordType: 'url', data: location.href }] });

Ideas: event check-in, treasure hunts, a “tap for menu” table sticker

03 · Hardware

Bluetooth gadgets and a built-in scanner

// Read a smartwatch battery
const dev = await navigator.bluetooth
  .requestDevice({ acceptAllDevices: true,
    optionalServices: ['battery_service'] });
const gatt = await dev.gatt.connect();
// …getCharacteristic('battery_level')

// QR + barcodes, no library
const detector = new BarcodeDetector();
const codes = await detector.detect(video);

codes.forEach(c => log(c.rawValue));
// UPI QR, biscuit packets, tickets

04 · Native-feeling UX

Read the OTP straight from the SMS

const { code } = await navigator.credentials.get({
  otp: { transport: ['sms'] },
});
input.value = code;

Your code is 424242

@yourapp.com #424242

04 · Native-feeling UX

Small APIs that make a site feel like an app

05 · Android vs iPhone, honestly

Android Chrome gets most of it

• HTTPS or nothing works
• Start from a user tap
• Feature-detect, then fall back

07 · Takeaways

Before you reach for a native app…

1. Check the web first. Sensors, NFC, Bluetooth and OTP are a few lines of JS.
2. Build for Android, degrade for iPhone. Feature-detect every API.
3. Make it physical. Shaking, tilting and tapping stickers is what people remember.