This presentation is about a lecture I gave within the "Green Lab" course of the Computer Science master, Software Engineering and Green IT track of the Vrije Universiteit Amsterdam: http://masters.vu.nl/en/programmes/computer-science-software-engineering-green-it/index.aspx
http://www.ivanomalavolta.com
3. 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)
4. Vrije Universiteit Amsterdam
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>
8. Vrije Universiteit Amsterdam
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
10. Vrije Universiteit Amsterdam
Every time the app calls the server, it renders a new HTML page
e.g., standard PHP websites
https://goo.gl/3d1eX6
11. 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
13. Vrije Universiteit Amsterdam
● 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
14. Vrije Universiteit Amsterdam
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
15. Vrije Universiteit Amsterdam
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
17. Vrije Universiteit Amsterdam
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)
18. Vrije Universiteit Amsterdam
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
19. Vrije Universiteit Amsterdam
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
2. After the 3rd-4th visit, a prompt is shown
○ The prompt is populated from the
Manifest
https://goo.gl/KIZydg
20. Vrije Universiteit Amsterdam
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
2. After the 3rd-4th visit, a prompt is shown
○ The prompt is populated from the
Manifest
3. The user can decide to add the app to the
home screen or app launcher
https://goo.gl/KIZydg
21. Vrije Universiteit Amsterdam
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
2. After the 3rd-4th visit, a prompt is shown
○ The prompt is populated from the
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://goo.gl/KIZydg
23. Vrije Universiteit Amsterdam
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.
24. Vrije Universiteit Amsterdam
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
25. Vrije Universiteit Amsterdam
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">
27. Vrije Universiteit Amsterdam
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
28. Vrije Universiteit Amsterdam
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
29. Vrije Universiteit Amsterdam
It can control the web page/site it is associated with, intercepting and
modifying network requests
https://goo.gl/SC62O6
30. Vrije Universiteit Amsterdam
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);
});
}
https://goo.gl/SC62O6
31. Vrije Universiteit Amsterdam
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', ...
]);
})
);
});
https://goo.gl/SC62O6
Usually here developers define
static resources to be cached
32. Vrije Universiteit Amsterdam
this.addEventListener('fetch', function(event) {
event.respondWith(
new Response('<p>I am a static response</p>', {
headers: { 'Content-Type': 'text/html' }
})
);
});
VS
this.addEventListener('fetch', function(event) {
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
https://goo.gl/SC62O6