Upgrade to Pro — share decks privately, control downloads, hide ads and more …

PWA Update 2019: Modern Web APIs for even better Progressive Web Apps

PWA Update 2019: Modern Web APIs for even better Progressive Web Apps

PWA is a great application model: These cross-platform, web-based apps work offline, can show push notifications and run in an own window (desktop) or standalone (mobile). Google’s Project Fugu will bring even more native functionality to the web, such as notification badges, wake locks and native file system access. Thinktecture’s Christian Liebel, GDE for Web Technologies, shows you how those APIs will pave the way for an even brighter future for Progressive Web Apps.

Christian Liebel

November 09, 2019
Tweet

More Decks by Christian Liebel

Other Decks in Programming

Transcript

  1. PWA Update 2019 Modern Web APIs for even better Progressive

    Web Apps 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 Modern Web APIs for even better Progressive Web Apps PWA Update 2019
  3. PWA Update 2019 Modern Web APIs for even better Progressive

    Web Apps Responsive Linkable Discoverable Installable App-like Connectivity Independent Fresh Safe Re-engageable Progressive
  4. PWA Update 2019 Modern Web APIs for even better Progressive

    Web Apps WebXR WebAuthn Payment Request API Badging API Wake Lock API Shape Detection API Async Clipboard API Native File System API
  5. PWA Update 2019 Modern Web APIs for even better Progressive

    Web Apps WebXR WebAuthn Payment Request API Badging API Wake Lock API Shape Detection API Async Clipboard API Native File System API
  6. PWA Update 2019 Modern Web APIs for even better Progressive

    Web Apps Reality–Virtuality Continuum (Milgram et al. 1994) Reality Virtuality Augmented Reality Augmented Virtuality.. HoloLens HTC Vive Mixed Reality ARKit Cardboard
  7. 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); } } PWA Update 2019 Modern Web APIs for even better Progressive Web Apps WebXR
  8. https://liebel.io/webxr PWA Update 2019 Modern Web APIs for even better

    Progressive Web Apps WebXR DEMO Cardboard Asset: Apache 2.0, © Google 2017, https://github.com/immersive-web/webxr-polyfill/blob/master/build/webxr-polyfill.js#L4291
  9. PWA Update 2019 Modern Web APIs for even better Progressive

    Web Apps WebXR WebAuthn Payment Request API Badging API Wake Lock API Shape Detection API Async Clipboard API Native File System API
  10. 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 PWA Update 2019 Modern Web APIs for even better Progressive Web Apps WebAuthn
  11. API if ('PublicKeyCredential' in window) { const credential = await

    navigator.credentials.create({ publicKey }); // OR const credential = await navigator.credentials.get({ publicKey }); } PWA Update 2019 Modern Web APIs for even better Progressive Web Apps WebAuthn
  12. PWA Update 2019 Modern Web APIs for even better Progressive

    Web Apps WebXR WebAuthn Payment Request API Badging API Wake Lock API Shape Detection API Async Clipboard API Native File System API
  13. Traditional checkout forms are… PWA Update 2019 Modern Web APIs

    for even better Progressive Web Apps Payment Request API repetitive tedious (sometimes) not touch-friendly
  14. API if ('PaymentRequest' in window) { const request = new

    PaymentRequest(methodData, details, options); // Configure request } PWA Update 2019 Modern Web APIs for even better Progressive Web Apps Payment Request API
  15. UI PWA Update 2019 Modern Web APIs for even better

    Progressive Web Apps Payment Request API
  16. 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 PWA Update 2019 Modern Web APIs for even better Progressive Web Apps Payment Request API
  17. PWA Update 2019 Modern Web APIs for even better Progressive

    Web Apps WebXR WebAuthn Payment Request API Badging API Wake Lock API Shape Detection API Async Clipboard API Native File System API
  18. Cross-Vendor Initiative Led By… PWA Update 2019 Modern Web APIs

    for even better Progressive Web Apps Project Fugu – A More Capable Web »Let’s bring the web back – API by API« Thomas Steiner, Google
  19. PWA Update 2019 Modern Web APIs for even better Progressive

    Web Apps Project Fugu https://goo.gle/fugu-api-tracker
  20. PWA Update 2019 Modern Web APIs for even better Progressive

    Web Apps Project Fugu navigator.share({ url: 'http://example.com' }); ShareIntent DataTransferManager … NSSharingServicePicker
  21. 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 PWA Update 2019 Modern Web APIs for even better Progressive Web Apps Badging API
  22. API Set the badge navigator.setAppBadge(5); Clear the badge navigator.clearAppBadge(); PWA

    Update 2019 Modern Web APIs for even better Progressive Web Apps Badging API
  23. 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. PWA Update 2019 Modern Web APIs for even better Progressive Web Apps Badging API 9 DEMO https://twitter.com/tomayac/status/1114131251181555714
  24. PWA Update 2019 Modern Web APIs for even better Progressive

    Web Apps WebXR WebAuthn Payment Request API Badging API Wake Lock API Shape Detection API Async Clipboard API Native File System API
  25. 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 PWA Update 2019 Modern Web APIs for even better Progressive Web Apps Wake Lock API
  26. API let wakeLock = null; if ('wakeLock' in navigator) {

    try { wakeLock = await navigator.wakeLock.request('screen'); console.log('Wake lock active'); } catch (err) { console.error(`${err.name}, ${err.message}`); } } PWA Update 2019 Modern Web APIs for even better Progressive Web Apps Wake Lock API
  27. PWA Update 2019 Modern Web APIs for even better Progressive

    Web Apps WebXR WebAuthn Payment Request API Badging API Wake Lock API Shape Detection API Async Clipboard API Native File System API
  28. Faces Barcodes Text Use Cases PWA Update 2019 Modern Web

    APIs for even better Progressive Web Apps Shape Detection API
  29. 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); }); } PWA Update 2019 Modern Web APIs for even better Progressive Web Apps Shape Detection API
  30. 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 PWA Update 2019 Modern Web APIs for even better Progressive Web Apps Shape Detection API
  31. PWA Update 2019 Modern Web APIs for even better Progressive

    Web Apps WebXR WebAuthn Payment Request API Badging API Wake Lock API Shape Detection API Async Clipboard API Native File System API
  32. 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(); PWA Update 2019 Modern Web APIs for even better Progressive Web Apps Async Clipboard API
  33. PWA Update 2019 Modern Web APIs for even better Progressive

    Web Apps WebXR WebAuthn Payment Request API Badging API Wake Lock API Shape Detection API Async Clipboard API Native File System API
  34. 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? PWA Update 2019 Modern Web APIs for even better Progressive Web Apps Native File System API
  35. 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 } PWA Update 2019 Modern Web APIs for even better Progressive Web Apps Native File System API
  36. API (may change!) const handle = await self.chooseFileSystemEntries({ type: 'openFile',

    multiple: false, readOnly: false, accepts: [{ description: 'Images', extensions: ['jpg', 'gif', 'png'] }] }); PWA Update 2019 Modern Web APIs for even better Progressive Web Apps Native File System API
  37. https://liebel.io/paint DEMO PWA Update 2019 Modern Web APIs for even

    better Progressive Web Apps Async Clipboard & NativeFS
  38. PWA Update 2019 Modern Web APIs for even better Progressive

    Web Apps Where’s the Web Heading to?
  39. - 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 PWA Update 2019 Modern Web APIs for even better Progressive Web Apps What’s in for Progressive Web Apps?