The Web is a Contender

JSConf EU 2015

Transcript

1. The Web is a Contender q mobile
2. Surma @surmair
3. voice-memos.appspot.com
4. 1B+ Users (25M+ Devs)
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
33. HTTPS everywhere letsencrypt.com
34. Surma @surmair Thank you!