Introduction of Progressive Web App

Sankalp Khandelwal
Sankalp Khandelwal

Corner Stone for Web App
Poor time for the Web Apps
• Web apps depend on internet
connectivity
• Slow servers and loading time
• Cannot install the web app
• Traffic spikes
• Less interaction between the users and
the website.x
• Failing to optimize bandwidth Usage

Notifications
Predictable
Easy to find them on home screen
General Survey
Mobile Guide

What is a Progressive Web App
 Progressive Web App (PWA) is a term used to denote a new software development
methodology. Unlike traditional applications, progressive web apps are a hybrid of
regular web pages (or websites) and a mobile application This new application model
attempts to combine features offered by most modern browsers with the benefits
of mobile experience.
 This is more like a glorified book mark that has hit the sweet spot between the web
and mobile apps.
 PWA reduces the steps between discovery of an app and getting it on the home
screen and there by eliminate friction of getting an app installed. This provides a very
fertile ground for businesses to pitch in their PWA.

Google compared top 1000 mobile apps vs. top 1000 mobile app properties
(web) to study the reach and user engagement. The results of the
comparison showed a great disparity in user behaviour.
The Idea of Progressive Web Apps

1.Progressive
PWA works for all user on all browser and builds up
continuously; taking the benefits of features found
in user’s device and browser.

PWA‘s UI fit on all devices forms, factor and
size: mobile, desktop and tablet. Responsive
feature is achieved using the material design,
fluid grid concepts, CSS3 media queries and
flexible images
2. Responsive

3. Looks and feel just like Native App

4. Connectivity
Independent
PWA does not treat loss of
connectivity as an error, but as an
eventuality, which can be planned
for, and handled with grace.

Implementation of HTTPS connection
and SSL certificate to serve the page is a
must to prevent man-in-the-middle
attacks, password intruding and making
sure content is not manipulated.
5. Safe

6. Fresh
New content published gets an
update once the user is connected
to the Internet due to the service
worker update process.

7. 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.

8. Re-engageable
Tools like push notification
come handy as instant pop-
ups help establish and engage
the virtual relation with the
user.

9. Lightweight
Even though PWAs are
packed with amazing
features, they are
extremely lightweight.

10. Reliable
When launched from the
user’s home screen, service
workers enable a
Progressive Web App to
load instantly, regardless of
the network state.

Twitter has adopted PWA technology to improve the mobile engagement and reduce the data usage
of its users. The social media giant has 328 million monthly active users all around the globe, among
which 80% are mobile users.
Twitter Lite is interactive in less than 5 seconds over 3G on most devices, with average load times
reduced by over 30%.

BookMyShow is the largest online ticketing firm in India with over 50+ million monthly visitors. They
noticed 80+ % boost in purchasing tickets after developing Progressive Web App for the mobile
BookMyShow has observed 80%+ increase in their conversion rates. The PWA takes less than 2.94
seconds to load and enables checkout within 30 seconds.

Pinterest Average time spent has increased by 40%
User-generated Ad revenue is up by 44%

When you open the
Flipkart URL on your
mobile’s browser, you
will get something like
this:
When you open the
browser’s menu, you
will see the
option Add to Home
Screen.
If you get a prompt
as shown below,
you will know that
you are adding a
PWA to your home
screen.
Once your PWA is
installed, it will
appear on your
home screen like
this:

What PWAs can do on Android and not on iOS
 On Android you can store more than 50 Mb.
 Speech Recognition
 Background Sync and Web Push Notifications.
 You can customise (a little bit) the splash screen and
orientations you want.
 With WebAPK and Chrome, the PWAs appears under
Settings and you can see data usage; on iOS
appears under Safari.
 Android doesn’t delete the files if you don’t use the
but it can delete the files under storage pressure.

IOS Speculation
 Progressive Web Apps are no longer
limited to Android users.
 Apple has quietly added support for
technologies that make PWAs work.
 Allowing you to install apps without any
approval from the App Store.
 OS 11.3 and macOS 10.13.4 include Service
Workers — a powerful specification that
allows background scripts to power offline
web applications.

How can I convert existing website to PWA

PWA Manifest
Manifest is a simple JSON file that gives the developer
the ability to control how the app should appear to the
user in areas where they would expect to see apps (a
mobile device’s home screen), direct what the user can
launch, and define its appearance at launch.

Push Notifications
 Push Notifications are assembled using two APIs:
the Notifications API and the Push API. The
Notifications API lets the app display system
notifications to the user. The Push API allows a service
worker to handle Push Messages from a server, even
while the app is not active.
 The Notification and Push API’s are built on top of
the Service Worker API, which responds to push
message events in the background and relays them to
your application.

Service Worker Concepts
 Service Workers are an incredibly powerful, and equally as confusing, technology behind a Progressive
Web App.
 They power offline functionality, push notifications, background content updating, content caching, and a
whole lot more.
 Service Workers are available on Android with Chrome 50 and not currently supported by other major
mobile browsers.
 These are the API which are like event driven. They allow the mobile web apps to get the data load, even
after there is no network available.
 Provide the technical foundation that features like offline experiences, periodic background syncs, and
push notifications rely on.
 The programmatic API allows developers to decide how to handle caching and provides a much more
flexible experience than other options.

 The PWAs support not all browsers. Of course, the newer versions of such popular browsers as Opera,
Samsung’s Android browser and Chrome do support PWA, however, Internet Explorer, Safari, Edge and
many other custom browsers do not.
 Unfortunately, not all devices support the entire software functionality. For example, a progressive app for
Android devices has some support issues, and a progressive app for iOS devices does not support
notifications and shortcut prompting on the home screen. Herewith, the iOS devices cover about 50% of
the mobile device market in the USA.
 Hardware functionality is also not supported on all devices. The hardware components, which are
supported by the native apps (fingerprint scanners, GPS, and camera) are not supported by the PWAs.
 There is no download store, since the app stores are very convenient repositories, which help users search
applications. For this reason, some difficulties might occur with the search of the PWAs and proving their
legitimacy.
 The PWAs do not support cross application logins. Unlike many applications, requiring an individual login,
the PWAs can not collect this data independently.

 Progressive Web Apps have immense potential and are evolving the mobile web scene.
 Reduce development lead time- The biggest benefit offered by PWA’s is the fact that you will only need
to develop a single version of your app and make it accessible to all potential users, no matter what device
they use.
 Low Cost- PWA’s take less amount of time to build and are relatively cheaper to develop, bringing the
cost of PWA’s lower than native apps.
 Unified customer experience- Swapping native apps for PWA’s also means that all your customers have
access to the same version of your app. This uniformity across platforms can help ensure you are able to
consistently deliver a powerful and optimized user experience to your entire user-base.
 Easy access and increased engagement- One of the goals of great web design is to provide the user
with the content, information, and experience they need, using the fewest number of steps. This is an area
where PWA’s really shine as they require a minimum amount of effort to provide what the user needs.
PWA’s offer a complete user experience on mobile without the need to download and install an app.

Introduction of Progressive Web App

Recommended

More Related Content

What's hot (20)

Similar to Introduction of Progressive Web App (20)

Recently uploaded (20)

Introduction of Progressive Web App