Progressive Web Apps (PWAs) combine web technologies and mobile experience to function like native applications. Key components include service workers for caching and resource management, and the web app manifest for controlling app appearance. They utilize local storage and IndexedDB for data management, and leverage various caching strategies to optimize performance.

1. Progressive Web App
(PWA)
{Intro}
By: AKASH

2. Agenda
Overview
Technologies Behind
Basic Need
App Shell
Storage
Service Worker
Caching Strategies
Web App Manifest

3. Overview
Progressive Web App (PWA) is a term used to denote web apps that use the latest web
technologies. Progressive web apps are technically regular web pages (or websites) but
can appear to the user like traditional applications or (native) mobile applications.
This new application type attempts to combine features offered by most modern
browsers with the benefits of mobile experience.

4. Technologies Behind
Service Workers
A JavaScript file that runs
separately from the main
browser thread
(XMLHttpRequest),
intercepting network
request caching or
retrieving resource from
the cache and delivering
push messages.
Web App Manifest File
A JSON file that gives you
the ability to control how
your app appears to the
user in areas where they
would expect to see apps,
direct what the user can
launch, and define its
appearance at launch.

5. Basic Need
Project
HTML
JavaScript
Chrome Extensions:
Web Server (Run project on local machine)
Lighthouse (Testing the app)

6. App Shell
The application shell is the minimum HTML, CSS and JavaScript required to power a
user interface. A native mobile application includes the application shell as part of its
distributable, whereas websites ordinarily request this over the network.

7. Storage
Local Storage
Easy to User
Synchronous
Not Transaction
Support Most of the
Browser
Caches Object
Easy to use
Asynchronous
FAST
Not Transaction
Not Support in Most of
the Browser
IndexedDB
Complex Data
Asynchronous
Fast
Transactional
Support in Every
Browser

8. Service Worker
A JavaScript file that runs separately from the main browser thread (XMLHttpRequest),
intercepting network request caching or retrieving resource from the cache and delivering push
messages.

9. Service Worker Life Cycle

10. Caching Strategies
Cache first, then Network
Network first, then Cache
Cache Only
Network Only(Not Caching Strategy)
Cache and Network Race
Cache and Network

11. Web App Manifest
The web app manifest is a simple JSON file that gives you, the developer, the ability to
control how your app appears to the user in areas where they would expect to see apps
(for example, a mobile device's home screen), direct what the user can launch, and
define its appearance at launch.

12. Questions?

13. Thank You