PWA-Update: Neue Webschnittstellen für noch bessere Progressive Web Apps

PWA-Update: Neue Webschnittstellen für noch bessere Progressive Web Apps

Progressive Web Apps funktionieren offline, können Pushbenachrichtigungen darstellen und laufen auf jeder Plattform von Android über Firefox bis Windows. Außerdem können Entwickler auf alle Funktionen zugreifen, für die es eine Webschnittstelle gibt. In der Vergangenheit waren dies etwa Gamepads oder der Standort des Anwenders. Mit neuen Webschnittstellen will das World Wide Web Consortium (W3C) die Lücke zwischen nativen Apps und PWA weiter schließen: Mithilfe der Writable Files API sollen PWA auf einen Teilbereich des nativen Dateisystems zugreifen können, die Badging API erlaubt das Setzen von Notification-Badges und die Shape Detection API erlaubt das Erkennen von Barcodes, Gesichtern oder Text in Bildern. Christian Liebel zeigt Ihnen brandheiße Web-APIs, die Progressive Web Apps noch mächtiger machen.

12c88a3a10478fa18d0363b3ba3d9df1?s=128

Christian Liebel

June 26, 2019
Tweet

Transcript

  1. PWA-Update Neue Webschnittstellen für noch bessere Progressive Web Apps Christian

    Liebel @christianliebel Consultant
  2. Hello, it’s me. PWA-Update Neue Webschnittstellen für noch bessere Progressive

    Web Apps Christian Liebel Follow me: @christianliebel Blog: christianliebel.com Email: christian.liebel @thinktecture.com Cross-Platform & Serverless
  3. PWA-Update Neue Webschnittstellen für noch bessere Progressive Web Apps -

    Das PWA-Anwendungsmodell - Web App Manifest - Service Worker und Cache API - Workbox: Toolkit für PWAs - Angular-Unterstützung für PWAs - Natives Look & Feel - Migrieren & veröffentlichen - Payment Request API & Apple Pay www.rheinwerk-verlag.de/4707
  4. PWA-Update Neue Webschnittstellen für noch bessere Progressive Web Apps Cross-Platform

    UI
  5. Neue Webschnittstellen für noch bessere Progressive Web Apps PWA-Update Responsive

    Linkable Discoverable Installable App-like Connectivity Independent Fresh Safe Re-engageable Progressive
  6. Neue Webschnittstellen für noch bessere Progressive Web Apps PWA-Update Blazor

  7. The Power of the Modern Web Web Share API Gamepad

    API Payment Request API Generic Sensor API Web Bluetooth API Push API Web Notifications WebVR WebRTC WebGL Speech Synthesis Web Cryptography API IndexedDB Geolocation Canvas Media Capture and Streams Neue Webschnittstellen für noch bessere Progressive Web Apps PWA-Update
  8. Epic Zen Garden PWA-Update Neue Webschnittstellen für noch bessere Progressive

    Web Apps The Power of the Modern Web • WebGL • WebAssembly DEMO
  9. Chrome 73+ PWA-Update Neue Webschnittstellen für noch bessere Progressive Web

    Apps PWA Installation on macOS & Linux
  10. Chrome 76+ PWA-Update Neue Webschnittstellen für noch bessere Progressive Web

    Apps PWA Install Button
  11. Demo https://airhorner.com PWA-Update Neue Webschnittstellen für noch bessere Progressive Web

    Apps PWA Installation DEMO
  12. Motivation PWA-Update Neue Webschnittstellen für noch bessere Progressive Web Apps

    Web Share API - Share text, URLs, images, … to another person/app - Native system UI (share dialog) - Previous approximations/fallbacks: mailto:
  13. API try { await navigator.share({ url: 'https://example.com', title: 'My cool

    title', text: 'My cool text' }); console.log(''); } catch (ex) { console.log(''); } PWA-Update Neue Webschnittstellen für noch bessere Progressive Web Apps Web Share API
  14. Browser Support PWA-Update Neue Webschnittstellen für noch bessere Progressive Web

    Apps Web Share API Under Consideration 12.2 ? 69 (Android)
  15. Progressive Enhancement if ('share' in navigator) { navigatior.share({ title: 'My

    cool title' }); } else { window.open('mailto:?subject=My cool title'); } PWA-Update Neue Webschnittstellen für noch bessere Progressive Web Apps Web Share API
  16. Demo https://web-share.glitch.me PWA-Update Neue Webschnittstellen für noch bessere Progressive Web

    Apps PWA Installation DEMO
  17. - Sibling API - Chrome 71+ - PWAs can register

    as a sharing target PWA-Update Neue Webschnittstellen für noch bessere Progressive Web Apps Web Share Target API
  18. PWA-Update Neue Webschnittstellen für noch bessere Progressive Web Apps Web

    Capabilities/Project Fugu Shape Detection API Wake Lock API Badging API Writable Files API 9
  19. chrome://flags/#enable-experimental-web-platform-features PWA-Update Neue Webschnittstellen für noch bessere Progressive Web Apps

    Experimental Web Platform Features Flag
  20. 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 Neue Webschnittstellen für noch bessere Progressive Web Apps Badging API
  21. API Set the badge Badge.set(5); Clear the badge Badge.clear(); PWA-Update

    Neue Webschnittstellen für noch bessere Progressive Web Apps Badging API
  22. 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', _ => { ExperimentalBadge.set(++c); }); ``` • Honk. • T̶h̶a̶n̶k̶ Hate me. PWA-Update Neue Webschnittstellen für noch bessere Progressive Web Apps Badging API 9 DEMO https://twitter.com/tomayac/status/1114131251181555714
  23. Use Cases - Instant messengers - Social media apps -

    E-Mail clients - To-do apps - Accounting PWA-Update Neue Webschnittstellen für noch bessere Progressive Web Apps Badging API
  24. 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 Neue Webschnittstellen für noch bessere Progressive Web Apps Wake Lock API
  25. API let wakeLockObj; if ('getWakeLock' in navigator) { try {

    wakeLockObj = await navigator.getWakeLock('screen'); console.log('', 'getWakeLock', wakeLockObj); } catch (ex) { console.error('', 'getWakeLock', err); } } PWA-Update Neue Webschnittstellen für noch bessere Progressive Web Apps Wake Lock API https://developers.google.com/web/updates/2018/12/wakelock
  26. API let wakeLockRequest; function toggleWakeLock() { if (wakeLockRequest) { wakeLockRequest.cancel();

    wakeLockRequest = null; } wakeLockRequest = wakeLockObj.createRequest(); } PWA-Update Neue Webschnittstellen für noch bessere Progressive Web Apps Wake Lock API https://developers.google.com/web/updates/2018/12/wakelock
  27. Use Cases - Kiosk-style apps - Multimedia apps - Presentation

    apps PWA-Update Neue Webschnittstellen für noch bessere Progressive Web Apps Wake Lock API
  28. 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 Neue Webschnittstellen für noch bessere Progressive Web Apps Writable Files API
  29. API (may change!) const fileRef = await self.chooseFileSystemEntries({ type: 'openFile',

    multiple: false, readOnly: false, accepts: [{description: 'Images', extensions: ['jpg', 'gif', 'png']}], suggestedStartLocation: 'pictures-library' }); PWA-Update Neue Webschnittstellen für noch bessere Progressive Web Apps Writable Files API
  30. Use Cases - IDEs - Office-style apps - Multimedia apps

    PWA-Update Neue Webschnittstellen für noch bessere Progressive Web Apps Writable Files API
  31. Motivation PWA-Update Neue Webschnittstellen für noch bessere Progressive Web Apps

    Shape Detection API
  32. Face Detection API if ('FaceDetector' in window) { const img

    = document.querySelector('img'); const faceDetector = new FaceDetector(); faceDetector.detect(img) .then(faces => faces.forEach(face => { console.log('Face found!', face.boundingBox); })); } PWA-Update Neue Webschnittstellen für noch bessere Progressive Web Apps Shape Detection API
  33. Demo https://shape-detection-api.arnelle.me/ PWA-Update Neue Webschnittstellen für noch bessere Progressive Web

    Apps Shape Detection API DEMO
  34. Use Cases - Crop images to faces - QR code

    readers - Translate text on images - … PWA-Update Neue Webschnittstellen für noch bessere Progressive Web Apps Shape Detection API
  35. Backlog https://bugs.chromium.org/p/chromium/issues/list?q=proj-fugu PWA-Update Neue Webschnittstellen für noch bessere Progressive Web

    Apps Web Capabilities/Project Fugu
  36. navigator.serviceWorker.ready.then(async (swReg) => { const bgFetch = await swReg.backgroundFetch.fetch('my-fetch', ['/ep-5.mp3',

    'ep-5-artwork.jpg'], { title: 'Episode 5: Interesting things.', icons: [{ sizes: '300x300', src: '/ep-5-icon.png', type: 'image/png', }], downloadTotal: 60 * 1024 * 1024, }); }); PWA-Update Neue Webschnittstellen für noch bessere Progressive Web Apps Background Fetch API https://developers.google.com/web/updates/2018/12/background-fetch
  37. await videoElement.requestPictureInPicture(); PWA-Update Neue Webschnittstellen für noch bessere Progressive Web

    Apps Picture in Picture API https://developers.google.com/web/updates/2018/10/watch-video-using-picture-in-picture
  38. Demo https://googlechrome.github.io/samples/picture-in-picture/ PWA-Update Neue Webschnittstellen für noch bessere Progressive Web

    Apps Picture in Picture API DEMO
  39. PWA-Update Neue Webschnittstellen für noch bessere Progressive Web Apps Google

    Play Store accepts PWAs
  40. Workflow 1. Create explainer 2. Create initial draft of specification

    3. Gather feedback & iterate on design 4. Origin trial 5. Launch Result: Interoperable, standardized web API Project Fugu Neue Webschnittstellen für noch bessere Progressive Web Apps PWA-Update
  41. - The web is already powerful - Project Fugu will

    bring even more native functionality to the web (…or at least to Chrome) - PWA is a great platform-independent application model - Use web APIs and let the browser do the platform-related stuff for you - Write once, run anywhere with the modern web & PWA PWA-Update Neue Webschnittstellen für noch bessere Progressive Web Apps Summary
  42. Q&A PWA-Update Neue Webschnittstellen für noch bessere Progressive Web Apps

  43. Thank you for your kind attention! Christian Liebel @christianliebel christian.liebel@thinktecture.com