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.

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. Cross-Platform UI Frameworks & .NET Core Neue Webschnittstellen für noch bessere Progressive Web Apps PWA-Update ?
5. Cross-Platform UI Frameworks & .NET Core Neue Webschnittstellen für noch bessere Progressive Web Apps PWA-Update ?
6. PWA! Cross-Platform UI Frameworks & .NET Core Neue Webschnittstellen für noch bessere Progressive Web Apps PWA-Update
7. PWA-Update Neue Webschnittstellen für noch bessere Progressive Web Apps Cross-Platform UI
8. Neue Webschnittstellen für noch bessere Progressive Web Apps PWA-Update Responsive Linkable Discoverable Installable App-like Connectivity Independent Fresh Safe Re-engageable Progressive
9. Neue Webschnittstellen für noch bessere Progressive Web Apps PWA-Update Blazor
10. Chrome 73+ PWA-Update Neue Webschnittstellen für noch bessere Progressive Web Apps PWA Installation on macOS & Linux
11. PWA-Update Neue Webschnittstellen für noch bessere Progressive Web Apps PWA Install Button
12. Demo https://airhorner.com PWA-Update Neue Webschnittstellen für noch bessere Progressive Web Apps PWA Installation DEMO
13. 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
14. Flight Arcade PWA-Update Neue Webschnittstellen für noch bessere Progressive Web Apps The Power of the Modern Web • WebGL • Web Audio API • Gamepad API DEMO
15. Epic Zen Garden PWA-Update Neue Webschnittstellen für noch bessere Progressive Web Apps The Power of the Modern Web • WebGL • WebAssembly DEMO
16. 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:
17. 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
18. Browser Support PWA-Update Neue Webschnittstellen für noch bessere Progressive Web Apps Web Share API Under Consideration 12.2 ? 69 (Android)
19. 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
20. - 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
21. 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
22. chrome://flags/#enable-experimental-web-platform-features PWA-Update Neue Webschnittstellen für noch bessere Progressive Web Apps Experimental Web Platform Features Flag
23. 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
24. 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
25. 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
26. 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
27. 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
28. 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
29. 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
30. Use Cases - Kiosk-style apps - Multimedia apps - Presentation apps PWA-Update Neue Webschnittstellen für noch bessere Progressive Web Apps Wake Lock API
31. 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
32. 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
33. Use Cases - IDEs - Office-style apps - Multimedia apps PWA-Update Neue Webschnittstellen für noch bessere Progressive Web Apps Writable Files API
34. Motivation PWA-Update Neue Webschnittstellen für noch bessere Progressive Web Apps Shape Detection API
35. 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
36. Demo PWA-Update Neue Webschnittstellen für noch bessere Progressive Web Apps Shape Detection API DEMO
37. 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
38. 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
39. 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
40. 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
41. PWA-Update Neue Webschnittstellen für noch bessere Progressive Web Apps Google Play Store accepts PWAs
42. 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
43. - 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
44. Q&A PWA-Update Neue Webschnittstellen für noch bessere Progressive Web Apps
45. Thank you for your kind attention! Christian Liebel @christianliebel christian.liebel@thinktecture.com