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. 2.
  2. 4.

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

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

    ZERO number of apps the average user installs per month

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

    New web features • Push Messages • Offline storage •

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

    WHAT IS A PWA? new level of caring about the

    quality of your end-to-end user experience
  7. 13.
  8. 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
  9. 23.
  10. 25.
  11. 27.
  12. 29.
  13. 31.
  14. 33.
  15. 35.
  16. 36.
  17. 37.
  18. 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" }
  19. 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" }
  20. 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" }
  21. 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" }
  22. 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" }
  23. 46.
  24. 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?
  25. 48.
  26. 49.
  27. 52.

    last considerations • Storage is not required • Easy to

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