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. 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. “
  2. var reader = new FileReader(); reader.onload = e => img.src

    = e.target.result; reader.readAsDataURL(this.files[0]); // this = input[type=file] Files
  3. 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
  4. 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
  5. 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
  6. Full flow: 262 Direct install: 410 1000 users are interested

    in this app http://bit.ly/20pcent-dropoff
  7. 3X more time on site 40% high re-engagement 70% greater

    conversion from homescreen 3X lower data usage https://bit.ly/flipkart-study
  8. If I add this app to my home screen, it

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

    must work when I open it.
  10. “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
  11. Service workers Event driven Uses promises and fetch API Register

    your service worker Then: install, fetch, activate, push
  12. 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
  13. // 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
  14. { "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
  15. { "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
  16. { "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)
  17. { "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
  18. { "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
  19. { "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
  20. { "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
  21. { "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" }
  22. “We agree that there are no silver bullets, and the

    web isn’t the best tool for every job…