Slide 1

Slide 1 text

The Web in 2020 Wohin sich das Web bewegt Christian Liebel @christianliebel Consultant

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

- 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

Slide 4

Slide 4 text

Technical Plenary and Advisory Committee Meetings The Web in 2020 Wohin sich das Web bewegt

Slide 5

Slide 5 text

The Web in 2020 Wohin sich das Web bewegt Fukuoka, Japan

Slide 6

Slide 6 text

The Web in 2020 Wohin sich das Web bewegt

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

https://webauthn.io The Web in 2020 Wohin sich das Web bewegt WebAuthn DEMO

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

Traditional checkout forms are… The Web in 2020 Wohin sich das Web bewegt Payment Request API repetitive tedious (sometimes) not touch-friendly

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

UI The Web in 2020 Wohin sich das Web bewegt Payment Request API

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

The Web in 2020 Wohin sich das Web bewegt

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

The Web in 2020 Wohin sich das Web bewegt Project Fugu navigator.share({ url: 'http://example.com' }); ShareIntent DataTransferManager … NSSharingServicePicker

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

API Set the badge navigator.setAppBadge(5); Clear the badge navigator.clearAppBadge(); The Web in 2020 Wohin sich das Web bewegt Badging API

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

Faces Barcodes Text Use Cases The Web in 2020 Wohin sich das Web bewegt Shape Detection API

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

https://liebel.io/facedet The Web in 2020 Wohin sich das Web bewegt Shape Detection API DEMO

Slide 38

Slide 38 text

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

Slide 39

Slide 39 text

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

Slide 40

Slide 40 text

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

Slide 41

Slide 41 text

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

Slide 42

Slide 42 text

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

Slide 43

Slide 43 text

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

Slide 44

Slide 44 text

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

Slide 45

Slide 45 text

https://liebel.io/paint DEMO The Web in 2020 Wohin sich das Web bewegt Async Clipboard & NativeFS

Slide 46

Slide 46 text

The Web in 2020 Wohin sich das Web bewegt Where’s the Web Heading to?

Slide 47

Slide 47 text

- 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?

Slide 48

Slide 48 text

Thank you for your kind attention! Christian Liebel @christianliebel [email protected]