Introduction to progressive web applications

1. Progressive Web
Applications
By Akshay (MCA - IInd
Semester)

2. Topics Covered
What is a Progressive Web Application?
Characteristics of Progressive Web Applications.
History of PWA’s.
Features of PWA’s.
Why To Build Progressive Web Applications?
Technologies Used in PWA’s
Pros and Cons of Progressive Web Applications.
PWA’s and their influence.
Impact of PWA’S
Conclusion.

3. What is PWA?
● 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.
● The application type attempts to combine features offered by most modern
browsers with the benefits of mobile experience.
● A Progressive Web App (PWA) is a web app that uses modern web capabilities
to deliver an app-like experience to users.
● These apps meet certain requirements and are deployed to servers, accessible
through URLs, and indexed by search engines.

5. Characteristics of Progressive Web Apps (PWA’s)
● Progressive - Work for every user, regardless of browser choice, because they are
built with progressive enhancement as a core tenet.
● Responsive - Fit any form factor, desktop, mobile, tablet, or whatever is next.
● Connectivity independent - Enhanced with service workers to work offline or on
low quality networks.
● App-like- Use the app-shell model to provide app-style navigation and interactions.
● Fresh - Always up-to-date thanks to the service worker update process.
● Safe - Served via HTTPS to prevent snooping and ensure content has not been
tampered with.
● Discoverable - Are identifiable as “applications” thanks to W3C manifests and
service worker registration scope allowing search engines to find them.

6. History of PWA’s
● 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.
● Using a set of open standard technologies such as, service workers, the app manifest, and cache
and push APIs, we can create applications that are platform independent and deliver app-like user
experiences. This brings parity to web and native applications and helps mobile developers reach
users beyond the walled garden of the app stores. Think of PWAs as websites that act and feel like
native apps.

7. Features of PWA’s
● 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
poor quality scrolling.
● Engaging - Feel like a natural app on the device, with an immersive user
experience.

8. Why to Build
Progressive Web
Applications

9. Why To Build Progressive Web Applications
● Can Be Added To Home Screen: When the Progressive Web App criteria are met, Chrome prompts
users to add the Progressive Web App to their home screen.
● Increased Engagements : Web push notifications helped eXtra Electronics increase engagement by
4X. And those users spend twice as much time on the site.
● Work reliably, no matter the network conditions: Service workers enabled Konga to send 63% less
data for initial page loads, and 84% less data to complete the first transaction!
● Improved Conversions :The ability to deliver an amazing user experience helped AliExpress improve
conversions for new users across all browsers by 104% and on iOS by 82%.

11. Technologies Used In PWA’s
● Manifest.
● Service Workers.
● Application Shell Architecture.

12. Web App Manifest.
The web app manifest is a W3C specification defining a JSON-based manifest to provide developers a
centralized place to put metadata associated with a web application including:
● The name of the web application.
● links to the web app icons or image objects.
● The preferred URL to launch or open the web app.
● The web app configuration data for a number of characteristics.
● Declaration for default orientation of the web app.
● Enables to set the display mode e.g. full screen.
By setting and manipulating the metadata for the web manifest file, developers enable user agents to
create seamless native-like mobile experiences through the progressive web app.

13. Service Workers
Technically, service workers provide a scriptable network proxy in the web browser to manage the
web/HTTP requests programmatically. The service workers lie between the network and device to supply
the content. They are capable of using the cache mechanisms efficiently and allow error-free behavior
during offline periods.
Properties of service workers
1. Trigger and keep alive by the relationship to the events, not by the documents
2. Generic in nature
3. Event-driven with time limit scripting contexts and running at the origin

14. Application Shell Architecture
● Some progressive web apps use an architectural approach called the App Shell Model.
● For rapid loading, service workers store the Basic User Interface or "shell" of the responsive web
design web application.
● This shell provides an initial static frame, a layout or architecture into which content can be loaded
progressively as well as dynamically, allowing users to engage with the app despite varying degrees
of web connectivity.
● Technically, the shell is a code bundle stored locally in the browser cache of the mobile device.

15. Pros and Cons of
PWA’s

16. Pros of PWA’s
1. The PWAs are the web pages: therefore they do not require installation. Nevertheless, you can install a progressive
web app on your home screen for easy access anytime.
2. The same thing is with updates: Being essentially the web pages, the PWAs can only be refreshed using and require
no update function.
3. High portability is another benefit of a PWA and it does not change your packaging or deployment model unlike the
strategies for native apps.
4. Service Worker technology provides quick loading of your app regardless of the network connection quality.
5. The PWAs are always available on your home screen for easy run and return.
6. Compared to the native apps, the PWAs do not use much space and resources, which extends the battery life of a
device and requires less data usage due to the Service Worker, which provides functioning even in offline mode.
7. The use of application shell model for building the PWAs provides an interface of native apps with scrolling,
navigation and other features.
8. Due to the Service Worker technology, the PWAs sends push notifications to the device providing refreshed content
even at the closed browser.
9. Security of the PWAs is ensured via HTTPS hosting.

17. Cons of PWA’S
1. There is No Central Download Store – Traditionally, app stores have been central repositories of applications helping
users find apps and providing a level of legitimacy. PWAs do not require an app store and may have difficulty getting
users to find their apps and instilling confidence that the apps are legitimate.
2. Not all Browsers are Supported – While newer versions of Chrome, Opera, and Samsung’s Android browser support
PWA, IE, Edge, Safari and many custom and proprietary default browsers do not. At this point, Safari alone has close
to 50% of the mobile browser market.
3. Not All Native Device Software Functionality is Supported – PWA support is limited on Android devices, and they do
not support functionality such as home screen shortcut prompting and notifications on iOS devices. In the U.S., iOS
is about 50% of the mobile device market.
4. The PWAs do not support cross application logins. Unlike many applications, requiring an individual login, the PWAs
can not collect this data independently.
5. Developing high-quality web experiences can be difficult for less skilled development teams

18. Impact of PWA’s

19. Flipkart Lite
● Users time on site with Flipkart lite vs. previous
mobile experience: 3.5 minutes vs 70 seconds.
● 3x more time spent on site
● 40% higher re-engagement rate
● 70% greater conversion rate among those arriving via
Add to Homescreen
● 3x lower data usage

20. Book My Show
● BookMyShow's PWA drove an 80%+
increase in their conversion rates.
● The size of the PWA is 54x smaller than
the Android app and 180x smaller than the
iOS app.
● The PWA takes less than 2.94 seconds to
load and enables checkout within 30
seconds.

21. Conclusion
● Google, Microsoft, and many others are embracing PWA’s. For Microsoft, there is recognition that
they can make money providing service using their Azure platform, For Amazon, their Amazon Web
Services.
● PWAs are exciting because they bring back some of the excitement of writing and sharing
applications without all of the complexities of applications meant for wide market sales.
● Today’s PWAs are built on the current web, which is optimized for content distribution and
commerce. As we explore new use cases, one should expect to see much innovation, including the
development of more peer technologies rather than a focus on delivering services.
● The current technologies and protocols are already a strong basis for delivering these capabilities.
Consumer electronics devices will increasingly use PWA’s either internally or as an interface.

22. Thank You!