Progressive web apps (PWAs) combine the best of web and mobile apps by being reliable, fast, and engaging. They utilize service workers for caching, ensuring instant loading regardless of network conditions, and can be installed on a user’s home screen. Key advantages of PWAs include improved user engagement, better reliability, and increased conversions.

1. PWAProgressive Web Apps

2. What is
PWA?
Progressive Web Apps are user experiences that have the
reach of the web, and are:
Reliable - Load instantly and never show the downasaur,
even in uncertain network conditions.
Fast - Respond quickly to user interactions with silky
smooth animations and no janky scrolling.
Engaging - Feel like a natural app on the device, with an
immersive user experience.

3. Reliable
When launched from the user’s home screen, service workers
enable a Progressive Web App to load instantly,
regardless of the network state.
A service worker, written in JavaScript, is like
a client-side proxy and puts you in control of
the cache and how to respond to resource
requests. By pre-caching key resources
you can eliminate the dependence on the
network,ensuring an instant and reliable experience for your users.

4. Fast
53% of users will abandon a site if it takes longer than
3 seconds to load! And once loaded, users
expect them to be fast—no janky scrolling
or slow-to-respond interfaces.

5. Engaging
Progressive Web Apps are installable and live on the user's
home screen, without the need for an app store.
They offer an immersive full screen experience
with help from a web app manifest file and can
even re-engage users with web
push notifications.

6. Quiz time
What are the three important properties of a PWA ?

7. Why build a Progressive Web App?
1. Worthy of being on the home screen
2. Increased engagement
3. Work reliably, no matter the network conditions
4. Improved conversions

8. Case Sudies
1. https://developers.google.com/web/showcase/

9. Case Studies
1. https://developers.google.com/web/showcase/

10. Building PWA
Principal 1:
Separate Static Structure and Dynamic Data

11. Building PWA

12. Building PWA
Principal 2:
Data Caching Technique
1. Cache first then Network.
2. Network first then cache.
3. Network and cache together.

13. Building PWA
Principal 3:
User Engagement
1. Add to Homescreen
2. Push Notification
3. Full screen Launching

14. Building PWA
Principal 4:
Always serve your app over HTTPS
Get free HTTPS at: letsencrypt.org

15. Building PWA
What are the different Data caching
Techniques ?

16. https://weather-pwa-sample.firebaseapp.com/final/
Demo & Code Time
Demo:
CodeLab:
https://codelabs.developers.google.com/codelabs/your-first-pwapp

17. /surajsugga
THANKS !!Happy Learning