Are service workers draining my battery? [Talk at AmsterdamJS 2017]
•
2 j'aime•935 vues
Slides of my presentation at the AmsterdamJS 2017 conference.
Recommandé
Recommandé
Contenu connexe
Similaire à Are service workers draining my battery? [Talk at AmsterdamJS 2017]
Similaire à Are service workers draining my battery? [Talk at AmsterdamJS 2017] (20)
Plus de Ivano Malavolta
Plus de Ivano Malavolta (20)
Dernier
Dernier (20)
Are service workers draining my battery? [Talk at AmsterdamJS 2017]
- 1. VRIJE UNIVERSITEIT AMSTERDAM Ivano Malavolta Ivano Malavolta Assistant professor Vrije Universiteit Amsterdam Are service workers draining my battery? VRIJE UNIVERSITEIT AMSTERDAM
- 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. 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
- 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. 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. 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. VRIJE UNIVERSITEIT AMSTERDAM Ivano Malavolta The journey of a PWA 1. The user accesses the website as usual https://goo.gl/KIZydg
- 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. 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. 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. 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. 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. 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. VRIJE UNIVERSITEIT AMSTERDAM Ivano Malavolta Our experiment PWAs have been advertised as: • performance boosters • network savers • providers of better UX However…
- 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. 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. 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. 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. VRIJE UNIVERSITEIT AMSTERDAM Ivano Malavolta Results - devices Overall energy consumption across devices Low-end High-end High difference across devices
- 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. 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. 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. VRIJE UNIVERSITEIT AMSTERDAM Ivano Malavolta How does each SW look like?
- 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