‫اﻟﻌﺎﻟﻲ واﻟﺒﺤﺚ اﻟﻌﻠﻤﻲ‬ ‫‪Republic of Iraq‬‬

‫ﺟﺎﻣﻌــــﺔﺑﺎﺑــــﻞ‬ ‫‪Ministry of Higher Education and‬‬

‫ﻛﻠﯿــــــﺔﺗﻜﻨﻮﻟﻮﺟﯿﺎاﻟﻤﻌﻠﻮﻣﺎت‬ ‫‪Scientific Research‬‬
‫‪University of Babylon‬‬
‫ﻗﺴﻢ ﺷﺒﻜﺎت اﻟﻤﻌﻠﻮﻣﺎت‬
‫‪College of Information Technology‬‬
‫اﻟﺘﻘﺮﯾﺮ اﻟﻨﮭﺎﺋﻲ‬ ‫‪Department of Information Network‬‬

‫اﻟﺘﻘﺮﯾﺮ اﻟﻨﮭﺎﺋﻲ‬
‫ﻟﻠﻌﺎم اﻟﺪراﺳﻲ ‪ 2020-2019‬اﻟﻔﺼﻞ اﻟﺪراﺳﻲ )اﻟﺜﺎﻧﻲ(‬

‫ﺗﻘﺮﯾﺮ ﺑﻌﻨﻮان‬
‫‪Progressive Web App‬‬
‫اﻋﺪاد اﻟﻄﺎﻟﺐ‬
‫ﻋﻠﻲ ﻋﺒﺪ اﻟﺠﺒﺎر ﻣﻨﻌﻢ ﻛﺎظﻢ اﻟﺠﻨﺎﺑﻲ‬
‫ﻟﻤﺎدة)‪ (Web Page Applications‬اﻟﻤﺮﺣﻠﺔ ) اﻟﺮاﺑﻌﮫ ( اﻟﺪراﺳﺔ) اﻟﺼﺒﺎﺣﻲ (‬

‫ﺑﺎﺷﺮاف اﻻﺳﺘﺎذ‬
‫ﺟﻮرج ﻋﺠﺎم‬
-Abstract

The achievement that is associated with the

successful completion of task would be
incomplete without mentioning the names of
those people whose endless cooperation made it
possible. Their constant guidance and
encouragement made all our effort successful.
I take this opportunity to express my deep
gratitude towards my project mentors, for giving
such valuable suggestion, guidance and
encouragement during the development of this
project work and also to the Internet
 1. INTRODUCTION

1.1 INTRODUCTION TO PROGRESSIVE WEB APPS

A progressive web application is basically a website built
using modern web
technologies but acts and feels like a mobile app. In 2015,
Alex Russell, Google engineer, and Frances Berriman coined
the term Progressive Web Apps. Google has been immensely
working on making sure that progressive web apps can really
give
users that native-app like experience. The flow of a typical
progressive web app goes thus:
Starts out as accessible in tabs on the Web browser
Shows the option of adding to the home screen of the
device
Progressively starts exhibiting app-like properties such as
offline usage,
push notifications and background sync
Until now, mobile apps could do a lot of things that web apps
couldn't really do. Progressive Web Apps, are web apps that
try to do what mobile apps have been doing for a long time.
They are web applications that combine the best of the web
and the best of apps. Progressive Web Apps, can load very
fast on slow network
connections, work offline, send push notifications, and load
on the home screen with the power of web app manifest.
2.WHAT IS PROGRESSIVE WEB APPS

Progressive Web Apps are user experiences that have the

reach of the web, and are:
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.
This new level of quality allows Progressive Web Apps to earn
a place on the user's home screen
RELIABLE
When launched from the users home screen, service workers
enable a Progressive Web App to load instantly, regardless of
the network state. A service worker, written in JavaScript, is
like a client-side proxy and puts you in control of the cache
and how to respond to resource requests. By pre- caching
key resources, you can eliminate the dependence on the
network, ensuring an instant and reliable experience for your
users.
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.
ENGAGING
Progressive Web Apps are installable and live on the user’s
home screen,
without the need for an app store. They offer an immersive full
screen.
3. FEATURES OF PROGRESSIVE WEB APPS

What does it mean for a web app to be progressive? This new

class of web
applications have characteristics that defines their existence.
Without much ado, these are the features of progressive web
apps:
Responsive: The UI must fit the devices form factor:
desktop, mobile, and
tablet.
App-like: When interacting with a progressive web app, it
should feel like a
native app.
Connectivity Independent: It should work offline (via
Service Workers) or
in areas of low connectivity.
Re-engageable:Through features like push notifications,
users should be
able to consistently engage and re-use the app.
Installable: A user should be able to add it on their home
screen and just
launch it from there whenever they need to re-use the app.
Discoverable: Should be identified as applications and be
discoverable by
search engines.
Fresh: Should be able to serve new content in the app
when the user is
connected to the internet.
Safe: Should be served via HTTPS to prevent content-
tampering and man-in-
the-middle attacks.
 Progressive: Regardless of the browser choice, it should
work for every
user.
Linkable: Easy to share via URL
.
4. WHY BUILD A PROGRESSIVE WEB APP?

Building a high-quality Progressive Web App has incredible

benefits, making it easy to delight your users, grow
engagement and increase conversions.
Worthy of being on the Home screen:
When the Progressive Web App criteria are met, Chrome
prompts users to add the Progressive Web App to their home
screen.
5

Work re liably, no matte r the ne twork conditions :

Service workers enabled Konga to send 63% less data for
initial page loads, and 84% less data to complete the first
transaction!
Increased engagement:
Web push notifications helped extra Electronics increase
engagement by 4X. And those users spend twice as much
time on the site.
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%.
5.PRODUCTIONUSECASESOFPROGRESSIVEWEBA
PPS
Several developers and companies have re-developed their
websites into progressive web apps. I'll give a summary of
three significant products that are progressive web apps and
the benefits they have accrued over time.
FlipKart Lite: FlipKart is one of India's largest online
shops. They created
a progressive web app, Flipkart Lite (refer figure 6.1) that
resulted in a 70% increase in conversions. They took
advantage of the super-powers progressive web apps offer by
using service workers, push notifications, add to home screen,
splash screen, and smooth animations and it resulted in the
following:
6

o 3x less data usage

o 40% higher re-engagement rate
o Users spend more time on the platform o 70% conversion
rate
 ‫تسمية توضيحية‬
Fig 6.1 Add to Home Screen on Flipkart

Housing: Housing.com (refer figure 6.2 and 6.3) is one of

India's foremost startups. They provide an online real estate
platform in India. They created
a progressive web app which resulted in a 38% increase in
conversions across browsers and also the following:
o 40% lower bounce rate
o 10% longer average session
o 30% faster page loading
 Fig 6.2 Add to Home Screen on Housing

Fig 6.3 Option to turn on Push Notifications

AliE
 AliExpress: AliExpress (refer figure 6.4), the very popular
global online retail marketplace had the challenge of getting
users to download their mobile app and re-engage as much
as they wanted. To solve this challenge, they decided to
create a progressive web app for their mobile web users and
the results were very impressive:

o 104% increase in conversion rate for new users

o 74% increase in time spent per session across all browsers
o 2X more pages visited per session per user across all
browsers

Fig 6.4 AliExpress Mobile Navigation

These companies have benefitted immensely from deploying
progressive web apps. Next, let's dive in further into one of
the major components that makes up what we call a
progressive web app, Service Workers

6. SERVICEWORKERS

A service worker is a programmable proxy, a script, that your

browser runs in the
background. It has the ability to intercept, handle http
requests and also respond to them in various ways. It
responds to network requests, push notifications, connectivity
changes and many more. Jeff Posnick, a Google engineer,
gave one of
the best explanation that I have seen:
Service Worker is an air traffic controller. Think of your web
apps requests as planes taking off. Service Worker is the air
traffic controller that routes the requests. It can load from the
network or even off the cache.
A Service worker can't access the DOM but it can make use
of the Fetch and Cache APIs. You can use the service worker
to cache all static resources, which automatically reduces
networ k requests and improve performance. The Service
worker can be used to display the application shell, inform
users that
9

they are disconnected from the internet and serve up a page

for the user to interact with once they are offline.
A Service worker file, eg sw.js needs to be placed in the root
directory (refer figure 6-1):

To get started with service workers in your progressive

Figr6-1 Service Worker file in the root

directory

To get started with service workers in your progressive

web app, you need to register the service worker in your app's
js file. If your application's js file
was app.js, then inside the file, we'll have a piece of
JavaScript code (refer figure6-2)
 Fig 6-2

The piece of above code checks if the browser supports

service workers, and if it does, registers the service worker
file. Once the service worker is registered, we start to
experience its lifecycle the moment a user visits the page for
the first time

7- ADVANTAGES AND DISADVANTAGES OF

PROGRESSIVE WEB APPS

7-1 ADVANTAGES

Low on Data: In emerging markets like India, which still

have a low bandwidth, data comes at a premium. An app
which takes close to 10

MBs as a native app, can be reduced to about 500KB when

made an
PWA.
 No Updates Required: PWAs gets updated like web-
pages. You get the
latest version when you use. No need to update them every
now and
then.
You don’t need to install them to start using. They are
simple web-
pages. Users choose to ‘install’ when they like it.
Sharing is Easy: Unlike an app you can share a PWA with
its URL.

7-2 DISADVANTAGES

Developing high-quality web experiences can be difficult

for less skilled development teams
Platform limitations prevent PWAs from providing re-
engagement for iOS users.
PWAs can’t use some of the latest hardware
advancements (like fingerprint scanner), they are browser
after all!
Full support for PWAs are not available in default browsers
of some of the manufacturer's
8. REFERENCES
1.https://developers.google.com/web/progressive-web-apps/
2.https://www.upwork.com/hiring/for-clients/progressive-web-
apps-features- business-advantages/
3.https://developers.google.com/web/ilt/pwa/
4.https://auth0.com/blog/introduction-to-progressive-apps-
part-one/ 5.https://developers.google.com/web/fundamentals/p
erformance/web-pack/conclusion