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;
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
Progressively
enhance web apps
to look and feel like
native app
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
Access provided to PWA
• Offline Accessibility
• Access Device Camera
• Access User Location
• Push Notification
• Having permission to use Cache
memory
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
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
8Demo of PWA
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
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
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
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
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
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
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

Progressive web application

  • 1.
    PWA stands forprogressive 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, designerFrances 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 tolook and feel like native app
  • 4.
    4 Features of progressiveweb 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 toPWA • Offline Accessibility • Access Device Camera • Access User Location • Push Notification • Having permission to use Cache memory
  • 6.
    6Mobile App VsMobile 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 Progressiveweb 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.
  • 9.
    9 The Manifest forWeb 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 Androidhas 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 workeris 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 allowyour 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 checkis 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 Itis 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 reachhuge audience with these features ,these web app work on mostly all the browser Probably every web application will be PWA in future
  • 16.