Progressive Web Apps
(aka PWA)
FOSDEM 2020
Hi, I am Trishul
π¨βπ»
π€
WHAT
@trishulgoel
@trishulgoel
WEBSITE
NATIVE APP
PWA
@trishulgoel
Discoverability
of
web
Retention
of
app
PWA
@trishulgoel
"theyβre just websites that took all the right vitamins."
- Alex Russell
https://medium.com/@slightlylate/progressive-apps-escaping-tabs-without-losing-our-soul-3b93a8561955
WHY
@trishulgoel
PUSH NOTIFICATIONS
APP LIKE EXPERIENCE
@trishulgoel
WORKS OFFLINE
FASTER LOAD TIME
INSTALLABLE
@trishulgoel
HOW
@trishulgoel
Web app manifest
@trishulgoel
{
"short_name": "App",
"name": "My App",
"icons": [
{
"src": "/images/logo.png",
"type": "image/png",
"sizes": "1282x128"
}
],
"start_url": "/index.html",
"background_color": "#FF00FF",
"display": "standalone",
"theme_color": "#FF01FF"
}
<link rel="manifest" href="/manifest.json">
SERVICEWORKERS
@trishulgoel
BUILDING BLOCKS OF PWA
@trishulgoel
@trishulgoel
OFFLINE CACHING
@trishulgoel
PUSH NOTIFICATIONS
PWA on STEROIDS
@trishulgoel
STEROIDS ?
@trishulgoel
SPEECH SYNTHESIS
@trishulgoel
const synth = window.speechSynthesis;
const voices = synth.getVoices();
const say = new SpeechSynthesisUtterance(text);
say.voice = voices[<selectedindex>];
say.rate = <rate>;
say.pitch = <pitch>;
synth.speak(say);
SPEECH RECOGNITION
@trishulgoel
const recognition = new webkitSpeechRecognition();
recognition.onstart = fn;
recognition.onerror = fn;
recognition.onend = fn;
recognition.onresult = fn;
recognition.start();
MEDIA CAPTURE API
@trishulgoel
const video = document.querySelector('video');
navigator.mediaDevices.getUserMedia({ video: true, audio: false })
.then(stream => {
video.srcObject = stream;
video.play();
});
ORIENTATION
@trishulgoel
window.addEventListener('deviceorientation', handleOrientation);
function handleOrientation(event) {
const z = event.alpha; // Rotation around z-axis [0, 360]
const x = event.beta; // left to right [-180, 180]
const y = event.gamma; // front back motion [-90, 90]
}
WEB SHARE API
@trishulgoel
navigator.share({
title: <title>
text: <text>,
url: <url>,
});
https://developer.mozilla.org/en-US/docs/Web/API/Navigator/share
BLUETOOTH
@trishulgoel
const device = await navigator.bluetooth.requestDevice({
filters: [{
namePrefix: 'Device-name',
services: ['battery_service'] }],
});
const server = await device.gatt.connect();
const service = await server.getPrimaryService('battery_service');
const characteristic = await service.getCharacteristic('battery_level');
characteristic.writeValue(new Uint8Array( .... )); // 'value' -> bytes
characteristic.addEventListener('characteristicvaluechanged', fn);
MANY MORE...
@trishulgoel
- web Audio API
- Payment Request API
- Memory API
- WebUSB API
SUCCESS STORIES
@trishulgoel
@trishulgoel
https://developers.google.com/web/showcase/
FUTURE
@trishulgoel
- WEBASSEMBLY π
- MORE APIs
- BETTER BROWSER SUPPORT
@trishulgoel
REFERENCES
- https://serviceworke.rs
- https://developer.mozilla.org
- https://developers.google.com/
- https://github.com/tsl143/pwapower
@trishulgoel
@trishulgoel
Thank you!
PWA on Steroids | FOSDEM 2020
By Trishul Goel
PWA on Steroids | FOSDEM 2020
PWA on Steroids | FOSDEM 2020
- 2,191