PWA beyond theory - How to create your progressive web app

Transcript

1. 1.

   PWA BEYOND THEORY How to create your progressive web app

2. 2.

   None
3. 3.

   13% 87% Mobile web Apps Source: comScore Mobile Metrix, U.S.,

   Age 18+, June 2015
4. 4.

   80% of time is spent on 3 apps Source: comScore

   Mobile Metrix, U.S., Age 18+, June 2015
5. 5.

   ZERO number of apps the average user installs per month

   Source: comScore Mobile Metrix, U.S., Age 18+, June 2015
6. 6.

   New web features • Push Messages • Offline storage •

   Audio & Video Capture • Recording Media • Geolocation • Web Bluetooth API • More: https://whatwebcando.today
7. 7.

   None
8. 8.

   WHAT IS A PWA? it's a website that behaves like

   an app
9. 9.

   WHAT IS A PWA? new level of caring about the

   quality of your end-to-end user experience
10. 10.

    Starbucks https://app.starbucks.com

11. 11.

    The Washington Post https://www.washingtonpost.com/pwa

12. 12.

    Twitter https://mobile.twitter.com

13. 13.

    None
14. 14.

    PWA aspects • Site works cross-browser • Pages are responsive

    on tablets & mobile devices • First load fast even on 3G • All app URLs load while offline • Metadata provided for Add to Home screen • Site is served over HTTPS
15. 15.

    ✓ site works cross-browser

16. 16.

    ✓ responsive ✓ first load fast

17. 17.

    ✓ all app URLs load while offline

18. 18.

    SERVICE WORKER advanced offline experiences

19. 19.

    Web server

20. 20.

    Service worker Client side proxy (wrote in JavaScript) Cache Web

    server
21. 21.

    SERVICE WORKER it's for the SECOND loading

22. 22.

    implementing a Service Worker

23. 23.

    None
24. 24.

    registering a Service Worker

25. 25.

    None
26. 26.

    adding install event

27. 27.

    None
28. 28.

    preload resources

29. 29.

    None
30. 30.

    activate event

31. 31.

    None
32. 32.

    almost finishing

33. 33.

    None
34. 34.

    controlling the loading

35. 35.

    None
36. 36.

    None
37. 37.

    None
38. 38.

    cache strategy network, otherwise use the cache

39. 39.

    the offline cookbook by Jake Archibald https://developers.google.com/web/fundamentals/instant-and-offline/offline-cookbook/

40. 40.

    ✓ add to home screen

41. 41.

    <link rel="manifest" href="/manifest.json"> { "name": "Currency Converter", "short_name": "CConverter", "icons":

    [{ "src": "icon-48x48.png", "sizes": "48x48", "type": "image/png" }, {...}], "start_url": "/index.html", "display": "standalone", "orientation": "portrait", "background_color": "#06f8c5", "theme_color": "#06f8c5" }
42. 42.

    manifest.json { "name": "Currency Converter", "short_name": "CConverter", "icons": [{ "src":

    "icon-48x48.png", "sizes": "48x48", "type": "image/png" }, {...}], "start_url": "/index.html", "display": "standalone", "orientation": "portrait", "background_color": "#06f8c5", "theme_color": "#06f8c5" }
43. 43.

    manifest.json { "name": "Currency Converter", "short_name": "CConverter", "icons": [{ "src":

    "icon-48x48.png", "sizes": "48x48", "type": "image/png" }, {...}], "start_url": "/index.html", "display": "standalone", "orientation": "portrait", "background_color": "#06f8c5", "theme_color": "#06f8c5" }
44. 44.

    manifest.json { "name": "The Washington Post", "short_name": "Wash Post", "icons":

    [{ "src": "icon-48x48.png", "sizes": "48x48", "type": "image/png" }, {...}], "start_url": "/index.html", "display": "standalone", "orientation": "portrait", "background_color": "#06f8c5", "theme_color": "#06f8c5" }
45. 45.

    manifest.json { "name": "Currency Converter", "short_name": "CConverter", "icons": [{ "src":

    "icon-48x48.png", "sizes": "48x48", "type": "image/png" }, {...}], "start_url": "/index.html", "display": "standalone", "orientation": "portrait", "background_color": "#06f8c5", "theme_color": "#06f8c5" }
46. 46.

    ✓ safe

47. 47.

    keeping users safe is hugely important • Reliability: Is this

    the site that the user expects? • Integrity: Has anyone changed this content? • Privacy: Can anyone monitor my navigation?
48. 48.

    None
49. 49.

    None
50. 50.

    Let’s Encrypt is a trademark of the Internet Security Research

    Group.
51. 51.

    that's all :D

52. 52.

    last considerations • Storage is not required • Easy to

    share (conversion flow) • Always updated • Lower costs compared to native app development.
53. 53.

    Lighthouse

54. 54.

    use your creativity • https://developers.google.com/web/progressive-web-apps/checklist • https://whatwebcando.today

55. 55.

    try it: http://bit.ly/pwacconverter

56. 56.

    the code is available on github: https://github.com/amandavilela/currencyconverter

57. 57.

    Obrigada! Amanda Vilela amandavilela.com