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