Using modern browsers, developers can now create web apps with capabilities that were only possible in native or hybrid apps. Web apps can now access hardware devices such as microphones, cameras, GPS, accelerometers, VR displays, and many others, without using any plugins. Using Web Bluetooth, web app developers can now communicate with nearly any type of hardware device. In this session, we’ll survey a sample of the W3C standards that give developers access to next-gen capabilities via web apps. Topics will include Service Worker, Push API, WebRTC, Web Bluetooth, Web Crypto, Web Speech, Web Notifications, and others.

1. A Look Ahead: Surveying Next-
Gen Modern Browser
(hardware/native) APIs
Shikhir Singh
@shikhirsingh

3. Current: Offline + Native/Hardware Access via Hybrid Apps
3

4. Common Considerations: Choosing Native, Hybrid, or
WebApp
Performanc
e
Hardware or
Native
Deployment
& Access
Connectivity

5. Performance
Connectivity/
Offline
Deployment/
Access
Hardware
Native ✓ ✓ ✓
App Store / Home Screen
✓
Hybrid ✓ ✓
App Store / Home Screen
✓
WebApp
✓
✓ ✓ ✓
Links / Home Screen
✓

6. Performance for Enterprise Apps

7. Desktop Apps: No Obsession in Enterprise for Native Apps
Vs

10. Hardware Accelerated Animations and Transformations

11. Performance
Connectivity/
Offline
Deployment/
Access
Hardware
Native ✓ ✓ ✓
App Store / Home Screen
✓
Hybrid ✓ ✓
App Store / Home Screen
✓
WebApp
✓
✓ ✓ ✓
Links / Home Screen
✓

13. W3C Development Process
Internal Draft
Public Working
Draft
Last Call
Announcement
(Working Draft)
Call For
Implementations
(CR)
Call For Review
(PR)
Standard
Web Incubator
Community
Group Charter
Abandoned

14. Example Dead Spec - FileSystem API
• Creates Sandbox Filesystem that a web apps can navigate around
• Let’s apps have offline storage features that involve large binary blobs
• Cannot access file via file://
• W3C Spec Status
- Implemented by Chrome, Opera, and Firefox
- Opposed by Edge and Safari
- Result: Dead Spec

15. Progressive Web Apps – Current Key Technologies
• Web Application Manifest
• Server Workers

16. {
"lang": "en",
"dir": "ltr",
"name": "Super Racer 3000",
"description": "The ultimate futuristic racing game!",
"short_name": "Racer3K",
"icons": [{
"src": "icon/lowres.webp",
"sizes": "64x64",
"type": "image/webp"
},{
"src": "icon/lowres.png",
"sizes": "64x64"
}, {
"src": "icon/hd_hi",
"sizes": "128x128"
}],
"scope": "/racer/",
"start_url": "/racer/start.html",
"display": "fullscreen",
"orientation": "landscape",
"theme_color": "aliceblue",
"background_color": "red”
}
Web App Manifest
• Provides Metadata for PWA
• Unique Features Features
- Short Name
- Lock Orientation
- Create Standalone and Full Screen apps
- Splash Screen
• Latest working draft contains new
features’
• Web App Manifest Generator

17. Service Worker
• JavaScript File that run in background
• Enables Modern Capabilities
- Caching
- Push Notifications
- Notifications API
• HTTPS only

18. Service Worker

19. Web Push API
• Used inside Service Worker
• Send upto 4 kilobytes of data via Push
• Server must encrypt Push data, which is decrypted by browser
• Action Buttons

20. Web Push API - Client
Subscribe
Send Subscription
ID to Server
Client Adds Event
Listener for “push”
On Push, Process
and Notify User via
Notifications API

21. Web Push API: Server-side Push
Endpoint Service Worker

22. title = “Credit Card Fraud”;
options = {
body: “Did you tip 133% at Mongolian BBQ?”,
icon: "images/ccard.png",
vibrate: [200, 100, 200, 100, 200, 100, 400],
tag: "request",
actions: [
{ action: "yes", title: "Yes", icon: “yes.png" },
{ action: "no", title: "No", icon: “no.png" }
]
};
serviceWorkerRegistration.showNotification(title,
options);
Notifications API
• Used with Push to inform user
• Must get Permissions from User

23. Offline Access
• AppCache API – Not great for multipage sites
• Service Worker

24. Web Assembly – Use Cases
• Platform Emulation (DOSBox)
• Language Interpreters and Virtual
Machines!
• Remote Desktop
• VPN
• Encryption
• Fat Clients for Enterprise Apps
• Hybrid Native Apps on Mobile Devices
• Speed for Existing Frameworks
• Images / Video Editing
• Games!
• Peer to Peer Applications
• Music Apps
• Image Recognition
• VR & Augmented Reality
• CAD, Education & Science
Visualizations

25. someElement.addEventListener("webkitmouseforcedown", enterForceClick,
false);
someElement.addEventListener("webkitmouseforceup", endForceClick,
false);
someElement.addEventListener("webkitmouseforcechanged",
forceChanged, false);
3D + Force Touch API
• Force Touch Trackpad
• iPhone 6+

26. navigator.geolocation.getCurrentPosition(showPosition);
GPS
• Geolocation
• Geofencing (likely abandoned)

27. let faceDetector = new FaceDetector({fastMode: true,
maxDetectedFaces: 1});
let barcodeDetector = new BarcodeDetector();
barcodeDetector.detect(theImage.then(detectedCodes => {
for (const barcode of detectedCodes) {
// barcode.rawValue
}
}});
Accelerated Shape Detection in
Images
• Hardware Accelerated Shape
Detection
- Faces
- Barcodes
- Custom Shapes

28. Web Share

29. navigator.share({title: 'Example Page',
url: 'https://example.com'});Web Share
• Allows sharing text, URLs and images
to arbitrary destinations of User’s
Choice

30. Web Crypto
• Asymmetric
• Symmetric
• Hashing
• Algorithms
- SHA
- AES
- Elliptical Curve
- Diffie-Hellman
- RSA
- PBKDF2

31. var recognition = new webkitSpeechRecognition();
recognition.continuous = true;
recognition.interimResults = true;
recognition.onstart = function() { ... }
recognition.onresult = function(event) { ... }
recognition.onerror = function(event) { ... }
recognition.onend = function() { ... }
var utterance = new SpeechSynthesisUtterance('Hello’ +
‘SenchaCon');
window.speechSynthesis.speak(utterance);
Web Speech API
• Recognized and Transcribe Human
Speech
- Choose Language and dialect
• Speech Synthesis
- Pick Voice
- Volume
- Rate
- Pitch
- Language

32. window.addEventListener(“deviceorientation”, handle, true)
function handle(data) {
var absolute = data.absolute;
var alpha = data.alpha; // Direction of Compass
var beta = data.beta; // Front or Back tilt
var gamma = data.gamma; // Right or Left lilt
// Do stuff with the new orientation data
}
DeviceOrientation API
• Access to Compass
• Access to Gyroscope
• Support: Edge, IE 11, Firefox,
Chrome, Opera, iOS Safari, Android
Browser, Chrome for Android

33. window.addEventListener(“devicemotion”, handle, true)
function handle(data) {
var acceleration = data.acceleration;
var accelGrav= data.accelerationIncludingGravity;
var rotationRate = data.rotationRate;
}
DeviceMotion API
• Access to Accelerometer
• Support: Edge, IE 11, Firefox,
Chrome, Opera, iOS Safari, Android
Browser, Chrome for Android

34. let sensor = new ProximitySensor();
sensor.start();
sensor.onchange = event =>
console.log(event.reading.distance);
Proximity Sensor
• Used in mobile devices to turn off
display when in proximity of human
ear or cover

35. 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');
}
});
Ambient Light Sensor API
• Measures light to conserve battery

36. document.addEventListener('copy', function(e){
e.clipboardData.setData('text/plain', 'Hello, world!');
e.clipboardData.setData('text/html',
'<b>Hello, world!</b>'); e.preventDefault(); // We
want our data, not selection
});
Clipboard API
• Actions
- Copy
- Cut
- Paste

37. navigator.getBattery().then(function(battery){
console.log(battery.level);
});
Battery Status API
• Check Battery Level
• Events
- onchargingchange
- onchargingtimechange
- ondischargingtimechange
- Onlevelchange
• W3C Candidate Recommendation

38. navigator.nfc.requestAdapter().then((nfcAdapter) => {
adapter = nfcAdapter;
adapter.onmessage = onMessage;
};
function onMessage(event) {
var data = event.message.data;
};
Web NFC
• Near Field Communication
• Chrome: In Development
• Firefox: Support

39. navigator.bluetooth.requestDevice({ filters: [
{ services: ['battery_service'] }
]
}).then(device => { /* ... */ })
.catch(error => { console.log(error); });
Web Bluetooth
• Activate Bluetooth
- chrome://flags/#enable-web-bluetooth

40. var request = new PresentationRequest(presUrls);
request.getAvailability().then(function(availability) {
handleAvailabilityChange(availability.value);
}
Presentation API
• Present to External Screen
- Projector
- TV

41. navigator.bluetooth.requestDevice({ filters: [
{ services: ['battery_service'] }
]
}).then(device => { /* ... */ })
.catch(error => { console.log(error); });
Web Share
• Activate Bluetooth
- chrome://flags/#enable-web-bluetooth

42. window.addEventListener("gamepadconnected",
function(e) {
console.log(”Connected at index %d: %s. %d buttons,
%d axes.", e.gamepad.index,
e.gamepad.id, e.gamepad.buttons.length,
e.gamepad.axes.length);
});
Gamepad API
• Near Field Communication
• Chrome: In Development
• Firefox: Support

43. Summary
• Web is gearing up to take on Native
• Performance Discussion is irrelevant for most apps
• Google Chrome is leading the way in implementing new technologies
• Nearly all hardware common mobile devices will be accessed easily
• Web Apps will be more stable than Cordova due to better plugin ecosystem
• Success will depend on adoption by all browsers
• Ext JS will incorporate new technologies and will help you manage browser
differences

44. Resources
• Progressive Web Apps
- https://www.udacity.com/course/intro-to-progressive-web-apps--ud811 (FREE Course!)
- https://developer.mozilla.org/en-US/Apps/Progressive
• W3C
- Device And Sensor Working Group
• https://www.w3.org/2016/03/device-sensors-wg-charter.html
- https://github.com/WICG

45. Resources
• Browser API Status
- CanIUse.com
- webkit.org/status/
- chromestatus.com
- developer.microsoft.com/en-us/microsoft-edge/platform/status/
• APIs
- App Manifest Generator - https://app-manifest.firebaseapp.com

46. Resources
• ApplicationCache is a Douchebag
- http://alistapart.com/article/application-cache-is-a-douchebag