Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

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

1,553 views

Published on

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

Published in: Technology
  • Be the first to comment

  • Be the first to like this

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

  1. 1. Vrije Universiteit Amsterdam
  2. 2. 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)
  3. 3. 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>
  4. 4. Vrije Universiteit Amsterdam <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>
  5. 5. Vrije Universiteit Amsterdam Describes how HTML elements are to be displayed External stylesheets are stored in CSS files with CSS without CSS
  6. 6. Vrije Universiteit Amsterdam A couple of examples...
  7. 7. 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
  8. 8. Vrije Universiteit Amsterdam Quick example
  9. 9. 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
  10. 10. 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
  11. 11. Vrije Universiteit Amsterdam
  12. 12. 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
  13. 13. 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
  14. 14. 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
  15. 15. Vrije Universiteit Amsterdam Progressive web apps (PWA)
  16. 16. 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)
  17. 17. 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
  18. 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 2. After the 3rd-4th visit, a prompt is shown ○ The prompt is populated from the Manifest https://goo.gl/KIZydg
  19. 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 3. The user can decide to add the app to the home screen or app launcher https://goo.gl/KIZydg
  20. 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 4. When launched from the home screen, the app is top-level, full-screen, and can receive push notifications https://goo.gl/KIZydg
  21. 21. Vrije Universiteit Amsterdam https://developers.google.com/web/showcase/ Check it yourself: chrome://serviceworker-internals/
  22. 22. 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.
  23. 23. 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
  24. 24. 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">
  25. 25. Vrije Universiteit Amsterdam { "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
  26. 26. 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
  27. 27. 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
  28. 28. Vrije Universiteit Amsterdam It can control the web page/site it is associated with, intercepting and modifying network requests https://goo.gl/SC62O6
  29. 29. 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
  30. 30. 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
  31. 31. 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
  32. 32. Vrije Universiteit Amsterdam this.addEventListener('fetch', function(event) { 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 https://goo.gl/SC62O6
  33. 33. Vrije Universiteit Amsterdam 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/

×