Upgrade to Pro — share decks privately, control downloads, hide ads and more …

State of the Gap

State of the Gap

"PhoneGap is a polyfill, and the ultimate purpose of PhoneGap is to cease to exist" – Brian LeRoux, SPACELORD!1!! at Adobe, 2012.

Clearly PhoneGap, and Cordova are still required today, but when is it really needed? Did the web ever catch up? Do we always need to turn to a PhoneGap shell for all our solutions?

Remy Sharp

May 19, 2016
Tweet

More Decks by Remy Sharp

Other Decks in Technology

Transcript

  1. State of the gap
    Remy Sharp ☛ @rem

    View full-size slide

  2. PhoneGap: The polyfill

    View full-size slide

  3. PhoneGap is a polyfill,
    Brian LeRoux,
    SPACELORD!1!!
    Adobe, 2012.
    PhoneGap is a polyfill,
    and the ultimate purpose
    of PhoneGap
    PhoneGap is a polyfill,
    and the ultimate purpose
    of PhoneGap is to cease
    to exist.

    View full-size slide

  4. Meanwhile,
    7 years later…

    View full-size slide

  5. PhoneGap core

    View full-size slide

  6. Dialogs
    alert('OG dialogs ')

    View full-size slide

  7. accept="image/*;capture=camera">
    Camera

    View full-size slide

  8. window.addEventListener('deviceorientation', handler)
    Accelerometer & Compass
    window.addEventListener('devicemotion', handler)

    View full-size slide

  9. var reader = new FileReader();
    reader.onload = e => img.src = e.target.result;
    reader.readAsDataURL(this.files[0]);
    // this = input[type=file]
    Files

    View full-size slide

  10. function upload(blobOrFile) {
    var xhr = new XMLHttpRequest();
    xhr.open('POST', '/server', true);
    xhr.onload = e => { /* show done…or something */ };
    var progressBar = document.querySelector('progress');
    xhr.upload.onprogress = e => { // track upload progress
    if (e.lengthComputable) {
    progressBar.value = (e.loaded / e.total) * 100;
    }
    };
    xhr.send(blobOrFile);
    }
    upload(new Blob(['hello world'], {type: 'text/plain'}));
    File Transfer

    View full-size slide

  11. // now requires secure origin: HTTPS
    navigator.geolocation.getCurrentPosition(ok, fail);
    Geolocation

    View full-size slide

  12. function done(stream) {
    var url = window.URL.createObjectURL(stream);
    video.src = url; // starts to play video
    }
    navigator.getUserMedia({
    video: true
    }, done, console.error);
    Media Capture

    View full-size slide

  13. navigator.getBattery()

    .then(b => b.level)
    .then(console.log);
    Battery

    View full-size slide

  14. navigator.connection.type; // wifi/cellular/none
    navigator.connection.ontypechange(handler)
    Network information

    View full-size slide

  15. navigator.vibrate(1000);
    Vibration

    View full-size slide

  16. PhoneGap vs. the web
    The ecosystem
    vs.

    View full-size slide

  17. Cross browser support
    Or…“the reason I left programming for the web”

    View full-size slide

  18. plugins > browsers

    View full-size slide

  19. App Stores: 20% CPA

    View full-size slide

  20. 1. Visit app store 800 users
    2. Find app 640 users
    3. Click install 512 users
    4. Accept permissions 410 users
    5. Download and wait 328 users
    6. Use! 262 users left.
    1000 users are interested in this app

    View full-size slide

  21. Full flow: 262
    Direct install: 410
    1000 users are interested in this app
    http://bit.ly/20pcent-dropoff

    View full-size slide

  22. Progressive Web Apps

    View full-size slide

  23. 3X more time on site
    40% high re-engagement
    70% greater conversion
    from homescreen
    3X lower data usage
    https://bit.ly/flipkart-study

    View full-size slide

  24. Security: TLS/HTTPS, permissions
    Performance: fast, responsive (in all senses)
    Availability: control of the network, homescreen, push
    notifications

    View full-size slide

  25. Requires manifest

    and service worker.

    View full-size slide

  26. If I add this app to my
    home screen, it will
    work when I open it.

    View full-size slide

  27. If I add this app to my
    home screen, it must
    work when I open it.

    View full-size slide

  28. “Push notifications
    allowed us to bring
    one of the most
    compelling
    capabilities from our
    native app to our
    mobile site. We see a
    direct 20% click
    through rate from
    push notifications…”
    http://bit.ly/pwa-study-btr
    – Beyond the Rack

    View full-size slide

  29. 1. HTTPS
    2. Service Worker
    3. Manifest
    4. Push notifications

    View full-size slide

  30. Service workers
    Event driven
    Uses promises and fetch API
    Register your service worker
    Then: install, fetch, activate, push

    View full-size slide

  31. <br/>// progressively enhance <br/>if ('serviceWorker' in navigator) {<br/>navigator.serviceWorker.register('/sw.js');<br/>}<br/>
    http://bit.ly/sw-copy-paste

    View full-size slide

  32. const name = 'v1:static';
    self.addEventListener('install', e => {
    // once the SW is installed, go ahead and fetch the
    // resources to make this work offline
    e.waitUntil(
    caches.open(name).then(cache => {
    return cache.addAll([
    '/',
    // and other urls
    ]).then(() => self.skipWaiting());
    })
    );
    });
    http://bit.ly/sw-copy-paste

    View full-size slide

  33. // when the browser fetches a url, either response
    // with the cached object or go ahead and fetch
    // the actual url
    self.addEventListener('fetch', event => {
    event.respondWith(
    caches.match(event.request).then(
    res => res || fetch(event.request)
    )
    );
    });
    http://bit.ly/sw-copy-paste

    View full-size slide

  34. {
    "short_name": "My sweet app",
    "name": "This be the bees knees sweet app",
    "icons": [
    {
    "src": "icon-4x.png",
    "sizes": "192x192",
    "type": "image/png"
    }
    ],
    "start_url": "/?utm_source=web_app_manifest",
    "display": "standalone",
    "orientation": "portrait",
    "background_color": "#ff0000",
    "theme_color": "#00ff00"
    }
    Preferred name
    property, appears
    on homescreen
    and on dynamic
    splash screen

    View full-size slide

  35. {
    "short_name": "My sweet app",
    "name": "This be the bees knees sweet app",
    "icons": [
    {
    "src": "icon-4x.png",
    "sizes": "192x192",
    "type": "image/png"
    }
    ],
    "start_url": "/?utm_source=web_app_manifest",
    "display": "standalone",
    "orientation": "portrait",
    "background_color": "#ff0000",
    "theme_color": "#00ff00"
    }
    Array of icons
    available, at least
    include 192x192

    View full-size slide

  36. {
    "short_name": "My sweet app",
    "name": "This be the bees knees sweet app",
    "icons": [
    {
    "src": "icon-4x.png",
    "sizes": "192x192",
    "type": "image/png"
    }
    ],
    "start_url": "/?utm_source=web_app_manifest",
    "display": "standalone",
    "orientation": "portrait",
    "background_color": "#ff0000",
    "theme_color": "#00ff00"
    }
    Optionally serve
    specific page to
    homescreen
    apps (and track)

    View full-size slide

  37. {
    "short_name": "My sweet app",
    "name": "This be the bees knees sweet app",
    "icons": [
    {
    "src": "icon-4x.png",
    "sizes": "192x192",
    "type": "image/png"
    }
    ],
    "start_url": "/?utm_source=web_app_manifest",
    "display": "standalone",
    "orientation": "portrait",
    "background_color": "#ff0000",
    "theme_color": "#00ff00"
    }
    standalone,
    fullscreen,
    browser - how
    your appears on
    the device

    View full-size slide

  38. {
    "short_name": "My sweet app",
    "name": "This be the bees knees sweet app",
    "icons": [
    {
    "src": "icon-4x.png",
    "sizes": "192x192",
    "type": "image/png"
    }
    ],
    "start_url": "/?utm_source=web_app_manifest",
    "display": "standalone",
    "orientation": "portrait",
    "background_color": "#ff0000",
    "theme_color": "#00ff00"
    }
    Games might
    choose to use
    landscape

    View full-size slide

  39. {
    "short_name": "My sweet app",
    "name": "This be the bees knees sweet app",
    "icons": [
    {
    "src": "icon-4x.png",
    "sizes": "192x192",
    "type": "image/png"
    }
    ],
    "start_url": "/?utm_source=web_app_manifest",
    "display": "standalone",
    "orientation": "portrait",
    "background_color": "#ff0000",
    "theme_color": "#00ff00"
    }
    Colour used on
    dynamic splash
    page

    View full-size slide

  40. {
    "short_name": "My sweet app",
    "name": "This be the bees knees sweet app",
    "icons": [
    {
    "src": "icon-4x.png",
    "sizes": "192x192",
    "type": "image/png"
    }
    ],
    "start_url": "/?utm_source=web_app_manifest",
    "display": "standalone",
    "orientation": "portrait",
    "background_color": "#ff0000",
    "theme_color": "#00ff00"
    }
    Colour used on
    Chrome tab

    View full-size slide

  41. {
    "short_name": "My sweet app",
    "name": "This be the bees knees sweet app",
    "icons": [
    {
    "src": "icon-4x.png",
    "sizes": "192x192",
    "type": "image/png"
    }
    ],
    "start_url": "/?utm_source=web_app_manifest",
    "display": "standalone",
    "orientation": "portrait",
    "background_color": "#ff0000",
    "theme_color": "#00ff00"
    }

    View full-size slide

  42. Polymer: starter kit & elements
    WebRTC: PeerJS
    WebSockets: BinaryJs
    NodeJS
    Material Design

    View full-size slide

  43. Polymer: starter kit & elements
    WebRTC: PeerJS
    WebSockets: BinaryJs
    NodeJS
    Material Design
    UX:

    View full-size slide

  44. “We agree that there are
    no silver bullets, and the
    web isn’t the best tool
    for every job…

    View full-size slide

  45. “However, the web is
    not getting worse…

    View full-size slide

  46. “If the web doesn’t do
    something today it’s
    not because it can’t,
    or won’t…

    View full-size slide

  47. “but rather it is because
    we haven't gotten
    around to implementing
    that capability yet.

    View full-size slide

  48. “but rather it is because
    we haven't gotten
    around to implementing
    that capability yet.

    View full-size slide

  49. Thanks 

    (and thanks Brian)

    View full-size slide