Progressive Web Apps

(aka PWA)

Hi, I am Trishul

WHAT

@trishulgoel

@trishulgoel

WEBSITE

NATIVE APP

PWA

@trishulgoel

Discoverability

of

web

Engagement

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

bcoz JAVASCRIPT

@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

CACHING

@trishulgoel

self.addEventListener('install', function(event) {
  event.waitUntil(
    caches.open('my-cahce').then(function(cache) {
      return cache.addAll(
        [
          '/css/style.css',
          '/js/script.js',
          '/index.html'
        ]
      );
    })
  );
});

self.addEventListener('fetch', function(event) {
  event.respondWith(
    caches.match(event.request).then(function(response) {
      if(!response) response = fetch(event.request);
      return response;
    })
  );
});

@trishulgoel

PUSH NOTIFICATIONS

@trishulgoel

self.addEventListener('activate', async () => {
  try {
    const options = {}
    const subscription = await self.registration.pushManager.subscribe(options)
  } catch (err) {
    console.log('Error', err)
  }
})

self.addEventListener('push', function(event) {
  if (event.data) {
    self.registration.showNotification("Here we are", event.data.text(),
  }
})

PWA on STEROIDS

@trishulgoel

PREREQUISITES

@trishulgoel

- HTTPS

- Browser Compatibility

@trishulgoel

STEROIDS

@trishulgoel

VIBRATION

@trishulgoel


  window.navigator.vibrate(200);
  window.navigator.vibrate([300, 200, 400, 200, 300]);

VISIBILITY

@trishulgoel

  
 document.addEventListener("visibilityChange", fn);

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

GEOLOCATION

@trishulgoel


    navigator.geolocation.getCurrentPosition(position => {
        // position.coords.latitude
        // position.coords.longitude
    });
    
    navigator.geolocation.watchPosition((position) => {
        const destination = {
            latitude : 48.9174128,
            longitude: 11.4079934
        }
        const {coords} = position;
        if (destination.latitude == coords.latitude &&
            destination.longitude == coords.longitude) {
            alert("You are at your destination!");
        }
    };);

SPEECH RECOGNITION

@trishulgoel


 const recognition = new webkitSpeechRecognition();
 recognition.onstart = fn;
 recognition.onerror = fn;
 recognition.onend = fn;
 recognition.onresult = fn;

MEDIA CAPTURE API

@trishulgoel


 const video = document.querySelector('video');
    
 navigator.mediaDevices.getUserMedia({ video: true, audio: false })
 .then(stream => { 
     video.srcObject = stream;
     video.play();
 });

NETWORK INFO

@trishulgoel


 navigator.onLine
 window.addEventListener('online',  fn);
 window.addEventListener('offline',  fn);

 navigator.connection.type
 navigator.connection.effectiveType //bandwidth
 navigator.connection.saveData
 navigator.connection.downlink

 navigator.connection.addEventListener('change', fn);

ORIENTATION

@trishulgoel


 window.addEventListener('deviceorientation', handleOrientation);

 function handleOrientation(event) {
    const z = event.alpha; // Z-aixs
    const x = event.beta;  // X-aixs | In degree in the range [-180,180]
    const y = event.gamma; // Y-aixs | In degree in the range [-90,90]
 }

BATTERY API*

@trishulgoel


 navigator.getBattery().then(function(battery) {
     // battery.charging
     // battery.level
     battery.addEventListener('chargingchange', listener);
     battery.addEventListener('levelchange', listener);
     battery.addEventListener('chargingtimechange', listener);
 }

https://developer.mozilla.org/en-US/docs/Web/API/Battery_Status_API

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' }],
      optionalServices: [ 0xfff0 ] // what service(s)? -> uuid
 });

 const server = await device.gatt.connect();
 const service = await server.getPrimaryService( 0xffe5 );
 const characteristic = await service.getCharacteristic( 0xffe9 );

 characteristic.writeValue(
     new Uint8Array( .... ) // 'value' -> bytes
 );

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/

@trishulgoel

LET'S DO IT!

@trishulgoel

@trishulgoel

Дякую

PWA on Steroids

By Trishul Goel

PWA on Steroids

PWA on Steroids - JSFest Ukraine

  • 956