The Web in 2020: wohin sich das Web bewegt

The Web in 2020: wohin sich das Web bewegt

Einmal im Jahr trifft sich das World Wide Web Consortium (W3C) zur Meetingwoche. Christian Liebel von Thinktecture war beim diesjährigen Treffen der Arbeitsgruppen in Japan dabei und hat die neuesten Informationen im Gepäck: Welche Spezifikationen gerade im Gespräch sind – welche neuen Schnittstellen das Web bekommen soll – und was das für Webanwendungen im Jahr 2020 heißen könnte.

12c88a3a10478fa18d0363b3ba3d9df1?s=128

Christian Liebel

October 15, 2019
Tweet

Transcript

  1. The Web in 2020 Wohin sich das Web bewegt Christian

    Liebel @christianliebel Consultant
  2. Hello, it’s me. Christian Liebel Follow me: @christianliebel Email: christian.liebel

    @thinktecture.com Cross-Platform Development & Serverless Cloud Architectures Wohin sich das Web bewegt The Web in 2020
  3. - My personal summary of this year’s TPAC - Modern

    Web APIs and initiatives discussed about/presented during TPAC - Live demos of many modern Web APIs The Web in 2020 Wohin sich das Web bewegt What to Expect
  4. Technical Plenary and Advisory Committee Meetings The Web in 2020

    Wohin sich das Web bewegt
  5. The Web in 2020 Wohin sich das Web bewegt Fukuoka,

    Japan
  6. The Web in 2020 Wohin sich das Web bewegt

  7. The Web in 2020 Wohin sich das Web bewegt Advisory

    Committee Advisory Board Technical Architecture Group Technical Groups elects elects majority reviews (Oversimplified)
  8. The Web in 2020 Wohin sich das Web bewegt WebXR

    WebAuthn Payment Request API Badging API Wake Lock API Shape Detection API Async Clipboard API Native File System API
  9. The Web in 2020 Wohin sich das Web bewegt WebXR

    WebAuthn Payment Request API Badging API Wake Lock API Shape Detection API Async Clipboard API Native File System API
  10. The Web in 2020 Wohin sich das Web bewegt Reality–Virtuality

    Continuum (Milgram et al. 1994) Reality Virtuality Augmented Reality Augmented Virtuality.. HoloLens HTC Vive Mixed Reality ARKit Cardboard
  11. API if ('xr' in navigator) { const supported = await

    navigator.xr.isSessionSupported('immersive-vr'); if (supported) { const session = navigator.xr.requestSession('immersive-vr'); const canvas = document.createElement('canvas'); const gl = canvas.getContext('webgl', { xrCompatible: true }); session.updateRenderState({ baseLayer: new XRWebGLLayer(session, gl) }); const refSpace = await session.requestReferenceSpace('local'); session.requestAnimationFrame(onXRFrame); } } The Web in 2020 Wohin sich das Web bewegt WebXR
  12. https://liebel.io/webxr The Web in 2020 Wohin sich das Web bewegt

    WebXR DEMO Cardboard Asset: Apache 2.0, © Google 2017, https://github.com/immersive-web/webxr-polyfill/blob/master/build/webxr-polyfill.js#L4291
  13. The Web in 2020 Wohin sich das Web bewegt WebXR

    WebAuthn Payment Request API Badging API Wake Lock API Shape Detection API Async Clipboard API Native File System API
  14. Motivation - Cooperation with FIDO alliance - W3C Recommendation (official

    standard) - Alternative, passwordless authentication method - Authentication via internal authenticator (e.g. Touch ID, Win Hello) - Ideally backed by internal hardware module (TPM) - Scoped per origin - Eliminates password theft, phishing and replay attacks - User-friendly The Web in 2020 Wohin sich das Web bewegt WebAuthn
  15. API if ('PublicKeyCredential' in window) { const credential = await

    navigator.credentials.create({ publicKey }); // OR const credential = await navigator.credentials.get({ publicKey }); } The Web in 2020 Wohin sich das Web bewegt WebAuthn
  16. https://webauthn.io The Web in 2020 Wohin sich das Web bewegt

    WebAuthn DEMO
  17. The Web in 2020 Wohin sich das Web bewegt WebXR

    WebAuthn Payment Request API Badging API Wake Lock API Shape Detection API Async Clipboard API Native File System API
  18. Traditional checkout forms are… The Web in 2020 Wohin sich

    das Web bewegt Payment Request API repetitive tedious (sometimes) not touch-friendly
  19. API if ('PaymentRequest' in window) { const request = new

    PaymentRequest(methodData, details, options); // Configure request } The Web in 2020 Wohin sich das Web bewegt Payment Request API
  20. UI The Web in 2020 Wohin sich das Web bewegt

    Payment Request API
  21. https://pwapraxis.liebel.io The Web in 2020 Wohin sich das Web bewegt

    Payment Request API DEMO
  22. Next Steps Payment Request Handler API is in the works

    Goal: Progressive Web Apps can register as a payment handler Extension point for third-party payment service providers The Web in 2020 Wohin sich das Web bewegt Payment Request API
  23. The Web in 2020 Wohin sich das Web bewegt WebXR

    WebAuthn Payment Request API Badging API Wake Lock API Shape Detection API Async Clipboard API Native File System API
  24. The Web in 2020 Wohin sich das Web bewegt

  25. Cross-Vendor Initiative Led By… The Web in 2020 Wohin sich

    das Web bewegt Project Fugu – A More Capable Web »Let’s bring the web back – API by API« Thomas Steiner, Google
  26. The Web in 2020 Wohin sich das Web bewegt Project

    Fugu https://goo.gle/fugu-api-tracker
  27. The Web in 2020 Wohin sich das Web bewegt Project

    Fugu navigator.share({ url: 'http://example.com' }); ShareIntent DataTransferManager … NSSharingServicePicker
  28. Motivation - Communicate updates without distracting the user (in constrast

    to push notifications) - Typically displays a badge on the home screen, task bar or dock - Appearance varies from platform to platform The Web in 2020 Wohin sich das Web bewegt Badging API
  29. API Set the badge navigator.setAppBadge(5); Clear the badge navigator.clearAppBadge(); The

    Web in 2020 Wohin sich das Web bewegt Badging API
  30. Demo • Install (link: http://Airhorner.com) Airhorner.com (Windows / macOS, not

    Android). • Paste this code in the @ChromeDevTools console: ``` let c = 0; const h = document.querySelector('.horn'); h.addEventListener('click', _ => { navigator.setExperimentalAppBadge(++c); }); ``` • Honk. • T̶h̶a̶n̶k̶ Hate me. The Web in 2020 Wohin sich das Web bewegt Badging API 9 DEMO https://twitter.com/tomayac/status/1114131251181555714
  31. The Web in 2020 Wohin sich das Web bewegt WebXR

    WebAuthn Payment Request API Badging API Wake Lock API Shape Detection API Async Clipboard API Native File System API
  32. Motivation - Devices can go to sleep in order to

    reduce energy consumption - Different types of sleep: - Turn off the display (screen sleep) - Turn off the CPU (system sleep) - However, this can get bothersome in some situations (e.g. while watching a movie etc.) - The Wake Lock API prevents the device from going to sleep for a given period of time The Web in 2020 Wohin sich das Web bewegt Wake Lock API
  33. API let wakeLockObj; if ('getWakeLock' in navigator) { try {

    wakeLockObj = await navigator.getWakeLock('screen'); console.log('', 'getWakeLock', wakeLockObj); } catch (ex) { console.error('', 'getWakeLock', err); } } The Web in 2020 Wohin sich das Web bewegt Wake Lock API https://developers.google.com/web/updates/2018/12/wakelock
  34. The Web in 2020 Wohin sich das Web bewegt WebXR

    WebAuthn Payment Request API Badging API Wake Lock API Shape Detection API Async Clipboard API Native File System API
  35. Faces Barcodes Text Use Cases The Web in 2020 Wohin

    sich das Web bewegt Shape Detection API
  36. Face Detection API if ('FaceDetector' in window) { const img

    = document.querySelector('img'); const faceDetector = new FaceDetector(); const faces = await faceDetector.detect(img) faces.forEach(face => { console.log('Face found!', face.boundingBox); }); } The Web in 2020 Wohin sich das Web bewegt Shape Detection API
  37. https://liebel.io/facedet The Web in 2020 Wohin sich das Web bewegt

    Shape Detection API DEMO
  38. Related: WebML Machine Learning for the Web (WebML) Goal: Low-level

    Web API for machine learning (Web Neural Network API) Microsoft, Google, Apple, Mozilla on board The Web in 2020 Wohin sich das Web bewegt Shape Detection API
  39. The Web in 2020 Wohin sich das Web bewegt WebXR

    WebAuthn Payment Request API Badging API Wake Lock API Shape Detection API Async Clipboard API Native File System API
  40. API Copy Content await navigator.clipboard.writeText('foo'); await navigator.clipboard.write(/* data */); Paste

    Content const content = await navigator.clipboard.readText(); const content = await navigator.clipboard.read(); The Web in 2020 Wohin sich das Web bewegt Async Clipboard API
  41. The Web in 2020 Wohin sich das Web bewegt WebXR

    WebAuthn Payment Request API Badging API Wake Lock API Shape Detection API Async Clipboard API Native File System API
  42. Motivation - Currently, websites only have very limited access to

    the file system - Some applications heavily rely on working with files (e.g. Visual Studio Code) - Wouldn’t it be great if your web application could open files or folders from the native file system? The Web in 2020 Wohin sich das Web bewegt Native File System API
  43. API (may change!) if ('chooseFileSystemEntries' in window) { const handle

    = await window.chooseFileSystemEntries(); const file = await handle.getFile(); // do something with the file } else { // use fallback API or disable feature in app } The Web in 2020 Wohin sich das Web bewegt Native File System API
  44. API (may change!) const handle = await self.chooseFileSystemEntries({ type: 'openFile',

    multiple: false, readOnly: false, accepts: [{ description: 'Images', extensions: ['jpg', 'gif', 'png'] }] }); The Web in 2020 Wohin sich das Web bewegt Native File System API
  45. https://liebel.io/paint DEMO The Web in 2020 Wohin sich das Web

    bewegt Async Clipboard & NativeFS
  46. The Web in 2020 Wohin sich das Web bewegt Where’s

    the Web Heading to?
  47. - Web is getting more and more capable - The

    Web is establishing itself as an application platform - But: Web is threatened by alternative approaches and platforms, support for modern Web API varies from platform to platform - You can make a difference! - File bugs in browser engine bugtrackers - File Fugu requests: http://bit.ly/new-fugu-request The Web in 2020 Wohin sich das Web bewegt Where’s the Web Heading to?
  48. Thank you for your kind attention! Christian Liebel @christianliebel christian.liebel@thinktecture.com