Progressive Web Apps - What, Why and How

Progressive Web Apps - What, Why and How

Progressive Web Apps combine the best of the web and the best of apps. They load quickly, even on flaky networks, can re-engage with users by sending web push notifications, have an icon on the home screen, and load as top-level, full-screen experiences. Learn the what, why, and how of PWAs.

Da526e4b5901b3a2759cf234285c6488?s=128

Jennifer Bland

April 17, 2018
Tweet

Transcript

  1. Progressive Web Applications Jennifer Bland

  2. None
  3. None
  4. OpenSource 101 ------ Progressive Web Apps ------ Jennifer Bland 3

    Truths 1 Lie •I have visited 82 countries •I did not attend college •I high five’d the Pope •My home is 400 sq ft
  5. OpenSource 101 ------ Progressive Web Apps ------ Jennifer Bland What

    is a Progressive Web App?
  6. OpenSource 101 ------ Progressive Web Apps ------ Jennifer Bland “Progressive

    Web Apps use modern web capabilities to deliver an app-like user experience.”
  7. OpenSource 101 ------ Progressive Web Apps ------ Jennifer Bland “So

    they are just web pages?”
  8. OpenSource 101 ------ Progressive Web Apps ------ Jennifer Bland YES!

  9. OpenSource 101 ------ Progressive Web Apps ------ Jennifer Bland Four

    Requirements • HTTPS • Web app manifest • Service Worker • Responsive design
  10. OpenSource 101 ------ Progressive Web Apps ------ Jennifer Bland HTTPS

    • Hyper Text Transfer Protocol Secure • IBDB • Provides security against: • wiretapping • man-in-the-middle attacks
  11. OpenSource 101 ------ Progressive Web Apps ------ Jennifer Bland Web

    App Manifest <link rel=“manifest” href=“manifest.json”>
  12. None
  13. OpenSource 101 ------ Progressive Web Apps ------ Jennifer Bland Manifest.json

    • short_name - name displayed on shortcut created on desktop • name - what is displayed on mobile apps • start_url - starting point of the application
  14. OpenSource 101 ------ Progressive Web Apps ------ Jennifer Bland Manifest.json

    • display - defines the developer’s preferred display mode for the web application (standalone | fullscreen)
  15. None
  16. OpenSource 101 ------ Progressive Web Apps ------ Jennifer Bland Manifest.json

    • background_color - expected background color for the web application • theme_color - default theme color for an application • icons - an array of image objects that can serve as app icons in various contexts
  17. OpenSource 101 ------ Progressive Web Apps ------ Jennifer Bland Manifest.json

    • orientation - can enforce a specific orientation.
  18. None
  19. OpenSource 101 ------ Progressive Web Apps ------ Jennifer Bland Service

    Worker • Background script to serve network or cached content • What distinguishes a PWA from an HTML website
  20. Registration

  21. Installation

  22. Activation

  23. Fetch

  24. OpenSource 101 ------ Progressive Web Apps ------ Jennifer Bland Responsive

    Design • Can be installed on any device
  25. OpenSource 101 ------ Progressive Web Apps ------ Jennifer Bland PWA

    Checklist https://developers.google.com/web/progressive-web-apps/ checklist
  26. OpenSource 101 ------ Progressive Web Apps ------ Jennifer Bland PWA

    Performance • Lighthouse
  27. OpenSource 101 ------ Progressive Web Apps ------ Jennifer Bland Lighthouse

    SEO • Mobile Friendly • Google Bot crawling • Indexing
  28. OpenSource 101 ------ Progressive Web Apps ------ Jennifer Bland Lighthouse

    Best Practices • Framework provides limitations • Polymer.js
  29. OpenSource 101 ------ Progressive Web Apps ------ Jennifer Bland Lighthouse

    PWA • Page Load • Service Worker
  30. OpenSource 101 ------ Progressive Web Apps ------ Jennifer Bland Lighthouse

    Performance • First Paint • First Interactive
  31. OpenSource 101 ------ Progressive Web Apps ------ Jennifer Bland Challenges

    We Faced • Responsive Design • Deep Linking • Multi Browser Support
  32. OpenSource 101 ------ Progressive Web Apps ------ Jennifer Bland PWA

    Training • https://developers.google.com/web/ilt/pwa/ Deep Linking • https://www.udacity.com/course/intro-to-progressive-web- apps--ud811
  33. OpenSource 101 ------ Progressive Web Apps ------ Jennifer Bland 3

    Truths 1 Lie •I have visited 82 countries •I did not attend college •I high five’d the Pope •My home is 400 sq ft
  34. www.jenniferbland.com www.in5days.tech www.medium.com/@ratracegrad www.youtube.com/c/jenniferbland github.com/ratracegrad ratracegrad@gmail.com @ratracegrad