$30 off During Our Annual Pro Sale. View Details »

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.

Jennifer Bland

April 17, 2018
Tweet

More Decks by Jennifer Bland

Other Decks in Technology

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