PWA beyond theory - How to create your progressive web app

Presented on DevFest London 2018.

Transcript

1. PWA BEYOND
   THEORY
   How to create your progressive web app
   

   View Slide

2. View Slide

3. 13% 87%
   Mobile web Apps
   Source: comScore Mobile Metrix, U.S., Age 18+, June 2015
   

   View Slide

4. 80%
   of time is spent on 3 apps
   Source: comScore Mobile Metrix, U.S., Age 18+, June 2015
   

   View Slide

5. ZERO
   number of apps the average
   user installs per month
   Source: comScore Mobile Metrix, U.S., Age 18+, June 2015
   

   View Slide

6. New web features
   ● Push Messages
   ● Offline storage
   ● Audio & Video Capture
   ● Recording Media
   ● Geolocation
   ● Web Bluetooth API
   ● More: https://whatwebcando.today
   

   View Slide

7. View Slide

8. WHAT IS A PWA?
   it's a website that behaves like an app
   

   View Slide

9. WHAT IS A PWA?
   new level of caring about the quality
   of your end-to-end user experience
   

   View Slide

10. Starbucks
    https://app.starbucks.com
    

    View Slide

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

    View Slide

12. Twitter
    https://mobile.twitter.com
    

    View Slide

13. View Slide

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
    

    View Slide

15. ✓ site works cross-browser
    

    View Slide

16. ✓ responsive
    ✓ first load fast
    

    View Slide

17. ✓ all app URLs load while offline
    

    View Slide

18. SERVICE WORKER
    advanced offline experiences
    

    View Slide

19. Web server
    

    View Slide

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

    View Slide

21. SERVICE WORKER
    it's for the SECOND loading
    

    View Slide

22. implementing a Service Worker
    

    View Slide

23. View Slide

24. registering a Service Worker
    

    View Slide

25. View Slide

26. adding install event
    

    View Slide

27. View Slide

28. preload resources
    

    View Slide

29. View Slide

30. activate event
    

    View Slide

31. View Slide

32. almost finishing
    

    View Slide

33. View Slide

34. controlling the loading
    

    View Slide

35. View Slide

36. View Slide

37. View Slide

38. cache strategy
    network, otherwise use the cache
    

    View Slide

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

    View Slide

40. ✓ add to home screen
    

    View Slide

41. 
    {
    "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"
    }
    

    View Slide

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"
    }
    

    View Slide

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"
    }
    

    View Slide

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"
    }
    

    View Slide

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"
    }
    

    View Slide

46. ✓ safe
    

    View Slide

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?
    

    View Slide

48. View Slide

49. View Slide

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

    View Slide

51. that's all :D
    

    View Slide

52. last considerations
    ● Storage is not required
    ● Easy to share (conversion flow)
    ● Always updated
    ● Lower costs compared to native app development.
    

    View Slide

53. Lighthouse
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

57. Obrigada!
    Amanda Vilela
    amandavilela.com
    

    View Slide