Modern Web Fun: Was die Web-Plattform alles kann

Cross-Plattform-Anwendungen auf Basis von Webtechnologien stehen ihren nativen Kollegen schon lange in nichts mehr nach. Beweis gefällig? Seien Sie live dabei, wenn Ihr iPhone zu Ihnen spricht, sich eine 3D-Animation auf Ihrem Android-Tablet mit dem Controller Ihrer PlayStation steuern lässt, Edge Audio im Browser synthetisiert, Firefox Ihnen sagt, wie hell es in Ihrem Zimmer ist, der Browser Ihr Smartphone vibrieren lässt und Safari Desktopbenachrichtigungen anzeigt. Christian Liebel von Thinktecture zeigt Ihnen, was moderne Webtechnologien aus dem Umfeld von HTML5, JavaScript und CSS3 im Jahr 2018 alles leisten können.

Transcript

1. Modern Web Fun Was die Web-Plattform alles kann Christian Liebel @christianliebel Thinktecture AG
2. Christian Liebel Thinktecture AG Microsoft MVP Visual Studio and Development Technologies Twitter: @christianliebel E-Mail: christian.liebel@thinktecture.com https://thinktecture.com https://christianliebel.com Gestatten? Das geht? Modern Web Fun
3. 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 Progressive Web Apps Das geht? Modern Web Fun
4. Agenda Ambient Light WebGL Web Audio API Gamepad API Service Worker Payment Request Vibration API Pointer Pressure Das geht? Modern Web Fun
5. Agenda Ambient Light WebGL Web Audio API Gamepad API Service Worker Payment Request Vibration API Pointer Pressure Das geht? Modern Web Fun
6. 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
7. W3C Working Draft window.addEventListener('devicelight', () => …) Ambient Light Sensor API Das geht? Modern Web Fun
8. Live Demo https://liebel.io/mw-ambient Das geht? Modern Web Fun
9. Das geht? Modern Web Fun
10. Agenda Ambient Light WebGL Web Audio API Gamepad API Service Worker Payment Request Vibration API Pointer Pressure Das geht? Modern Web Fun
11. 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
12. Principle WebGL Das geht? Modern Web Fun
13. Live Demo https://threejs.org Das geht? Modern Web Fun
14. Das geht? Modern Web Fun
15. Agenda Ambient Light WebGL Web Audio API Gamepad API Service Worker Payment Request Vibration API Pointer Pressure Das geht? Modern Web Fun
16. W3C Editor’s Draft Web Audio API https://developer.mozilla.org/de/docs/Web/API/Web_Audio_API Das geht? Modern Web Fun
17. 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
18. Live Demo https://liebel.io/mw-audio Das geht? Modern Web Fun
19. Live Demo https://liebel.io/mw-speech Das geht? Modern Web Fun
20. Das geht? Modern Web Fun
21. Agenda Ambient Light WebGL Web Audio API Gamepad API Service Worker Payment Request Vibration API Pointer Pressure Das geht? Modern Web Fun
22. 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
23. Usages Games Presentations …? Gamepad API Das geht? Modern Web Fun
24. Live Demo https://liebel.io/mw-gamepad Das geht? Modern Web Fun
25. Live Demo http://flightarcade.com Das geht? Modern Web Fun
26. Das geht? Modern Web Fun
27. Agenda Ambient Light WebGL Web Audio API Gamepad API Service Worker Payment Request Vibration API Pointer Pressure Das geht? Modern Web Fun
28. Service Worker as Proxy/Interceptor Service Worker Internet Website HTML/JS Cache fetch Das geht? Modern Web Fun
29. Connection Independence Problem: The quality of internet connection broadly varies (especially when travelling) Lie-Fi: Low signal 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
30. C oncept Offline Availability System Website HTML/JS Local Storage Centralized Adapter Remote Storage Server Internet Das geht? Modern Web Fun
31. W ith Service W orker Offline Availability System Website HTML/JS Cache Storage Entfernter Speicher Server Internet fetch HTTP Service Worker Das geht? Modern Web Fun
32. Live Demo https://pwa.liebel.io Das geht? Modern Web Fun
33. Das geht? Modern Web Fun
34. Push Notifications 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, …) Problem: Apple only supports proprietary push protocol Provider and push services must be known to backend/server component Third-party services: (free, but collecting data!) Service Worker Das geht? Modern Web Fun
35. Live Demo https://liebel.io/mw-push Das geht? Modern Web Fun
36. Agenda Ambient Light WebGL Web Audio API Gamepad API Service Worker Payment Request Vibration API Pointer Pressure Das geht? Modern Web Fun
37. Monetarization Payment Request API Upcoming payment technology for the web User agent/platform provider already knows your personal information and payment data PRA provides a consistent UI across all web sites, online shops and Progressive Web Apps and prefills it with your personal information Progressive Web Apps Das geht? Modern Web Fun
38. Live Demo https://pwa.liebel.io Das geht? Modern Web Fun
39. Das geht? Modern Web Fun
40. Agenda Ambient Light WebGL Web Audio API Gamepad API Service Worker Payment Request Vibration API Pointer Pressure Das geht? Modern Web Fun
41. Haptically inform the user about an event (i.e. game starts after a long matchmaking phase) Vibration API allows the developer to - vibrate for a given period of time (e.g. 250 ms) - vibrate with a given pattern (e.g. S–O–S) Supported on mobile Android devices with Chrome and Firefox Modern Web Fun Das geht? Vibration API
42. Das geht? Modern Web Fun
43. Live Demo https://liebel.io/mw-vibration Das geht? Modern Web Fun
44. Agenda Ambient Light WebGL Web Audio API Gamepad API Service Worker Payment Request Vibration API Pointer Pressure Das geht? Modern Web Fun
45. Force Touch aka 3D Touch aka … Some devices allow secondary functions by pressing UI items with force Requires force sensor (i.e. pen input, 3D/Force Touch on Apple devices) Exposed to the browser via Pointer Events 3D/Force Touch: Proprietary implementation Library for all of them: PressureJS (Safari on macOS, browsers on iOS, Chrome/Edge/IE on Windows) Modern Web Fun Das geht? Pointer Pressure
46. Live Demo https://liebel.io/mw-forcetouch Das geht? Modern Web Fun
47. Das geht? Modern Web Fun
48. Agenda Ambient Light WebGL Web Audio API Gamepad API Service Worker Payment Request Vibration API Pointer Pressure Das geht? Modern Web Fun
49. https://whatwebcando.today/ Modern Web Fun Das geht? HTML5 Features and Usage Examples
50. Vielen Dank für Ihre Aufmerksamkeit Christian Liebel @christianliebel christian.liebel@thinktecture.com