Progressive Web Apps - Porque nativo no es significa mejor

Presentación para el Google Developer Group DevFest 2016 de Granada sobre "Progressive Web Apps" y todo lo relacionado con ellas

Transcript

1. +Israel Blancas
   @iblancasa
   Progressive Web Apps
   porque nativo no significa mejor
   

   View Slide

2. Israel Blancas
   @iblancasa
   Software Engineer at Real-Time Innovations
   Google Developer Group organizer
   

   View Slide

3. View Slide

4. View Slide

5. What are the Progressive Web Apps?
   

   View Slide

6. Progressive Web App uses modern
   web platform capabilities to deliver an
   app-like user experience
   

   View Slide

7. Instant loading
   Fast
   Push notifications
   Add to home screen
   Secure Responsive
   

   View Slide

8. View Slide

9. Web Platform PM at Microsoft Edge
   

   View Slide

10. AliExpress
    2x more
    page views
    74% increase
    in time spent
    82% more
    conversions on iOS
    

    View Slide

11. Android App Mobile Web
    $3.75
    $0.07
    Housing.com: User Acquisition Costs
    

    View Slide

12. View Slide

13. Every interaction step costs
    20%
    of your potential users.
    goo.gl/LouFF
    

    View Slide

14. View Slide

15. Instant loading
    Fast
    Push notifications
    Add to home screen
    Secure Responsive
    

    View Slide

16. Instant loading
    Service Workers allow your apps to load nearly instantly and reliably, no
    matter what kind of network connection your user is on.
    

    View Slide

17. Application Shell Architecture
    

    View Slide

18. 60%
    goo.gl/fDkY1g
    almost
    of mobile is 2G
    

    View Slide

19. Push notifications
    of users abandon sites that take
    longer than 3 seconds to load
    53%
    goo.gl/a3g4J5
    

    View Slide

20. View Slide

21. Add to home screen
    Web app install banners give you the ability to let your users quickly
    and seamlessly add your web app to their home screen, making it easy
    to launch and return to your app.
    

    View Slide

22. Add to home screen
    

    View Slide

23. View Slide

24. Push notifications
    Web push notifications makes it easy to re-engage with users by
    showing relevant, timely, and contextual notifications, even when the
    browser is closed.
    

    View Slide

25. Push notifications
    

    View Slide

26. Fast
    Smooth animations, scrolling, and navigations keep the experience
    silky smooth.
    

    View Slide

27. Offline first!
    

    View Slide

28. View Slide

29. Secure
    HTTPS secures the connection between you and your users, ensuring
    your users information is protected and isn't tampered with.
    

    View Slide

30. Responsive
    Modern users live on phones, tablets and laptops; your apps and
    websites should do the same. Learn how to structure and code your
    content to look great on screens of any size.
    

    View Slide

31. Faster deploys
    ● Deploying updates / fixes on web
    vs. native takes hours, not weeks.
    ○ Faster A/B testing
    ○ App always up-to-date
    

    View Slide

32. Accelerometer
    

    View Slide

33. Physical Web
    

    View Slide

34. Physical Web
    

    View Slide

35. Payments
    

    View Slide

36. Virtual Reality
    

    View Slide

37. How to start?
    

    View Slide

38. View Slide

39. Polymer Starter Kit
    Web app scaffolding, via web
    components.
    goo.gl/qy16Jk
    

    View Slide

40. https://pwa.rocks/
    

    View Slide

41. https://codelabs.developers.google.com/codelabs/
    your-first-pwapp/
    

    View Slide

42. https://developers.google.com/
    web/progressive-web-apps/
    

    View Slide

43. Thank you Paul!
    @paul_kinlan
    

    View Slide

44. Israel Blancas
    @iblancasa
    GRACIAS POR VUESTRA ATENCIÓN
    

    View Slide

45. Y ahora...
    

    View Slide

46. View Slide

47. Agradecimientos
    

    View Slide

48. Agradecimientos
    

    View Slide

49. https://gdg.es
    

    View Slide

50. ¡Gracias por todo!
    

    View Slide

51. Estamos aquí por
    vosotros, por
    pasarlo bien, por la
    comunidad
    

    View Slide

52. Y esperamos que
    os haya gustado
    

    View Slide

53. Comunidades
    locales
    

    View Slide

54. https://www.meetup.com/es-ES/Granada-Geek/
    

    View Slide

55. http://databeersgrx.com/
    

    View Slide

56. http://granadajam.com/
    

    View Slide

57. https://www.facebook.com/
    Pythongranada/
    

    View Slide

58. https://geekandtechgirls.github.io/
    

    View Slide

59. https://github.com/beerjs/granada
    

    View Slide

60. http://www.meetup.com/es-ES/PHPGranada/
    

    View Slide

61. https://twitter.com/inter_ferencias
    

    View Slide

62. Sorteos
    

    View Slide

63. ¡Esperamos vuestro
    feedback!
    

    View Slide

64. ¡Hasta pronto!
    

    View Slide