Progressive Web Apps

(aka PWA)

FOSDEM 2020

Hi, I am Trishul

👨‍💻

🤖

WHAT

@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

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);