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

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

View Slide

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

View Slide

PWA-Update
- 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

View Slide

PWA-Update
Cross-Platform UI

View Slide

PWA-Update
Responsive Linkable Discoverable Installable App-like
Connectivity
Independent
Fresh Safe Re-engageable Progressive

View Slide

PWA-Update
Blazor

View Slide

The Power of the Modern Web
Web Share API
Gamepad API
Payment Request API
Generic Sensor API
Web Bluetooth API
Push API
Web Notiﬁcations
WebVR
WebRTC
WebGL
Speech Synthesis
Web Cryptography API
IndexedDB
Geolocation
Canvas
Media Capture and Streams
PWA-Update

View Slide

Epic Zen Garden
PWA-Update
The Power of the Modern Web
• WebGL
• WebAssembly
DEMO

View Slide

Chrome 73+
PWA-Update
PWA Installation on macOS & Linux

View Slide

Chrome 76+
PWA-Update
PWA Install Button

View Slide

Demo
https://airhorner.com
PWA-Update
PWA Installation
DEMO

View Slide

Motivation
PWA-Update
Web Share API
- Share text, URLs, images, … to another
person/app
- Native system UI (share dialog)
- Previous approximations/fallbacks: mailto:

View Slide

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
Web Share API

View Slide

Browser Support
PWA-Update
Web Share API
Under
Consideration
12.2
?
69
(Android)

View Slide

Progressive Enhancement
if ('share' in navigator) {
navigatior.share({ title: 'My cool title' });
} else {
window.open('mailto:?subject=My cool title');
}
PWA-Update
Web Share API

View Slide

Demo
https://web-share.glitch.me
PWA-Update
PWA Installation
DEMO

View Slide

- Sibling API
- Chrome 71+
- PWAs can register as a sharing target
PWA-Update
Web Share Target API

View Slide

PWA-Update
Web Capabilities/Project Fugu
Shape
Detection API
Wake Lock
API
Badging
API
Writable Files
API
9

View Slide

chrome://flags/#enable-experimental-web-platform-features
PWA-Update
Experimental Web Platform Features Flag

View Slide

Motivation
- Communicate updates
without distracting the
user (in constrast to push
notiﬁcations)
- Typically displays a badge
on the home screen, task
bar or dock
- Appearance varies from
platform to platform
PWA-Update
Badging API

View Slide

API
Set the badge
Badge.set(5);
Clear the badge
Badge.clear();
PWA-Update
Badging API

View Slide

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
Badging API 9
DEMO
https://twitter.com/tomayac/status/1114131251181555714

View Slide

Use Cases
- Instant messengers
- Social media apps
- E-Mail clients
- To-do apps
- Accounting
PWA-Update
Badging API

View Slide

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
Wake Lock API

View Slide

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
Wake Lock API
https://developers.google.com/web/updates/2018/12/wakelock

View Slide

API
let wakeLockRequest;
function toggleWakeLock() {
if (wakeLockRequest) {
wakeLockRequest.cancel();
wakeLockRequest = null;
}
wakeLockRequest = wakeLockObj.createRequest();
}
PWA-Update
Wake Lock API
https://developers.google.com/web/updates/2018/12/wakelock

View Slide

Use Cases
- Kiosk-style apps
- Multimedia apps
- Presentation apps
PWA-Update
Wake Lock API

View Slide

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
Writable Files API

View Slide

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
Writable Files API

View Slide

Use Cases
- IDEs
- Office-style apps
- Multimedia apps
PWA-Update
Writable Files API

View Slide

Motivation
PWA-Update
Shape Detection API

View Slide

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
Shape Detection API

View Slide

Demo
https://shape-detection-api.arnelle.me/
PWA-Update
Shape Detection API
DEMO

View Slide

Use Cases
- Crop images to faces
- QR code readers
- Translate text on images
- …
PWA-Update
Shape Detection API

View Slide

Backlog
https://bugs.chromium.org/p/chromium/issues/list?q=proj-fugu
PWA-Update
Web Capabilities/Project Fugu

View Slide

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
Background Fetch API
https://developers.google.com/web/updates/2018/12/background-fetch

View Slide

await videoElement.requestPictureInPicture();
PWA-Update
Picture in Picture API
https://developers.google.com/web/updates/2018/10/watch-video-using-picture-in-picture

View Slide

Demo
https://googlechrome.github.io/samples/picture-in-picture/
PWA-Update
Picture in Picture API
DEMO

View Slide

PWA-Update
Google Play Store accepts PWAs

View Slide

Workflow
1. Create explainer
2. Create initial draft of speciﬁcation
3. Gather feedback & iterate on design
4. Origin trial
5. Launch
Result: Interoperable, standardized web API
Project Fugu
PWA-Update

View Slide

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

View Slide

Q&A
PWA-Update

View Slide

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

View Slide

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

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

Christian Liebel
PRO

More Decks by Christian Liebel

Other Decks in Programming

Featured

Transcript

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

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

Christian Liebel PRO

More Decks by Christian Liebel

Other Decks in Programming

Featured

Transcript

Christian Liebel
PRO