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
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”>
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)
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.
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