Modern Web Fun: Was die Web-Plattform alles kann

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.

12c88a3a10478fa18d0363b3ba3d9df1?s=128

Christian Liebel

June 20, 2018
Tweet

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