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

The Web is a Contender

8314890e50d87c60b2ab5fdab90a9630?s=47 Surma
September 25, 2015

The Web is a Contender

JSConf EU 2015

8314890e50d87c60b2ab5fdab90a9630?s=128

Surma

September 25, 2015
Tweet

Transcript

  1. The Web is a Contender q mobile

  2. Surma @surmair

  3. voice-memos.appspot.com

  4. 1B+ Users (25M+ Devs)

  5. None
  6. “Reach”

  7. 100+ websites per month

  8. “The mobile war is oveR. . .” “the app has

    Won” goo.gl/nLFRmY
  9. “The is oveR. . .” “the goo.gl/nLFRmY ಠ_ಠ

  10. Web Native spent on… 80% 20% goo.gl/nLFRmY

  11. Web Native spent on… 22% 20% totally not important stuff

    goo.gl/nLFRmY
  12. Web Native spent on… 52% 48% goo.gl/nLFRmY

  13. “Native apps can’t out-web the web” goo.gl/15sYYY

  14. goo.gl/15sYYY

  15. airhorner.com

  16. airhorner.com

  17. { "name": "Air Horner", "short_name": "Air Horner", "icons": [{ "src":

    "images/touch/Airhorner_128.png", "type": "image/png", "sizes": "128x128" },{ "src": "images/touch/Airhorner_192.png", "type": "image/png", "sizes": "192x192" }], "start_url": "/?homescreen=1", "display": "standalone", "background_color": "#2196F3", "theme_color": "#2196F3" }
  18. Service Worker

  19. goo.gl/IpsiH1

  20. if ('serviceWorker' in navigator) { navigator.serviceWorker .register('/sw.js') .then(function(registration) { //

    successful }).catch(function(err) { // failure }); }
  21. Service Worker

  22. var items = [ '/', '/styles/main.css', '/script/main.js' ]; self.addEventListener('install', function(event)

    { event.waitUntil( caches.open(CACHE_NAME) .then(function(cache) { return cache.addAll(items); }) ); });
  23. self.addEventListener('fetch', function(event) { event.respondWith( caches .match(event.request) .then(function(response) { return response

    || fetch(event.request); })); });
  24. wiki-offline.jakearchibald.com

  25. wiki-offline.jakearchibald.com

  26. sw-toolbox github.com/GoogleChrome/sw-toolbox

  27. Service Worker

  28. Push Notifications

  29. navigator.serviceWorker.ready.then( function(sw) { sw.pushManager.subscribe() .then(function(subscription) { // Send subscription.endpoint //

    to server }); }); }
  30. self.addEventListener('push', function(event) { var n = new Notification('A Message!’); //

    ... }); self.addEventListener('notificationclick', function(event) { var url = event.notification.data.url; event.waitUntil(clients.openWindow(url)); });
  31. simple-push-demo.appspot.com

  32. None
  33. HTTPS everywhere letsencrypt.com

  34. Surma @surmair Thank you!