Slide 1

Slide 1 text

PWA-Update Neue Webschnittstellen für noch bessere Progressive Web Apps Christian Liebel @christianliebel Consultant

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

PWA-Update Neue Webschnittstellen für noch bessere Progressive Web Apps Cross-Platform UI

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

Epic Zen Garden PWA-Update Neue Webschnittstellen für noch bessere Progressive Web Apps The Power of the Modern Web • WebGL • WebAssembly DEMO

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

Chrome 76+ PWA-Update Neue Webschnittstellen für noch bessere Progressive Web Apps PWA Install Button

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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:

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

Browser Support PWA-Update Neue Webschnittstellen für noch bessere Progressive Web Apps Web Share API Under Consideration 12.2 ? 69 (Android)

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

Demo https://web-share.glitch.me PWA-Update Neue Webschnittstellen für noch bessere Progressive Web Apps PWA Installation DEMO

Slide 17

Slide 17 text

- 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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

chrome://flags/#enable-experimental-web-platform-features PWA-Update Neue Webschnittstellen für noch bessere Progressive Web Apps Experimental Web Platform Features Flag

Slide 20

Slide 20 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 PWA-Update Neue Webschnittstellen für noch bessere Progressive Web Apps Badging API

Slide 21

Slide 21 text

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

Slide 22

Slide 22 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', _ => { 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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 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 PWA-Update Neue Webschnittstellen für noch bessere Progressive Web Apps Wake Lock API

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

Use Cases - Kiosk-style apps - Multimedia apps - Presentation apps PWA-Update Neue Webschnittstellen für noch bessere Progressive Web Apps Wake Lock API

Slide 28

Slide 28 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? PWA-Update Neue Webschnittstellen für noch bessere Progressive Web Apps Writable Files API

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

Use Cases - IDEs - Office-style apps - Multimedia apps PWA-Update Neue Webschnittstellen für noch bessere Progressive Web Apps Writable Files API

Slide 31

Slide 31 text

Motivation PWA-Update Neue Webschnittstellen für noch bessere Progressive Web Apps Shape Detection API

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

Demo https://shape-detection-api.arnelle.me/ PWA-Update Neue Webschnittstellen für noch bessere Progressive Web Apps Shape Detection API DEMO

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

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

Slide 38

Slide 38 text

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

Slide 39

Slide 39 text

PWA-Update Neue Webschnittstellen für noch bessere Progressive Web Apps Google Play Store accepts PWAs

Slide 40

Slide 40 text

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

Slide 41

Slide 41 text

- 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

Slide 42

Slide 42 text

Q&A PWA-Update Neue Webschnittstellen für noch bessere Progressive Web Apps

Slide 43

Slide 43 text

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