The Web API

The web API has been a vital part of the JavaScript ecosystem for quite some time now, giving us AJAX, window timers and more. With the rise of progressive web apps, the web API's functionality is increasing like never before. To compete with native applications, the web API has some fantastic and powerful new features, with some awesome, and scary results. During this interactive talk we will explore some of the newer web API features, how to use them and more importantly, the risks that they pose.

Transcript

1. @MPOram The Web API Mike Oram Mayden Academy
2. @MPOram ! WARNING !
3. @MPOram Join in with the demo https://dev.maydenacademy.co.uk/projects/web-api/ Don’t forget the S! Accept all permission prompts
4. @MPOram The Web API Mike Oram Mayden Academy
5. @MPOram Geolocation Get the current location of the device. navigator.geolocation.getCurrentPosition(function(pos) { console.log(pos.coords) })
6. @MPOram Share Share text and a URL on native social apps. navigator.share({ 'title': 'The title to be shared', 'text': 'The text to be shared', 'url': 'The URL to be shared' });
7. @MPOram Vibration Vibrate users device for specified milliseconds, toggled on and off navigator.vibrate(200); navigator.vibrate([200,200,200]);
8. @MPOram Audio Play audio files, synthesize sounds, create audio effects and visualisations. var audioAPI = new (window.AudioContext || window.webkitAudioContext()) var oscillator = audioAPI.createOscillator(); var gainNode = audioAPI.createGain(); oscillator.connect(gainNode); gainNode.connect(audioAPI.destination); oscillator.type = 'sine'; oscillator.frequency.value = 219; // the sound you wish to make gainNode.gain.setValueAtTime( 1, audioAPI.currentTime); oscillator.start(audioAPI.currentTime);
9. @MPOram Online/offline status Internet connection status of user device if (navigator.onLine) { console.log('online'); } else { console.log('offline'); }
10. @MPOram Web Speech - Speech Synthesis Synthesize speech from the users device. var synth = window.speechSynthesis var utterThis = new SpeechSynthesisUtterance('text to speak') utterThis.pitch = 1.0 utterThis.rate = 1.0 synth.speak(utterThis)
11. @MPOram Web Speech - Speech Recognition Record speech audio and translate to text. var voice = new SpeechRecognition(); var speechRecognitionList = new SpeechGrammarList(); speechRecognitionList.addFromString( '#JSGF V1.0; grammar;' , 1); voice.grammars = speechRecognitionList; voice.interimResults = false; voice.maxAlternatives = 1; voice.onresult = function(event) { var last = event.results.length - 1; console.log(event.results[last][ 0].transcript) } voice.start()
12. @MPOram Push Notifications Receive push notifications from the server, even when the app is running in the background or not loaded. Err… this one is a bit long - Read this: https://developer.mozilla.org/en-US/docs/Web/API/Push_API Don’t forget to protect against CSRF when using this!
13. @MPOram Full Screen Force the users device into (and out of) full screen mode document.documentElement.requestFullscreen(); document.exitFullscreen();
14. @MPOram Demo
15. @MPOram Bluetooth Connect to and control bluetooth devices near the users device. navigator.bluetooth.requestDevice({acceptAllDevices:true}) .then(function(device) { console.log('Name: ' + device.name); })
16. @MPOram Demo
17. @MPOram Other APIs • Web USB • LocalStorage & IndexedDB • Payment Gateway • Device Orientation • Clipboard • Animation • Battery Status - removed And many more… https://developer.mozilla.org/kab/docs/Web/API
18. @MPOram APIs being considered/drafted • Wake Lock Prevent a device from auto-locking. This is currently possible with a video hack • Media Capture i.e Camera Implemented into FireOS Includes screen shot capability • Contact Access Think these are scary? Remember, native apps can already do all this stuff!
19. @MPOram Thank you Questions? Feedback welcome