presentation for Meet for IT: JS gathering by Bohdan Rusinka (JS developer at Binary Studio)

1. Cutting Edge
HTML5 API
To be used today

2. Bogdan Rusinka
Frontend Developer
at Binary Studio

4. The Extensible Web
Manifesto
Brendan Eich Alex Russell Paul Irish Yahudo Katz Dave Herman

6. Let’s go!

7. Notifications

8. What do we need for that?
❖ Notifications API
❖ Service Workers API
❖ Push API
❖ Web app manifest specification

9. Notifications API

10. Permission request
Notification.requestPermission( newMessage );
function newMessage(permission) {
if( permission != "granted" ) return false;
var notify = new Notification("Thanks for letting notify you");
};

11. Notification
var mailNotification = new Notification("Bogdan Rusinka", {
tag : "cute-mail",
body : "Hi, look at that cutie!",
icon : "https://www.royalcanin.com/~/media/Royal-Canin/Product-Categories/dog-maxi-landing-
hero.ashx"
});

12. Push API

13. Official documentation
The Push API enables sending of a push message to a webapp via a push service.
An application server can send a push message at any time, even when a webapp
or user agent is inactive. The push service ensures reliable and efficient delivery
to the user agent. Push messages are delivered to a Service Worker that runs in
the origin of the webapp, which can use the information in the message to
update local state or display a notification to the user.

14. Available properties and functions
❖ subscribe/unsubscribe
❖ getSubscription
❖ permissionState

15. Be Aware
HTTPS required Because Service Workers can expose man-in-the-middle attacks in an unsecured
system, they can only be registered on an HTTPS enabled domain.
Service Workers, Notification, and Push APIs must all be supported
Push Messaging service: Messages must be routed through a messaging service, such as Google Cloud
Messaging (GCM) service

16. Service workers

17. Register
service worker
<script>
if('serviceWorker' in navigator) {
navigator.serviceWorker
.register('/sw.js')
.then(function() { console.log("Service Worker Registered"); });
}
</script>

19. Inside service worker
self.addEventListener('push', function(event) {
console.log('Received a push message', event);
var title = 'Yay a message.';
var body = 'We have received a push message.';
var icon = '/images/icon-192x192.png';
var tag = 'simple-push-demo-notification-tag';
event.waitUntil(
self.registration.showNotification(title, {
body: body,
icon: icon,
tag: tag
})
);
});

20. Manifest file

21. {
"name": "Push Demo",
"short_name": "Push Demo",
"icons": [{
"src": "images/icon-192x192.png",
"sizes": "192x192",
"type": "image/png"
}],
"start_url": "/index.html?homescreen=1",
"display": "standalone",
"gcm_sender_id": "<Your Project ID Without the Hash>"
}

26. visibilityChange

27. Where to use?

28. How to?
1. document.visibilityState
2. document.hidden

30. Another way to notify user

31. Vibrate API

32. How to use it?
window.navigator.vibrate(1000);
window.navigator.vibrate([3000, 2000, 1000]);
window.navigator.vibrate (0);
window.navigator.vibrate ([]);

33. Android OK, Safari :(

34. Battery status API

35. Time matters

36. The Killers

37. What to do?

38. Events
❖ chargingchange — the device has changed from being charged to being discharged or vice
versa
❖ levelchange — the battery level has changed
❖ chargingtimechange — the time until the battery is fully charged has changed
❖ dischargingtimechange — the time until the battery is fully discharged has changed

39. Properties
❖ navigator.battery.chargingTime
❖ navigator.battery.dischargingTime
❖ navigator.battery.level
❖ navigator.battery.charging

40. Simple battery level check
battery.onlevelchange = function() {
var enableEffects;
enableEffects = (battery.charging || battery.level > 0.25);
}

42. Device orientation API.
Motion sensors

43. Motion sensors

45. Motion angles
alpha the direction the device is facing according to the compass
beta the angle in degrees the device is tilted front-to-back
gamma the angle in degrees the device is tilted left-to-right.

46. Device motion
accelerationIncludingGravity and acceleration

47. Example
if (window.DeviceOrientationEvent)
window.addEventListener('deviceorientation', function(eventData) {
var tiltLR = eventData.gamma;
var tiltFB = eventData.beta;
var dir = eventData.alpha;
deviceOrientationHandler(tiltLR, tiltFB, dir);
}, false);
}

49. Ambient light API

50. How it works?
Once captured, the event object gives access to the light intensity expressed in lux through the
DeviceLightEvent.value property.

51. Ambient light API example
window.addEventListener('devicelight', function(event) {
var html = document.getElementsByTagName('html')[0];
if (event.value < 50) {
html.classList.add('darklight');
html.classList.remove('brightlight');
} else {
html.classList.add('brightlight');
html.classList.remove('darklight');
}
});

53. What will you do?

54. Web speech API

57. Web speech API usage
var recognition = new webkitSpeechRecognition();
recognition.continuous
recognition.interimResults
recognition.onstart
recognition.onresult
recognition.onerror
recognition.onend

58. It needs Internet

59. Capturing audio and video

60. Why?
Get data from device

61. Capturing audio and video history
<input type="file" accept="image/*;capture=camera">
input type="file" accept="video/*;capture=camcorder">
<input type="file" accept="audio/*;capture=microphone">

62. Device
<device type="media" onchange="update(this.data)"></device>
<video autoplay></video>
<script>
function update(stream) {
document.querySelector('video').src = stream.url;
}
</script>

63. WebRTC
This document defines a set of ECMAScript APIs in WebIDL to allow media to be sent to and received
from another browser or device implementing the appropriate set of real-time protocols.

64. A little bit love code
<video autoplay></video>
<script>
var onFail = function(e) {};
navigator.getUserMedia('video, audio', function(localMediaStream) {
var video = document.querySelector('video');
video.src = window.URL.createObjectURL(localMediaStream);
video.onloadedmetadata = function(e) {
};
}, onFail);
</script>

65. Something like this

67. Gamepad

69. Gamepad object
var gamepads = navigator.getGamepads();
GamepadList {0: Gamepad, 1: Gamepad, 2: undefined, 3: undefined}
axes: Array[4]
buttons: Array[16]
connected: true
id: "Xbox 360 Controller (XInput STANDARD GAMEPAD)"
index: 0
mapping: "standard"
timestamp: 12

70. Gamepad API events
window.addEventListener("gamepadconnected", function(e) {});
window.addEventListener("gamepaddisconnected", function(e) {});
window.addEventListener("gamepadbuttondown", function(e){});
window.addEventListener("gamepadbuttonup", function(e){});
window.addEventListener("gamepadaxismove", function(e){});

72. Fullscreen

73. Why do we need it?

74. Desktop apps on Electron

75. What is available?
❖ 2 methods: requestFullScreen and cancelFullScreen
❖ 2 object document: fullscreenElement and fullscreenEnabled
❖ 1 event fullscreenchange

77. Pointer lock

78. Benefits
It is persistent: Pointer lock does not release the mouse until an explicit API call is made or the user
uses a specific release gesture.
It is not limited by browser or screen boundaries.
It continues to send events regardless of mouse button state.
It hides the cursor.

79. Properties
document.addEventListener('pointerlockchange', function(e){}
element.requestPointerLock();
document.exitPointerLock();
document.pointerLockElement