Progressive web application is sorted in 16 slides

1. PWA stands for progressive web application
“PWA describe set of features of technologies, which
can be added to existing web application to turn them
into native mobile app like experience”
INTRODUCTIO
N
1
Example of PWA : Flipkart Lite, Twitter Lite etc;

2. In 2015, designer Frances Berriman and Google
Chrome engineer Alex Russell coined the term
"progressive web apps to describe apps taking
advantage of new features supported by modern
browsers, including service workers and web app
manifests, that let users upgrade web apps to
progressive web applications in their native operating
system(OS)
History of PWA

3. 3
Progressively
enhance web apps
to look and feel like
native app

4. 4
Features of progressive web application:
Progressive - Work for every user, regardless of browser choice.
Responsive - Fit any form factor: desktop, mobile, tablet, or forms yet to emerge.
App-like - Feel like an app to the user with app-style interactions and navigation.
Fresh - Always up-to-date thanks to the service worker update process.
Safe - Served via HTTPS to prevent snooping and ensure content hasn’t been tampered
with.
registration scope allowing search engines to find them.
Re-Engageable - Make re-engagement easy through features like push notifications.
Installable - Allow users to “keep” apps they find most useful on their home screen
without the hassle of
an app store.
Linkable - Easily shared via a URL and do not require complex installation.

5. 5
Access provided to PWA
• Offline Accessibility
• Access Device Camera
• Access User Location
• Push Notification
• Having permission to use Cache
memory

6. 6Mobile App Vs Mobile Web
2015 Servay held in USA provide us the above statistics
Push notification brings user
back
Home screen icons make
access easy
Acess native device features like
camera ,location and many more
Possibly work offline
Why we use Native app

7. 7Advantage of Progressive web Application
No need to learn other languages , it uses the language used in web application development
Work in offline mode also
It takes less time to load as native app and website takes
It requires less internet speed as other app and websites takes
No need to learn different platform languages
It works on every operating system
No need to go to playstore or appstore
You can just add the websites to your Home screen for further interaction

8. 8Demo of PWA

9. 9
The Manifest for Web applications is a
simple JSON file that
gives you, the developer, the ability to
control how your app
appears to the user in the areas that they
would expect to
see apps (for example the device home
screen), direct what
the user can launch and more importantly
how they can
launch it
WEB APP MANIFEST

10. 10
Chrome on Android has support adding in
your site to the Home screen for a while now,
but recent versions also support proactively
suggesting sites be added using nativeWeb
App install banners.
ADD TO HOME SCREEN BANNER

11. 11
A service worker is a script that runs in
the background,
separate from your web page. It
responds to events,
including network requests made from
pages it serves.
A service worker has an intentionally
short lifetime.
SERVICE WORKER FOR OFFLINE CACHING

12. 12
Push notifications allow your users to
opt-in to timely
updates from sites they love and allow
you to effectively reengage
them with customized, engaging
content.
PUSH NOTIFICATIONS FOR RE-
ENGAGEMENT

13. 13
How to check is web is progressive
Lighthouse is an open-source,
automated tool for improving the
quality of web pages. You can run it
against any web page, public or
requiring authentication. It has audits
for performance, accessibility,
progressive web apps, and more.

14. 14
Limitation of PWA
It is HTML 5 supportive
No store available so that we cant know which
one is PWA
It cannot interact with other app installed on
the device

15. 15
Conclusion
We can reach huge audience with these features ,these web app work on mostly all the
browser
Probably every web application will be PWA in future

16. 16