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

Hello World 2017 - Progressive Web Apps

Hello World 2017 - Progressive Web Apps

Título: Progressive Web Apps
Autor: André Duarte
Contacto: onemanclapping[at]gmail.com

More Decks by Hello World Tech Conference

Other Decks in Technology

Transcript

  1. http://www.betfair.com/sport >2M active users Not available in Portugal yet! Sorry!

    100% JS Front-end in AngularJS Back-end in NodeJS 100% Web iOS & Android wrappers available
  2. http://www.betfair.com/sport >2M active users Not available in Portugal yet! Sorry!

    100% JS Front-end in AngularJS Back-end in NodeJS 100% Web iOS & Android wrappers available with from by
  3. business analyst product owner dev dev dev dev QA dev

    dev dev dev QA dev dev dev dev QA
  4. product owner business analyst business analyst dev dev dev dev

    QA dev dev dev dev QA dev dev dev dev QA dev dev dev dev QA dev dev dev dev QA dev dev dev dev QA
  5. source: comScore 2016 US Mobile App Report top 5 apps

    Average time spent on native apps other apps
  6. source: comScore 2016 US Mobile App Report native 4.0 11.4

    web 3x more Average monthly unique visitors of 1000 top apps (million users)
  7. business analyst product owner business analyst business analyst dev dev

    dev dev QA dev dev dev dev QA dev dev dev dev QA dev dev dev dev QA dev dev dev dev QA dev dev dev dev QA dev dev dev dev QA dev dev dev dev QA dev dev dev dev QA
  8. business analyst product owner business analyst business analyst dev dev

    dev dev QA dev dev dev dev QA dev dev dev dev QA dev dev dev dev QA dev dev dev dev QA + +
  9. business analyst product owner dev dev dev dev QA dev

    dev dev dev QA dev dev dev dev QA
  10. Web Manifest “name”: “my progressive web application”, “shortname”: “myPWA”, “display”:

    “standalone”, “icons”: [{ “src”: “hd_icon.svg”, “sizes”: “256x256” }], “background_color”: “#1E1E1E”, “orientation”: “portrait” manifest.json
  11. Web Manifest “name”: “my progressive web application”, “shortname”: “myPWA”, “display”:

    “standalone”, “icons”: [{ “src”: “hd_icon.svg”, “sizes”: “256x256” }], “background_color”: “#1E1E1E”, “orientation”: “portrait” manifest.json more info @ https://tinyurl.com/mdn-web-manifest
  12. Let’s say I intrigued ~1000 of you “In a consumer

    mobile app, every step you make a user perform before they get value out of your app will cost you ~20% of users…” source: Gabor Cselle - Every Step Costs You 20% of Users
  13. load store find in store click install accept permissions download,

    wait... use 800 640 512 410 328 262 Let’s say I intrigued ~1000 of you “In a consumer mobile app, every step you make a user perform before they get value out of your app will cost you ~20% of users…” source: Gabor Cselle - Every Step Costs You 20% of Users
  14. open link use “In a consumer mobile app, every step

    you make a user perform before they get value out of your app will cost you ~20% of users…” source: Gabor Cselle - Every Step Costs You 20% of Users 800
  15. source: comScore 2016 US Mobile App Report Average monthly unique

    visitors of 1000 top apps (million users) native 4.0 11.4 web 3x more
  16. web GET http://my.website.com/ service worker sw cache indexed DB GET

    data more info @ https://tinyurl.com/mdn-offline
  17. web push server push API notifications API service worker push

    message more info @ https://tinyurl.com/mdn-push
  18. Learn more about PWAs https://pwa.rocks https://tinyurl.com/google-pwa Get the slides and

    more info at https://andreduarte.info Ask me anything by twitter: @onemanclapping by mail: onemanclapping@gmail.com