$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

    View Slide

  2. View Slide

  3. View Slide

  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

    View Slide

  5. OpenSource 101
    ------
    Progressive Web Apps
    ------
    Jennifer Bland
    What is a
    Progressive Web
    App?

    View Slide

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

    View Slide

  7. OpenSource 101
    ------
    Progressive Web Apps
    ------
    Jennifer Bland
    “So they are just web pages?”

    View Slide

  8. OpenSource 101
    ------
    Progressive Web Apps
    ------
    Jennifer Bland
    YES!

    View Slide

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

    View Slide

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

    View Slide

  11. OpenSource 101
    ------
    Progressive Web Apps
    ------
    Jennifer Bland
    Web App Manifest

    View Slide

  12. View Slide

  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

    View Slide

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

    View Slide

  15. View Slide

  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

    View Slide

  17. OpenSource 101
    ------
    Progressive Web Apps
    ------
    Jennifer Bland
    Manifest.json
    • orientation - can enforce a specific orientation.

    View Slide

  18. View Slide

  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

    View Slide

  20. Registration

    View Slide

  21. Installation

    View Slide

  22. Activation

    View Slide

  23. Fetch

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  30. OpenSource 101
    ------
    Progressive Web Apps
    ------
    Jennifer Bland
    Lighthouse Performance
    • First Paint
    • First Interactive

    View Slide

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

    View Slide

  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

    View Slide

  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

    View Slide

  34. www.jenniferbland.com
    www.in5days.tech
    www.medium.com/@ratracegrad
    www.youtube.com/c/jenniferbland
    github.com/ratracegrad
    [email protected]
    @ratracegrad

    View Slide