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.

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
    ratracegrad@gmail.com
    @ratracegrad
    

    View Slide