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]