"I see eyes in my soup": How Delivery Hero implemented the safety system for ...
progressive web app
1. 1
Seminar ReportOn
PROGRESSIVE WEB APPS
----------------------------------------------------------
Submitted by
RAGINI
Information Technology, 3rd Year
31
In partial fulfillment for the award of the degree of Bachelor of Technology in
the department of
Information Technology,
Maulana Abul Kalam Azad UniversityofTechnology,
West Bengal, India
Department of Information Technology
Academy of technology,
Aedconagar, Hooghly,WB
2018
2. 2
ACKNOWLEDGEMENT
The achievement that is associated with the successful completion of any 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.
-----------------------------------------------------
Ragini,InformationTechnology,3rd
Year ,31
3. 3
TABLE OF CONTENTS
1 INTRODUCTION
2 WHAT IS PROGRESSIVE WEB APPS
3 FEATURES OF PROGRESSIVE WEB APPS
4 WHY BUILD A PROGRESSIVE WEB APP?
5 WHAT IS LIGHTHOUSE?
6 PRODUCTION USES CASES OF PROGRESSIVE WEB APPS.
7 SERVICE WORKERS
8 APPLICATION SHELLS
9 ADVANTAGES AND DISADVANTAGES OF PROGRESSIVE WEB APPS
10 CONCLUSION
11 REFERENCES
4. 4
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 ha ve 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:
R e liable - Load instantly and never show the downasaur, even in uncertain
network conditions.
Fas t- 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 user’s 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.
5. 5
F A ST
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.
EN G AGIN G
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:
R e spons ive: 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.
Conne ctivity Inde pe nde nt: It should work offline (via Service Workers) or
in areas of low connectivity.
R e -engageable : Through features like push notifications, users should be
able to consistently engage and re - use the app.
Ins tallable : 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.
D is coverable: Should be identified as applications and be discoverable by
search engines.
Fre s h: 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.
Progre s s ive: 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 be ing on the Home s cre en:
When the Progressive Web App criteria are met, Chrome prompts users to
add the Progressive Web App to their home screen.
6. 6
Work re liably, no matte r the ne twork conditions :
Service workers enabled K onga to send 63% less data for initial page
loads, and 84% less data to complete the first transaction!
Incre as ed e ngageme nt:
Web push notifications helped extra Electronics increase engagement by
4X. And those users spend twice as much time on the site.
Improve d conve rs ions:
The ability to deliver an amazing user experience helped AliExpress
improve conversions for new users across all browsers by 104% and on
iO S by 82%.
5.WHAT IS LIGHTHOUSE
Lighthouse (re fe r figure 5.1 ), an open- source, automated tool for improving the
quality of your Progressive Web Apps, eliminates much of the manual testing that
was previously required. You can even use Lighthouse in continuous integration
systems to catch regressions.
Fig 5.1 Lighthouse
6. PRODUCTIONUSE CASES OF PROGRESSIVE WEB APPS
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 : FlipK art is one of India's largest online shops. They created
a progressive web app, Flipkart Lite (re fe r figure 6.1) that resulted in a
70% increase in conversions. They took advantage of the super - powers
progressive web apps offer by using serv ice work ers, push
not if ications, add t o hom e screen, splash screen, and smooth
anim at ions and it resulted in the following:
7. 7
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
Hous ing: Housing.com (re fe r 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
8. 8
Fig 6.2 Add to Home Screen on Housing
Fig 6.3 Option to turn on Push Notifications
AliExpre s s : AliExpress (re fe r 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:
9. 9
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.
N ext, let's dive in further into one of the major components that makes up what we
call a progressive web app, Se rvice Worke rs
7. SERVICE WORKERS
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 DO M 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
10. 10
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, e g sw.js needs to be placed in the root directory (re fer
figure 7.1):
Fig 7. 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 (re fe r figure
7.2):
if ('serviceWorker' in navigator)
navigator.serviceWorker
.register('./sw.js')
.then(function() { console.log('Service Worker Registered'); });}
Fig 7.2
The piece of above code checks if the browser supports service workers, and if it
does, registers the service worker file. O nce the service worker is registered, we
11. 11
start to experience its lifecycle the moment a user visits the page for the first
time.
7.1 LIFECYCLE O F SERVICE WO RKERS
Ins tall: An install event is triggered the first time a user visits the page.
During this phase, the service worker is installed in the browser. During
this installation, you can cache all the static assets in your web app (re fer
figure 7.1.1)
// Install Service Worker
self.addEventListener('install', function(event) {
console.log('Service Worker: Installing....');
event.waitUntil(
// Open the Cache
caches.open(cacheName).then(function(cache) {
console.log('Service Worker: Caching App Shell at the moment......');
// Add Files to the Cache
return cache.addAll(filesToCache);
})
12. 12
);
});
Fig 7.1.1
o The filesToCache variable represents an array of all the files you
want to cache
o The cacheN ame refers to the name given to the cache store
Activate: This event (re fe r figure 7.1.2) is fired when the service worker
starts up.
// Fired when the Service Worker starts up
self.addEventListener('activate', function(event) {
console.log('Service Worker: Activating....');
event.waitUntil(
caches.keys().then(function(cacheNames) {
return Promise.all(cacheNames.map(function(key) {
if( key !== cacheName) {
console.log('Service Worker: Removing Old Cache', key);
13. 13
return caches.delete(key);
}
}));
}) );
return self.clients.claim();
Fig 7.1.2
Here the service worker updates its cache whenever any of the app shell files
change.
Fe tch: This event (re fe r figure 7.1.3) helps serve the app shell from the
cache. caches.match()dissects the web request that triggered the event, and
checks to see if it's availab le in the cache. It then either responds with the
cached version or uses fetch to get a copy from the network. The response
is returned to the web page with e.respondWith().n{
console.log('Service Worker: Fetch', event.request.url);
console.log("Url", event.request.url);
event.respondWith(
caches.match(event.request).then(function(response) {
14. 14
return response || fetch(event.request);
}));});
Fig 7.1.3
At this time of writing, service workers are supported by Chrome, O pera and
Firefox. Safari and Edge don't support it yet.
8. APPLICATION SHELL
The application shell (re fe r figure 8.1) is the minimal HTML, CSS and JavaScript
powering the user interface of your app. A progressive web app ensures that the
application shell is cached to ensure fast and instant loading on repeated visits to
the app.
Fig 8.1 Application Shell
9. ADVANTAGES AND DISADVANTAGES OF PROGRESSIVE WEB APPS
9.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
15. 15
MBs as a native app, can be reduced to about 500K B when made an
PWA.
N o Updates Required: PWAs gets updated like web - pages. You get the
latest version when you use. N o 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.
10.2 DISADVANTAGES
Developing high- quality web experiences can be difficult for less
skilled development teams
Platform limitations prevent PWAs from providing re - engagement for
iO S 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.
16. 16
10. CONCLUSION
Let’s sum up why Progressive Web Apps might be the right fit for your web service.
The y cos t much le s s than native apps to de ve lop, and can be
implemented using your existing web framework with no additional
programming languages and technologies,
M os t ke y fe atures are the re to provide an ‘app-like ’ e xpe rie nce: push
notifications, pinning to home screen, sync in the background, offline
functionality, etc., along with an app - like look and feel,
The app will be e as y to e xpand piece- by- piece with new functionality,
PWAs are cros s -platform, so you can save time on adapting your service
to many different environments,
The y are backe d and promote d by Google , ensuring that the approach
will only grow in popularity,
Bypas sing the Play Store /App Store allows you to get yo ur app to market
faster.
