Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Progressive Web Apps

482 views

Published on

Progressive Web Apps - presence or the future? For years, developers around the world have dreamed of being able to write web applications which act more like native apps. Caching and push notifications are not the only conveniences helping to make this dream a reality. In this talk, Jana will explain what Progressive Web Apps are and how you can use them in your own web applications.

Published in: Technology
  • Be the first to comment

Progressive Web Apps

  1. 1. PROGRESSIVE WEB APPS Jana Moudrá @Janamou +JanaMoudra
  2. 2. 25 mobile apps used by average user per month
  3. 3. Home screen Caching Notifications ...
  4. 4. Installation needed :-(
  5. 5. And the web?
  6. 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. 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. 8. Offline support Push notifications Home screen Splash screen ... Native app-like experience on the web
  9. 9. PROGRESSIVE WEB APP COMPONENTS
  10. 10. Application shell
  11. 11. Application shell
  12. 12. Content Dynamic content
  13. 13. Service Worker
  14. 14. Service Worker Server Client SW
  15. 15. HTTPS is a must
  16. 16. WHY SHOULD I CARE?
  17. 17. 3s
  18. 18. 3s Every second counts
  19. 19. Repeated visits Service Worker
  20. 20. Repeated visits UI without network Content loaded progressively Service Worker
  21. 21. JSON config App appearance App behaviour Web App Manifest
  22. 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. 23. Script Has to be registered HTTPS only Service Worker
  24. 24. if ('serviceWorker' in navigator) { navigator.serviceWorker .register('my-service-worker.js') .then(function () { console.log('Hello Service Worker!'); }); } Register
  25. 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. 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. 27. Limited Cache API IndexedDB API Fetch API Notification API ... APIs
  28. 28. sw-precache github.com/GoogleChrome/sw-precache sw-toolbox github.com/GoogleChrome/sw-toolbox Manifest generator brucelawson.github.io/manifest/ Tools
  29. 29. webexpo-demo.firebaseapp.com DEMO
  30. 30. CAN I USE?
  31. 31. Not in all browsers :-( Progressive enhancement Can I use Service Worker?
  32. 32. Can I use Service Worker?
  33. 33. To watch: jakearchibald.github.io/isserviceworkerready/ Can I use Service Worker?
  34. 34. pwa.rocks
  35. 35. EVERY SECOND COUNTS 1.
  36. 36. PWAS NATIVE APP EXPERIENCE 2.
  37. 37. APP SHELL & SW YOUR FRIEND 3.
  38. 38. THANK YOU YOUR QUESTIONS? Jana Moudrá @Janamou +JanaMoudra
  39. 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

×