A Quick intro about Progressive Web App

1. PWA
Progressive Web App
Robert Robinson
Software Engineer

2. Contents
● Introduction
● Why PWA?
● Features of PWAs
● Benefits of PWAs
● Examples
● PWAs Checklist
● Conclusion
● Reference Links

3. Introduction
● Progressive Web Apps (PWAs) are web applications that are
regular web pages or websites, but can appear to the user
like traditional applications or native mobile
applications and also Desktop applications.
● PWAs are installable and live on the user's home screen,
without the need for an app store.
● You can deploy your app as a PWA as well as Native app
and take advantage of both channels.
● Desktop progressive web apps can be 'installed' on the
users device much like native apps.

4. Why PWA?
We all have used Android or iOS apps on our smartphones. We use them
for all kinds of thing. But while installing any Android/iOS apps we
go through these problems :
1. Is this app worth downloading?
2. Do I have enough space?
3. My available data is not sufficient.
people are turning away from Android/iOS apps, because not all app
experiences are satisfying or worthwhile. Some people simply don’t
want any more apps on their phone, some even hesitate to download
any app.

5. Why PWA?
● The irony is that most of the apps have a fully
responsive website performing the same functions. So why
waste your precious disk space and your internet data on
your smartphone by installing the native app?
● The average size of apps that we install from play
store/app stores would range from 30–200MB.
● Moreover, these app needs to updated every week! But
Progressive Web Apps are within some KBs and are
automatically updated.

6. Features of PWAs
● 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.
● Progressive - Work for every user, regardless of browser choice because
they’re built with progressive enhancement as a core tenet.
● Responsive - Fit any form factor: desktop, mobile, tablet, or forms yet to
emerge.
● Connectivity independent - Service workers allow work offline, or on low
quality networks.
● App-like - Feel like an app to the user with app-style interactions and
navigation.

7. Features of PWAs
● 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.
● Discoverable - Are identifiable as “applications” thanks to W3C manifests
and service worker registration scope allowing search engines to find
them.
● Re-engageable - Make re-engagement easy through features like Web push
notifications.
● Installable - Allow users to “keep” apps they find most useful on their
home screen without the hassle of an app store, Immersive full screen
experience .
● Linkable - Easily shared via a URL and do not require complex
installation.

8. Benefits of PWAs
● Cost Effective—For an app publisher, the biggest advantage is
the cost saving in terms of app development and maintenance.
Because it is assumed that making a website is lot more easier
than making a Android App.
● Cross Platform—Unlike any other apps, Progressive Web Apps
are not restricted to any specific platform. That means you do
not need to develop separate versions of app for different
platforms.
● Single code for all Platforms.

9. Examples
● Ola
● Flipkart
● pinterest
● Twitter
● Alibaba
● BookMyShow
● Finance Times
● Telegram
● OLX
● The Weather Channel
● Forbes
● JioCinema
● Trivago
● RedBus
● Paper Planes
● NASA Code
Some Popular Companies that do Progressive Web Apps

10. PWAs Checklist
The Lighthouse tool is able to automatically verify many items on the this
list and may prove helpful in easily testing sites.
● Site is served over HTTPS
● Pages are responsive on tablets &
mobile devices
● All app URLs load while offline
● Metadata provided for Add to Home
screen
● First load fast even on 3G
● Site works cross-browser
● Page transitions don't feel like
they block on the network
● Site's content is indexed by
Google
● Schema.org metadata is provided
where appropriate
● Social metadata is provided
where appropriate
● Canonical URLs are provided
when necessary
● Content doesn't jump as the
page loads

11. PWAs Checklist
● Site appropriately informs the user
when they're offline
● Provide context to the user about
how notifications will be used
● UI encouraging users to turn on Push
Notifications must not be overly
aggressive.
● Push notifications must be timely,
Provides controls to enable and
disable notifications
precise and relevant
● When tapped, inputs aren't
obscured by the on screen
keyboard
● Content is easily shareable from
standalone or full screen mode
● Site is responsive across phone,
tablet and desktop screen sizes
● Any app install prompts are not
used excessively
● The Add to Home Screen prompt is
intercepted

12. PWAs Checklist
● Site dims the screen when permission
request is showing
● For more Detials :
https://developers.google.com/web/pr
ogressive-web-apps/checklist
● https://www.pwastats.com/
● Provides controls to enable and
disable notifications
● Pages use the History API
● Each page has a URL
● Site uses cache-first networking
● User is logged in across devices
via Credential Management API
● User can pay easily via native
UI from Payment Request API.
● Pressing back from a detail page
retains scroll position on the
previous list page

13. Conclusions
PWA are not particular to any one device, meaning developers no
longer need to write separate code for Android, Apple, Windows,
Linux or any other devices.
With a PWA, your customer need only find your website through a
Google search, and then they’re immediately launched into your PWA.
No downloading, no waiting.
There’s also reduced user friction because they don’t need to worry
about using additional data to download your app and they don’t need
to delete your app when they require more storage on their phone.

14. Reference
Links
● https://en.wikipedia.org/wiki/Progr
essive_Web_Apps
● https://developers.google.com/web/p
rogressive-web-apps/
● https://codeburst.io/all-you-need-
to-know-about-progressive-web-app-
4ba73368da66
● https://developers.google.com/web/p
rogressive-web-apps/checklist
● https://developers.google.com/web/u
pdates/2018/05/dpwa

15. Final point
Microsoft store added
support for PWAs in
February this year
Check this
Thanks!
Contact us:
me@robertrobinson.in
robert.collegecronista.com