‫‪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‬املرحلة ( الرابعة ) الدراسة( الصباحي)‬

‫باشراف االستاذ‬
‫جورج عجام‬

‫‪Page 1 of 5‬‬
 Republic of Iraq ‫جمهورية العراق‬
Ministry of Higher Education and ‫وزارة التعليم العالي والبحث العلمي‬
Scientific Research ‫جامع ــةباب ــل‬
University of Babylon ‫كلي ـ ــةتكنولوجيااملعلومات‬
College of Information Technology ‫قسم شبكات املعلومات‬
Department of Information Network ‫التقريرالنهائي‬

Abstract
Progressive Web App is a web application that uses modern
technologies to deliver a native app-like experience. The best part
of Progressive Web App is its offline feature means to use a
progressive web app user doesn't need to have any network
connection. Undoubtedly native apps are fast, but they do have
connectivity issues the performance of the app degrades as they
encounter fluctuation in the network. Another major problem faced
in a native app is its reachability as they are limited to a certain
number of devices. Progressive Web App solves all the major
problem faced by the customer and also it helps the business to
increase the conversion rate.

The progressive web application combines the best of web and

mobile apps. It is a website built using web technologies that acts
like an app. Recent advancements in the browser, availability

of service workers, Cache and Push APIs have enabled web

developers to allow users to install web apps to their home screen,

receive push notifications and even work offline.

To use a traditional app, the user must install

it beforehand which includes multiple clicks making the app

unappealing to the user. This problem is solved by using PWA
enabled webpage. The user is given the advantage of accessing

the webpage app-like by creating a desktop icon which eliminates

the need for multiple clicks. The primary characteristic of this

progressive web app is that it must work on all devices and must
enhance on devices and browsers that allow it. They take
advantage of the much larger web ecosystem, plugins and
community and the relative ease of deploying and maintaining

Page 2 of 5
 Republic of Iraq ‫جمهورية العراق‬
Ministry of Higher Education and ‫وزارة التعليم العالي والبحث العلمي‬
Scientific Research ‫جامع ــةباب ــل‬
University of Babylon ‫كلي ـ ــةتكنولوجيااملعلومات‬
College of Information Technology ‫قسم شبكات املعلومات‬
Department of Information Network ‫التقريرالنهائي‬

a website when compared to a native application in the respective

app stores.

INTRODUCTION

Progressive Web Apps (PWA) are an idea first espoused by Google

engineer Alex Russell in June 2015. Progressive

Web App uses modern web capabilities to deliver an app-like user

experience. PWA describes a collection of

technologies, design concepts, and Web APIs that work in tandem

to provide an app-like experience on the mobile web.

Native mobile app store apps do things like send push

notifications, work offline, look and feel like an app (as Apple and

Google have imagined them), load on the home screen. Mobile Web
Apps accessed in a mobile browser, by comparison,

historically haven’t done those things. Progressive Web Apps fix

that with new Web APIs, new design concepts, and

new buzzwords. Progressive Web Apps bring features we expect

from native apps to the mobile browser experience in a

way that uses standards-based technologies and run in a secure

container accessible to anyone on the web. Progressive

Page 3 of 5
 Republic of Iraq ‫جمهورية العراق‬
Ministry of Higher Education and ‫وزارة التعليم العالي والبحث العلمي‬
Scientific Research ‫جامع ــةباب ــل‬
University of Babylon ‫كلي ـ ــةتكنولوجيااملعلومات‬
College of Information Technology ‫قسم شبكات املعلومات‬
Department of Information Network ‫التقريرالنهائي‬

Web Apps are linkable with an URL, fully responsive and secure.
Progressive Web Apps start out as tabs in Chrome and

become progressively more “app” like; the more people use them,
to the point where they can be pinned on the home

screen of a phone or in the app drawer and have access to app-like

properties such as notifications and offline use.

APP SHELL
In Application Shell Architecture, the shell is served up by the
Service Worker and then the content is delivered.
These are often cached by the Service Worker from its source
through API requests. Sites that people visit more often
will be able to hold the last content the person visited while waiting
for the network to dynamically load the latest
refresh. With the App Shell model, the focus is on keeping the shell
of app UI and the content inside of it separate,
and they are cached separately. Ideally, App Shell is cached such
that it loads as quickly as possible when a user visits
and returns later. Having the shell and the content load separately
theoretically improves the user’s perception of the
performance and usability of the app.

Page 4 of 5
 Republic of Iraq ‫جمهورية العراق‬
Ministry of Higher Education and ‫وزارة التعليم العالي والبحث العلمي‬
Scientific Research ‫جامع ــةباب ــل‬
University of Babylon ‫كلي ـ ــةتكنولوجيااملعلومات‬
College of Information Technology ‫قسم شبكات املعلومات‬
Department of Information Network ‫التقريرالنهائي‬

REFERENCE
[1]. http://insanelab.com/blog/web-development/progressive-web-apps-pwa-vs-
native/
[2]. http://www.mobileqazone.com/profiles/blogs/advantages-and-
disadvantages-of-web-application-over-native
[3]. https://www.sitepoint.com/retrofit-your-website-as-a-progressive-web-app/
[4]. https://arc.applause.com/2015/11/30/application-shell-architecture/
[5]. https://medium.com/@slightlylate/progressive-apps-escaping-tabs-
without-losing-our-soul-3b93a8561955#.idmgsmkxr
[6]. https://developers.google.com/web/updates/2015/11/app-shell

Page 5 of 5