Advertisement

Progressive Web Apps

Frontend Developer, Web and Mobile Designer, Android Developer at Juicymo
Sep. 23, 2016
Advertisement

More Related Content

Advertisement
Advertisement

Progressive Web Apps

  1. PROGRESSIVE WEB APPS Jana Moudrá @Janamou +JanaMoudra
  2. 25 mobile apps used by average user per month
  3. Home screen Caching Notifications ...
  4. Installation needed :-(
  5. And the web?
  6. Progressive Web Applications take advantage of new technologies to bring the best of mobile sites and native applications to users developers.google.com/web/progressive-web-apps/
  7. Progressive Web Applications take advantage of new technologies to bring the best of mobile sites and native applications to users and developers developers.google.com/web/progressive-web-apps/
  8. Offline support Push notifications Home screen Splash screen ... Native app-like experience on the web
  9. PROGRESSIVE WEB APP COMPONENTS
  10. Application shell
  11. Application shell
  12. Content Dynamic content
  13. Service Worker
  14. Service Worker Server Client SW
  15. HTTPS is a must
  16. WHY SHOULD I CARE?
  17. 3s
  18. 3s Every second counts
  19. Repeated visits Service Worker
  20. Repeated visits UI without network Content loaded progressively Service Worker
  21. JSON config App appearance App behaviour Web App Manifest
  22. { "name": "My Super App", "short_name": "Super App", "icons": [{ ... }], "start_url": "/index.html", "display": "standalone", "background_color": "#FFFFFF", "theme_color": "#536dfe" } manifest.json
  23. Script Has to be registered HTTPS only Service Worker
  24. if ('serviceWorker' in navigator) { navigator.serviceWorker .register('my-service-worker.js') .then(function () { console.log('Hello Service Worker!'); }); } Register
  25. On install self.addEventListener('install', function(e) { console.log('Service Worker install'); e.waitUntil( caches.open(cacheName).then(function(cache) { return cache.addAll(urlsToCache); }); ); }); my-service-worker.js
  26. On fetch self.addEventListener('fetch', function(e) { console.log('Service Worker fetch', e.request.url); e.respondWith( caches.match(e.request).then(function(response) { return response || fetch(e.request); }); ); }); my-service-worker.js
  27. Limited Cache API IndexedDB API Fetch API Notification API ... APIs
  28. sw-precache github.com/GoogleChrome/sw-precache sw-toolbox github.com/GoogleChrome/sw-toolbox Manifest generator brucelawson.github.io/manifest/ Tools
  29. webexpo-demo.firebaseapp.com DEMO
  30. CAN I USE?
  31. Not in all browsers :-( Progressive enhancement Can I use Service Worker?
  32. Can I use Service Worker?
  33. To watch: jakearchibald.github.io/isserviceworkerready/ Can I use Service Worker?
  34. pwa.rocks
  35. EVERY SECOND COUNTS 1.
  36. PWAS NATIVE APP EXPERIENCE 2.
  37. APP SHELL & SW YOUR FRIEND 3.
  38. THANK YOU YOUR QUESTIONS? Jana Moudrá @Janamou +JanaMoudra
  39. ● Andy Melton, cc, https://www.flickr.com/photos/87054972@N00/302498784/ ● YMB Properties, https://www.iconfinder.com/icons/374823/communication_computer_device_electronic_entertainment_mobile _smartphone_icon#size=128 ● Maurizio Pesce, cc, https://www.flickr.com/photos/30364433@N05/26600416562/ ● Thomas Cloer, cc, https://www.flickr.com/photos/51035701919@N01/5772390548/ ● Yutaka Seki, cc, https://www.flickr.com/photos/116451027@N08/28249984832 ● https://developers.google.com/web/updates/2015/11/app-shell ● Jqpubliq, cc, https://www.flickr.com/photos/13515581@N00/16694762754/ ● Peter Bronkalla, cc, https://www.flickr.com/photos/119931838@N08/28193513574/ ● Gregor Cresnar, https://www.iconfinder.com/icons/304602/apple_browser_computer_laptop_macbook_monitor_notebook_scre en_web_icon ● Jerry Low, https://www.iconfinder.com/icons/286686/computers_servers_web_host_icon Credits
Advertisement