$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. 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
  2. OpenSource 101 ------ Progressive Web Apps ------ Jennifer Bland “Progressive

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

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

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

    App Manifest <link rel=“manifest” href=“manifest.json”>
  6. 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
  7. OpenSource 101 ------ Progressive Web Apps ------ Jennifer Bland Manifest.json

    • display - defines the developer’s preferred display mode for the web application (standalone | fullscreen)
  8. 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
  9. OpenSource 101 ------ Progressive Web Apps ------ Jennifer Bland Manifest.json

    • orientation - can enforce a specific orientation.
  10. 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
  11. OpenSource 101 ------ Progressive Web Apps ------ Jennifer Bland PWA

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

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

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

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

    We Faced • Responsive Design • Deep Linking • Multi Browser Support
  16. 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
  17. 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