The Green Lab - [02 C] [case study] Progressive web apps

Vrije Universiteit Amsterdam
A software built with web technologies that is accessible via a
mobile browser
The browser may be either
the standard device browser
or an embedded browser
(hybrid app)

Goal of HTML5 code is to represent
the structure and contents of the
web page
You can see it as a passive container
of data to be presented to the user
When the user interacts with the
display, it triggers events managed
by the JavaScript code
<!DOCTYPE html>
<html>
<head>
<title>Title</title>
</head>
<body>
…
</body>
</html>

<form action="/computeResult.php" method="post" name="myform">
Enter a value :
<input type="text" name="name" />
<input type="email" name="email" />
<input type="number" name="phone" />
<input type="date" name="birthdate" />
<input type="button" value="Send" />
</form>

Describes how HTML elements are to be displayed
External stylesheets are stored in CSS files
with CSS without CSS

A couple of examples...

JavaScript is the programming code that can be
inserted into HTML pages
○ it can react to events in the DOM
○ it can modify the DOM
Interpreted language
○ see the eval() function
JavaScript HAS NOTHING TO DO WITH Java

Quick example

Every time the app calls the server, it renders a new HTML page
e.g., standard PHP websites
https://goo.gl/3d1eX6

Vrije Universiteit Amsterdamhttps://goo.gl/3d1eX6
● The application logic is inside a single HTML page
● Data is displayed by updating the HTML DOM in place
○ more fluid w.r.t. a page refresh
● Data is retrieved from the application server using JavaScript

● Web app
○ Acts as a client for user interaction
● Application server
○ Receives requests from the app (usually HTTP messages)
○ Handles business logic
○ Fetches data from the data repo
○ Provides data to apps (with XML or JSON payload)
● Data repository
○ Stores raw data
○ Mainly passive

Mobile web apps:
● do not work offline
● no background activities
○ e.g., geofencing
● poor distribution (no app store)
● they are launched via a browser
● poor access to system APIs
○ push notifications, camera, contacts, etc.
● can be unsecure

Pros:
● rich user interfaces and/or heavy graphics
● work offline,
● ...
Cons:
● FRAGMENTATION
○ development and maintainability costs
● slow iteration pace (stores mediation)
● no indexing by search engines
● no portability
○ an app cannot be deployed on other platforms

Progressive web apps
(PWA)

INTUITION: to combine the best of web and native apps
A PWA is a web app, its life starts as a browser tab
→ no install required, then it becomes an app
PWAs can work offline
Live in a server → no update distribution delays
Support push notifications
Live in the home screen of the mobile device
Load as top-level, full screen experiences (no browser tabs)

1. The user accesses the website as usual
○ It does not do anything special, but it
has already PWA features like TLS,
service workers, manifests, and
responsive design

responsive design
2. After the 3rd-4th visit, a prompt is shown
○ The prompt is populated from the
Manifest
https://goo.gl/KIZydg

responsive design
Manifest
3. The user can decide to add the app to the
home screen or app launcher

responsive design
Manifest
3. The user can decide to add the app to the
home screen or app launcher
4. When launched from the home screen, the
app is top-level, full-screen, and can receive
push notifications

https://developers.google.com/web/showcase/
Check it yourself:
chrome://serviceworker-internals/

A website can be considered a PWA if:
1. it is served over HTTPS
○ this is a requirement for avoiding man-in-the-middle attacks
2. it comes with a Manifest file
○ it declares app name, icon, base URL, etc.
3. it uses service workers
○ a set of APIs for allowing the developer to safely cache and preload data,
managing push notifications, etc.

Service workers have a strong control over the data exchanged with
the server
→ the standard mandates to serve them using HTTPS
You can serve contents via HTTPS using the serve-https package
○ http://www.npmjs.com/package/serve-https
You can create your own certificates using Let’sEncrypt
○ http://letsencrypt.org
For additional information on HTTPS for WPA, check out this video
(30 mins):
○ https://youtu.be/e6DUrH56g14?list=PLNYkxOF6rcIAWWNR_Q6eLPhsyx
6VvYjVb

Purpose: to integrate your app into the device OS
○ icon, name, description of the web app
○ homescreen/launcher integration
○ background color
○ splash screen
○ ...
Included in the HTML code via
<link rel="manifest" href="/manifest.webmanifest">

{
"name": "MyApplication",
"short_name": "MyApp",
"scope": "./webApp/",
"start_url": "./?launchedFromHome=true",
"orientation": "portrait",
"display": "fullscreen",
"background_color": "#fff",
"description": "A simple application for testing.",
"icons": [{
"src": "images/touch/homescreen48.png",
"sizes": "48x48",
"type": "image/png"
}, ...
}],
"related_applications": [{
"platform": "play",
"url": "https://play.google.com/store/apps/details?id=ID_APP"
}]
}
https://developer.mozilla.org/en-US/docs/Web/Manifest

Web standard (http://www.w3.org/TR/service-workers)
● offline functionality
● content caching
● push notifications
● performance enhancing
○ eg via data preloading
● background computation
● ...
INTUITION: you can see it as a
programmable network proxy,
allowing you to control how
network requests from your page
are handled

It is a special case of web worker
→ it runs in a separate thread w.r.t. the main JavaScript thread
It is implemented as a separate JavaScript file
In order to be independent from other workers, each worker script
cannot access:
● the DOM
● the global window object
○ each web worker has its own self global object

It can control the web page/site it is associated with, intercepting and
modifying network requests
https://goo.gl/SC62O6

if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('/sw-test/sw.js', {scope: '/sw-test/'})
.then(function(reg) {
// registration worked
console.log('Registration succeeded. Scope is ' + reg.scope);
}).catch(function(error) {
// registration failed
console.log('Registration failed with ' + error);
});
}

this.addEventListener('install', function(event) {
event.waitUntil(
caches.open('v1').then(function(cache) {
return cache.addAll([
'/sw-test/',
'/sw-test/index.html',
'/sw-test/style.css',
'/sw-test/app.js',
'/sw-test/image-list.js',
'/sw-test/gallery/snowTroopers.jpg', ...
]);
})
);
});
Usually here developers define
static resources to be cached

this.addEventListener('fetch', function(event) {
event.respondWith(
new Response('<p>I am a static response</p>', {
headers: { 'Content-Type': 'text/html' }
})
);
});
VS
event.respondWith(
caches.match(event.request).then(function(response) {
return response || fetch(event.request);
});
);
});
QUIZ
Describe the high-level behaviour
of these two fragments of code

event.respondWith(
caches.match(event.request).then(function(resp) {
return resp || fetch(event.request).then(function(response) {
caches.open('v1').then(function(cache) {
cache.put(event.request, response.clone());
});
return response;
});
}).catch(function() {
return caches.match('/sw-test/myLittleVader.jpg');
});
);
});
Other supported events:
● activate
● push
● notificationclick
● sync
● message

HTML5, CSS3, JavaScript
http://developer.mozilla.org/en-US/docs
http://www.w3schools.com
http://eloquentjavascript.net
Progressive web apps
http://github.com/hemanth/awesome-pwa
http://events.withgoogle.com/progressive-web-app-dev-summit/agenda
http://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API/

The Green Lab - [02 C] [case study] Progressive web apps

Recommended

Recommended

More Related Content

Viewers also liked

Viewers also liked (20)

Similar to The Green Lab - [02 C] [case study] Progressive web apps

Similar to The Green Lab - [02 C] [case study] Progressive web apps (20)

More from Ivano Malavolta

More from Ivano Malavolta (20)

Recently uploaded

Recently uploaded (20)

The Green Lab - [02 C] [case study] Progressive web apps