PWA

1. SEMINAR PRESENTATION
BY:-
BASIT MEHRAJ MIR
CSE-17-41
ISLAMIC UNIVERSITY

2. PROGRESSIVE WEB
APPS (PWA)
THE FUTURE OF MOBILE WEB

3. CONTENTS
 Introduction
 Characteristics and features
 Why to build progressive web
Applications ?
 Technology components used in PWA’s
 Advantages and limitations of PWA’s
 Impact and influence of PWA’s
 Conclusion
 References

4. INTRODUCTION
 Progressive Web Apps is a web app that uses modern web capabilities to
deliver an app-like experience to users. They use emerging web browser
APIs and features along with traditional progressive enhancement strategy
to bring a native app-like user experience to cross-platform web
applications.
 They are simply created same as websites by use of CSS, HTML and
JavaScript and their content can be accessed the same way as with a native
app, across different platforms.
 They are hosted directly on their associated website. Developers can update
them directly on their web server.

5. INTRODUCTION CONT…
 The application type attempts to combine features offered by most modern
browsers with the benefits of mobile experience.

6. CHARACTERISTICS AND FEATURES
 Progressive - Work for every user, regardless of browser choice, because they are built with
progressive enhancement.
 Responsive -PWAs should adapt to various screen sizes and orientations. A high-quality
responsive design will help to ensure that the application will continue to work with new
devices in the future.
 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 -The PWA is secure by default. The technology that powers PWA requires applications to
be served over HTTPS to work.
 Discoverable - Are identifiable as “applications” thanks to W3C manifests and service worker
registration scope allowing search engines to find them.
 Linkable - Easily share the application via URL, does not require complex installation.
 Engaging - Usually, native apps are considered to be more engaging than web apps. An icon
on the screen makes it easy to get into the application and push notifications can help alert
users of important info for them. Progressive Web Applications allow users to get the same
benefits with web solutions.

7. WHY BUILD PWA’S ?
 They are fast, cost-effective, reliable and engaging .
 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.
 TechCrunch reported that the majority of U.S. consumers (51 percent)
downloaded zero apps per month.
 According to Kissmetrics, almost half (47 percent) of consumers expect a page
to load in two seconds or less, and 40 percent of consumers will abandon a
website that takes more than three seconds to load.
 Gartner predicted in 2017 that by 2020 half of consumer-facing apps would be
Progressive Web Apps.

8. CONT…
 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%
 Many popular websites and top companies such as Twitter, Flipkart, Alibaba,
Pinterest, Telegram e.t.c use PWA.

9. TECHNOLOGY COMPONENTS
It doesn’t take much to set up a PWA. There are three
things you need to provide before your site turns into a
valid PWA.
 A secure connection (HTTPS): PWAs only work on
trusted connections, you have to serve them over a
secure connection. This is not only for security reasons,
but it’s also a very important trust factor for users.
 A service worker: A service worker is a piece of script
that runs in the background. This helps you determine
how to handle network requests for your PWA, making
it possible to do more complex work.
 The manifest file: This JSON file contains information on
how your PWA should appear and function. Here, you
determine the name, description, icons, colors, et cetera.

10. ADVANTAGES
 It is much more cost-effective to develop a PWA than a native app.
 Maintaining a PWA does not require much effort.
 Being essentially the web pages, the PWAs can only be refreshed while using
and require no update function
 Service Worker technology provides quick loading of your app regardless of the
network connection quality.
 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.
 Security of the PWAs is ensured via HTTPS hosting.
 There are no platform limitations. This means that users can view the contents of
a PWA on any mobile device.
 The connection between the user and the web content is strengthened by the
“installation” of the PWA.

11. LIMITATIONS
Progressive web apps are supposed to be the next big thing, but they do have their
drawbacks
 Some browsers (Chrome or Opera) support PWA, while Edge, Safari or IE do not
yet.
 they do not support functionality such as home screen shortcut prompting and
notifications on iOS devices.
 Native apps can interact with other applications and authenticate logins
(Google, Twitter or Facebook). PWA, as a web page, can not communicate with
other apps installed.
 PWAs do not have support for any hardware that is not supported by HTML5.

12. IMPACT AND INFLUENCE
Some examples and impacts of PWA :-
TWITTER LITE
Twitter lite is now the fastest, least expensive and
reliable way to use.it rivals the performance of native app but
requires less than 3% device storage space
 65% increase in pages per session.
 75% increase in tweets sent.
 20% decrease in bounce rate.

13. CONT…
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.

14. CONT…
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.

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

16. References
 What Are Progressive Web Apps? https://www.howtogeek.com/342121/what-are-progressive-web-apps
 https://ionicframework.com/docs/developer-resources/progressive-web-apps/
 https://www.searchmetrics.com/glossary/progressive-web-apps/
 Progressive Web Apps (PWA) may be the great equalizer for Microsoft, Google and Apple:
https://www.windowscentral.com/great-equalizer-microsoft-google-and-apple-embrace-progressive-web-apps
 Progressive Web Apps are here. What’s the big deal? https://blog.mozilla.org/firefox/progressive-web-apps-whats-
big-deal/
 Why Progressive web apps are better options for your startup? https://medium.com/@dreamtoipo/why-
progressive-web-apps-are-better-options-for-your-startup-bf69e0a664f0
 https://www.dcodegroup.com/blog/progressive-web-apps

17. Thank You!