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.

Are service workers draining my battery? [Talk at AmsterdamJS 2017]

691 views

Published on

Slides of my presentation at the AmsterdamJS 2017 conference.

Published in: Software
  • What Is An Equalizing Charge, Why Is It Needed, And How to Apply One To a Lead Acid Battery.. ■■■ http://t.cn/AiFAbuQp
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

Are service workers draining my battery? [Talk at AmsterdamJS 2017]

  1. 1. VRIJE UNIVERSITEIT AMSTERDAM Ivano Malavolta Ivano Malavolta Assistant professor Vrije Universiteit Amsterdam Are service workers draining my battery? VRIJE UNIVERSITEIT AMSTERDAM
  2. 2. VRIJE UNIVERSITEIT AMSTERDAM Ivano Malavolta iOS developer Who’s speaking? 2009 Android developer2010 Cross-platform developer2011 Instructor on mobile apps development for 5 years2012 VRIJE UNIVERSITEIT AMSTERDAM 2014 2016 Experiments at the GREEN LAB Empirical research on hybrid apps 2017
  3. 3. VRIJE UNIVERSITEIT AMSTERDAM Ivano Malavolta The Green Lab Our platform for researching on software – energy efficiency – performance Students measure real software solutions OpenSTF + ADB Serve web pages VMWare manager SSH MEASURES Wifi network Router Experiment orchestrator OpenSTF Web interface Power meters A PLATFORM A COURSE
  4. 4. VRIJE UNIVERSITEIT AMSTERDAM Ivano Malavolta NATIVE APP 01010101010101101010 1010101011011010 010101010101011101 010101010101011010 PLATFORM APIs Native Development strategies
  5. 5. VRIJE UNIVERSITEIT AMSTERDAM Ivano Malavolta Fragmentation Objective -C code Swift code XCode Java code C++ code Eclipse C# code C++ code Visual Studio JS code
  6. 6. VRIJE UNIVERSITEIT AMSTERDAM Ivano Malavolta NATIVE APP 01010101010101101010 1010101011011010 010101010101011101 010101010101011010 PLATFORM APIs Native Development strategies BROWSER <html> <head> <script src=” ...” /> </head> <body> ... Web
  7. 7. VRIJE UNIVERSITEIT AMSTERDAM Ivano Malavolta BROWSER <html> <head> <script src=” ...” /> </head> <body> ... NATIVE WRAPPER <html> <head> <script src=” ...” /> </head> <body> ... PLATFORM APIs NATIVE APP 01010101010101101010 1010101011011010 010101010101011101 010101010101011010 PLATFORM APIs Native Web Hybrid Web-based hybrid apps
  8. 8. VRIJE UNIVERSITEIT AMSTERDAM Ivano Malavolta BROWSER <html> <head> <script src=” ...” /> </head> <body> ... NATIVE WRAPPER <html> <head> <script src=” ...” /> </head> <body> ... PLATFORM APIs NATIVE APP 01010101010101101010 1010101011011010 010101010101011101 010101010101011010 PLATFORM APIs Native Web Hybrid Progressive web apps (PWAs) Progressive BROWSER <html> <head> <script src=” ...” /> </head> <body> ... Service workers
  9. 9. VRIJE UNIVERSITEIT AMSTERDAM Ivano Malavolta The journey of a PWA 1. The user accesses the website as usual https://goo.gl/KIZydg
  10. 10. VRIJE UNIVERSITEIT AMSTERDAM Ivano Malavolta The journey of a PWA 1. The user accesses the website as usual 2. After the 3rd-4th visit, the website asks to be installed https://goo.gl/KIZydg
  11. 11. VRIJE UNIVERSITEIT AMSTERDAM Ivano Malavolta The journey of a PWA 1. The user accesses the website as usual 2. After the 3rd-4th visit, the website asks to be installed 3. The user can decide to add the app to the home screen https://goo.gl/KIZydg
  12. 12. VRIJE UNIVERSITEIT AMSTERDAM Ivano Malavolta The journey of a PWA 1. The user accesses the website as usual 2. After the 3rd-4th visit, the website asks to be installed 3. The user can decide to add the app to the home screen 4. From now on, the app is top-level, full-screen, and can receive push notifications https://goo.gl/KIZydg
  13. 13. VRIJE UNIVERSITEIT AMSTERDAM Ivano Malavolta Components of a PWA HTTPS Web Manifest Service workers { "name": "MyApplication", "short_name": "MyApp", "scope": "./webApp/", "orientation": "portrait", "display": "fullscreen", "background_color": "#fff", "description": "A simple application for testing.", "icons": [{ "src": "images/touch/homescreen48.png", "sizes": "48x48", "type": "image/png" }, ... }], ... }
  14. 14. VRIJE UNIVERSITEIT AMSTERDAM Ivano Malavolta Service workers Implemented in JavaScript Multithreading → run in a separate thread w.r.t. the main thread Used for: • push notifications • background operations • content caching – offline functionality
  15. 15. VRIJE UNIVERSITEIT AMSTERDAM Ivano Malavolta Offline-first experience Web App Service worker response response request Backend Offline cache this.addEventListener('fetch', function(event) { event.respondWith( caches.match(event.request).then(function(response) { return response || fetch(event.request); }); ); });
  16. 16. VRIJE UNIVERSITEIT AMSTERDAM Ivano Malavolta Our experiment PWAs have been advertised as: • performance boosters • network savers • providers of better UX However…
  17. 17. VRIJE UNIVERSITEIT AMSTERDAM Ivano Malavolta PWAs selection • Real PWAs from the pwa.rocks1 repository • Pseudo-random selection – no toy examples – data-driven PWAs (aka no videogames) 1 https://pwa.rocks Name Category Total size SW size (loc) Ali Express Shopping 2.1Mb 69 Google I/O 2016 Events 4.2Mb 358 The Washington Post News 4.0Mb 85 Flipkart Shopping 3.8Mb 907 Babe News News 1.2Mb 156 Wiki offline Knowledge 800Kb 1009 The Billings Gazette News 2.1Mb 60
  18. 18. VRIJE UNIVERSITEIT AMSTERDAM Ivano Malavolta Experiment design What we measure Energy consumption of the device in Joules Variable name Treatments SW status <on, off> Android device <high-end, low-end> Network condition <2G, WiFi> What we control What we measure
  19. 19. VRIJE UNIVERSITEIT AMSTERDAM Ivano Malavolta Experiment design • full 2x2x2 factorial à all possible combinations of treatments • 8 combinations x 7 PWAs x 8 runs à • each run executes a typical usage scenario (10-15 gestures) 448 runs SW status Device Network on low-end 2G on low-end WiFi on high-end 2G on high-end WiFi off low-end 2G off low-end WiFi off high-end 2G off high-end WiFi https://goo.gl/kw8pNb
  20. 20. VRIJE UNIVERSITEIT AMSTERDAM Ivano Malavolta 7a. HTTP requests as part of the scenario Mobile device Server Measurement infrastructure Orchestration script Monkey runner Trepn profiler Chrome Monkeyrunner 1. HTTP requests impersonating phone 2. HTTP responses (recorded) 9. save collected data 3. Start experiment run 5. start 6. start 7b. HTTP responses (possibly altered) 8. collect data Fiddler proxy Hosted PWA ADB OS 4. start scenario run
  21. 21. VRIJE UNIVERSITEIT AMSTERDAM Ivano Malavolta Results - devices Overall energy consumption across devices Low-end High-end High difference across devices
  22. 22. VRIJE UNIVERSITEIT AMSTERDAM Ivano Malavolta Results: SW-on VS SW-off Low-end High-end Smaller difference in the high-end device Service workers DO NOT influence the energy consumption of a PWA running on a mobile device
  23. 23. VRIJE UNIVERSITEIT AMSTERDAM Ivano Malavolta Results – network conditions High-end + 2G Low-end + 2G Low-end + WiFi High-end + WiFi PWAs consume less energy on WiFi Same device + same network condition à low impact of SWs
  24. 24. VRIJE UNIVERSITEIT AMSTERDAM Ivano Malavolta PWA-specific trends Low-end 2G WiFi High-end Different PWAs à different impact of SWs Same PWA à SWs have a different impact under different conditions - - - - + + + + - +
  25. 25. VRIJE UNIVERSITEIT AMSTERDAM Ivano Malavolta How does each SW look like?
  26. 26. VRIJE UNIVERSITEIT AMSTERDAM Ivano Malavolta Results of manual review No specific trend here Name Listened events Caching Obfuscation/ minification Complexity Ali Express P, N ✓ ✓ 12 Google I/O 2016 I, A, F, M ✓ 9 The Washington Post I, A, P, N ✓ 131 Flipkart I, A, F ✓ ✓ 5 Babe News I, A, F, P, N ✓ 16 Wiki offline I, A, F, S, M, N ✓ ✓ 7 The Billings Gazette I, A, F ✓ 194
  27. 27. VRIJE UNIVERSITEIT AMSTERDAM Ivano Malavolta NEXT? iivanoo i.malavolta@vu.nl www.ivanomalavolta.com
  28. 28. VRIJE UNIVERSITEIT AMSTERDAM Ivano Malavolta References iivanoo i.malavolta@vu.nl www.ivanomalavolta.com

×