The document discusses Progressive Web Applications (PWAs), emphasizing their features such as being installable, available offline, and engaging through notifications. It highlights the use of service workers and related APIs for creating a consistent experience across devices and networks. Additional resources for further learning about PWAs, including an ebook and training materials, are also mentioned.

1. Hi 👋 I am
Tamas Piros
Developer Evangelist
Cloudinary
Google Developer Expert
Web Technologies
Director
Full Stack Training

2. We will talk about Progressive Web Applications 📱 🚨

3. Progressive Web Apps 🤷
• PWA is nothing more than just a website, with app like
features
• Installable
• Available Of
fl
ine
• Re-engageable (noti
fi
cations)

4. Progressive Web Apps 🤷
• Plus - it acts as a hybrid application type - works on
mobile and desktop (feels like native)
• No need to create separate app in Swift / Kotlin
• Use one codebase for all platforms

5. How would that work 🤔?
• Certain APIs in browsers enable such functionality
• Service Worker
• Cache Interface
• Push & Noti
fi
cation APIs
• And a lot more

6. Service Worker ⚡
• Acts as a proxy, which can intercept the standard
request/response cycle in the browser
HTTP GET example.com/index.html
Browser
Service Worker* “The Internets”
* The Service Worker is part of the browser

7. Cache Interface ⚡
• Stores data in the browser permanently, which can be
retrieved
• HTML, JS, CSS, Fonts, Images …
Browser
Service Worker* “The Internets”
* Part of the browser
Cache*

11. X

12. But … ⚠
• Service Worker API is complex, with lots of edge cases
• How to update stale data in the cache?
• How to check for
fi
le changes & push them to users?

13. Workbox.js ⛑
• Open source JavaScript library which acts as a wrapper
on top of Service Worker, Cache Interface, and many
more
• Allows us to concentrate on developing PWAs and not
get lost in a dark maze

16. Progressive 📈
• All users should have the same experience
• Progressive enhancement based on certain conditions
• User o
ffl
ine? Give visual cues of the status or of
fl
ine items
• Users on 2g / 3g network? Don’t stream an HD video
• Users on an older device? Don’t load all that JavaScript

17. The web is visual 📸
• People used to say they have a cat 🐱
• Then they started posting photos of the cat 😼
• Now they are posting videos about the cat 😻
BUT
• There are lots of image/video formats and optimisation
algorithms (JPEG, WebP, JPEG-2000, MP4, WebM …) 🙀
• Managing all of these, and delivering them in a
performant way is no fun 😿

18. Progressive 📈
• Slow network?
• Check connection with the Network Information API
• Add q_auto:low, otherwise, q_auto:best
q_auto:best/woman.jpg
9.9 KB
q_auto:low/woman.jpg
6.8 KB
(original: 570 KB)

19. DEMO TIME

20. Resources 🧪
• eBook on PWAs (paid)
• Adaptive Image Loading
• PWA training by Google
• All about image formats
• The Of
fl
ine Cookbook (caching strategies)
• PWA code samples on GitHub

22. 🇺🇸 Thank you! 🇺🇸
@tpiros