Modern Web Fun: Das geht?!

Beim dritten Karlsruher Cross-Platform Afterwork stellt Christian Liebel unter dem Motto „Modern Web Fun“ ein paar exotischere APIs vor: Gamepad, Ambient Light, Audio Synthesis und weitere. Interessant, was moderne Browser im Jahre 2017 bereits leisten können!

Transcript

1. Modern Web Fun Das geht?! Christian Liebel @chris_liebel Thinktecture AG
2. Christian Liebel Thinktecture AG Microsoft MVP Visual Studio and Development Technologies Twitter: @chris_liebel E-Mail: christian.liebel@thinktecture.com https://thinktecture.com https://christianliebel.com Gestatten? Das geht? Modern Web Fun
3. Agenda Ambient Light WebGL Web Audio API Gamepad API Service Worker Payment Request Das geht? Modern Web Fun
4. Agenda Ambient Light WebGL Web Audio API Gamepad API Service Worker Payment Request Das geht? Modern Web Fun
5. W3C Working Draft Light intensity in lux Depending on the environment: • Change colors and contrasts • Change the exposure needed for a picture • … Ambient Light Sensor API Das geht? Modern Web Fun
6. W3C Working Draft window.addEventListener('devicelight', () => …) Ambient Light Sensor API Das geht? Modern Web Fun
7. Live Demo https://www.audero.it/demo/ ambient-light-api-demo.html Das geht? Modern Web Fun
8. Das geht? Modern Web Fun
9. Agenda Ambient Light WebGL Web Audio API Gamepad API Service Worker Payment Request Das geht? Modern Web Fun
10. Khronos Group Web Graphics Library OpenGL for Embedded Systems 2.0 (OpenGL ES 2.0) Hardware accelerated 3D rendering Canvas context: webgl/experimental-webgl Blender/Unity can export to WebGL Library: THREE.js/HoloJS WebGL Das geht? Modern Web Fun
11. Principle WebGL Das geht? Modern Web Fun
12. Live Demo https://threejs.org Das geht? Modern Web Fun
13. Das geht? Modern Web Fun
14. Agenda Ambient Light WebGL Web Audio API Gamepad API Service Worker Payment Request Das geht? Modern Web Fun
15. W3C Editor’s Draft Web Audio API https://developer.mozilla.org/de/docs/Web/API/Web_Audio_API Das geht? Modern Web Fun
16. Related APIs • Speech Synthesis • https://developer.mozilla.org/en- US/docs/Web/API/SpeechSynthesisUtterance • Speech Recognition • https://www.google.com/intl/en/chrome/demos/speech.html • Microphone access via Media Capture and Streams API • https://developer.mozilla.org/en- US/docs/Web/API/MediaDevices/getUserMedia Web Audio API Das geht? Modern Web Fun
17. Live Demo http://webaudioapi.com/samples Das geht? Modern Web Fun
18. Das geht? Modern Web Fun
19. Agenda Ambient Light WebGL Web Audio API Gamepad API Service Worker Payment Request Das geht? Modern Web Fun
20. Working Draft Natively interact with gamepads Access axes and buttons via JavaScript No plugin required Chrome: User-mode driver for Xbox 360 gamepad on macOS Gamepad API Das geht? Modern Web Fun
21. Usages Games Presentations …? Gamepad API Das geht? Modern Web Fun
22. Live Demo http://html5gamepad.com/ Das geht? Modern Web Fun
23. Das geht? Modern Web Fun
24. Agenda Ambient Light WebGL Web Audio API Gamepad API Service Worker Payment Request Das geht? Modern Web Fun
25. Apps Tomorrow/The Web is Becoming (More) Native • Idea: No App-Store required any longer • Web App = App App • Feature Parity: Native Experience with Push Notifications, Offline Availability, … • Powered by Google, ready to use on Android today • Downwards compatible (Progressive Enhancement) • PWA are no technology, but a collection of features Service Worker Das geht? Modern Web Fun
26. Service Worker as Proxy/Interceptor Service Worker Internet Website HTML/JS Cache fetch Das geht? Modern Web Fun
27. Connection Independence Problem: The quality of internet connection broadly variies (especially when travelling) Lie-Fi: Low singal strength of public WiFi/completely offline Goal: App also works offline/low signal strength …or at least as good as possible (e.g. OneNote) This means: Local data storage required Bidirectional: Data synchronization/Conflict resolution (e.g. Web Background Synchronization) Service Worker Das geht? Modern Web Fun
28. Concept Offline Availability System Website HTML/JS Lokaler Speicher Zentraler Adapter Entfernter Speicher Server Internet Das geht? Modern Web Fun
29. With Service Worker Offline Availability System Website HTML/JS Cache Storage Entfernter Speicher Server Internet fetch HTTP Service Worker Das geht? Modern Web Fun
30. Re-Engageable Goal: Get users back to (re-)use the app Known from social networks, games, … Implementation via ServiceWorker’s PushManager Problem: Endpoint is defined by plattform provider (GCM, WNS, …) Provider and push services must be known to back-end/server component Third-party services: (free, but collecting data!) Service Worker Das geht? Modern Web Fun
31. Live Demo https://pwa.liebel.io Das geht? Modern Web Fun
32. Das geht? Modern Web Fun
33. Agenda Ambient Light WebGL Web Audio API Gamepad API Service Worker Payment Request Das geht? Modern Web Fun
34. Monetarization Payment Request API Supported by Microsoft Edge Upcoming payment technology for the web https://blogs.windows.com/msedgedev/20 16/12/15/payment-request-api-edge/ https://developers.google.com/web/funda mentals/discovery-and- monetization/payment-request/ Progressive Web Apps Das geht? Modern Web Fun
35. Live Demo https://googlechrome.github.io/samples/ paymentrequest/ Das geht? Modern Web Fun
36. Das geht? Modern Web Fun
37. Vielen Dank für eure Aufmerksamkeit Christian Liebel @chris_liebel christian.liebel@thinktecture.com