PWA beyond theory - How to create your progressive web app

PWA beyond theory - How to create your progressive web app

Presented on DevFest London 2018.

3ab1d4a265ad9289afe10956a78271df?s=128

Amanda Vilela

December 01, 2018
Tweet

Transcript

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

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

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

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

    Source: comScore Mobile Metrix, U.S., Age 18+, June 2015
  6. New web features • Push Messages • Offline storage •

    Audio & Video Capture • Recording Media • Geolocation • Web Bluetooth API • More: https://whatwebcando.today
  7. None
  8. WHAT IS A PWA? it's a website that behaves like

    an app
  9. WHAT IS A PWA? new level of caring about the

    quality of your end-to-end user experience
  10. Starbucks https://app.starbucks.com

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

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

  13. None
  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. ✓ site works cross-browser

  16. ✓ responsive ✓ first load fast

  17. ✓ all app URLs load while offline

  18. SERVICE WORKER advanced offline experiences

  19. Web server

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

    server
  21. SERVICE WORKER it's for the SECOND loading

  22. implementing a Service Worker

  23. None
  24. registering a Service Worker

  25. None
  26. adding install event

  27. None
  28. preload resources

  29. None
  30. activate event

  31. None
  32. almost finishing

  33. None
  34. controlling the loading

  35. None
  36. None
  37. None
  38. cache strategy network, otherwise use the cache

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

  40. ✓ add to home screen

  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. 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. 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. 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. 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. ✓ safe

  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. None
  49. None
  50. Let’s Encrypt is a trademark of the Internet Security Research

    Group.
  51. that's all :D

  52. last considerations • Storage is not required • Easy to

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

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

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

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

  57. Obrigada! Amanda Vilela amandavilela.com