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 - [04 B] [PWA] Experiment setup


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:

Published in: Technology
  • Be the first to comment

  • Be the first to like this

The Green Lab - [04 B] [PWA] Experiment setup

  1. 1. 1 Het begint met een idee PWA experiment setup Ivano Malavolta
  2. 2. Vrije Universiteit Amsterdam Overview of technologies and tools PWA Swiss knife 2 Ivano Malavolta / S2 group / Empirical software engineering Roadmap
  3. 3. Vrije Universiteit Amsterdam 3 Theme PWAs have been advertised as: ● performance boosters ● network savers ● providers of better UX ● …. What about their impact on energy consumption?
  4. 4. Vrije Universiteit Amsterdam 4 Ideas 1. How does the presence of service workers impact the energy consumption of a mobile web app? 2. How does different caching strategies impact the energy consumption of a PWA? ○ eg, cache-first, network-first, no-cache → energy 3. How does different network conditions impact the energy consumption of a PWA? ○ eg, low network, fast network, no network → energy 4. How do performance and energy consumption co-relate in PWAs? ○ eg, CPU load & memory consumption → energy
  5. 5. Vrije Universiteit Amsterdam 5 Where do I find PWAs? You have two main choices: 1. Experimental in-the-lab PWA ○ you reuse a PWA developed by a Google Engineer for a demo ○ it comes in 4 flavours via a virtual machine (see next slide) 2. Real-world PWAs ○ you fetch real existing PWAs from the web ○ we provide you with a script that automatically fetches all the front-end code of a website (HTML, CSS, JavaScript + static resources) ○ Potential sources: i. ii. iii.
  6. 6. Vrije Universiteit Amsterdam 6 Potential independent variables (open list) ● Different levels of “PWA-ility” ○ standard web app ○ server-side-rendered web app ○ single-page web app ○ progressive web app ● Network conditions ● Browser type/versions (it can be even a desktop browser) ● PWA caching strategies ● Any other change you can make in the source code... ● virtual machine already implementing them ○ Based on this: ● Chrome tools ● mitmproxy: ndex.html Manual
  7. 7. Vrije Universiteit Amsterdam 7 Potential dependent variables (open list) ● Page load time ● CPU usage ● Memory consumption ● UI performance ● Network requests ○ bytes sent/received ○ packets sent/received ● Power consumption ● ADB shell ○ dumpsys ○ top ○ gfxinfo ○ ... ● mitmproxy ● Wireshark ● Trepn profiler (only Snapdragon CPUs) ○ check here first: ● Power Tutor ● Google project Volta (only Android 5+): ns/android-5.0.html#Power ● Manual logging + DDMS ● ...
  8. 8. Vrije Universiteit Amsterdam 8 Fixed factors (open list) ● Usage scenarios ● JavaScript is always enabled in the client-side ● Data provided by the server ○ you do not change the code of the APIs provided by the server ● Android monkeyrunner ○ → record-and-replay ● Android RERAN ○
  9. 9. Vrije Universiteit Amsterdam 9 What you will use in your experiments ● Android-based mobile devices ○ you can use your smartphones or tablets ○ we have 7 mobile devices that you can use in the labs ● Your laptop ○ for running desktop browsers, if needed in your experiments ○ for serving data over WIFI to your Android devices ○ for measuring the browser running in your Android devices ○ we prepared a virtual machine implementing 4 servers implementing different levels of “PWA-ility” ● We prepared a set of scripts that you can use as basis for: ○ measuring CPU load and memory consumption of an app ○ recording and executing custom usage scenarios of an app ● Trepn and PowerTutor Android apps for measuring energy
  10. 10. Vrije Universiteit Amsterdam 10 Preparation of Android profiler ● Download and install Android Studio ○ ● Put Android platform tools into your path environment variable ● Type the adb version command in the terminal and see if it works
  11. 11. Vrije Universiteit Amsterdam 11 Ivano Malavolta / S2 group / Empirical software engineering PWA Swiss knife source code:
  12. 12. Vrije Universiteit Amsterdam 12 Steps for setting up a device 1. Update Android to the latest version 2. Enable developer options 3. Install Chrome, Firefox, Opera on device a. source: 4. Install PowerTutor 5. Install Trepn 6. Check if Trepn is supported a. 349 7. Connect to laptop via USB 8. Enable USB debugging 9. Enable any other Developer feature that will help in isolating measured apps w.r.t. the rest of the system 10. Test ADB shell (am, dumpsys, batterystats, gfxinfo, etc.) 11. Test monkeyrunner
  13. 13. Vrije Universiteit Amsterdam 13 Android app management Start an activity on device (Chrome in this case) adb shell am start -n Launch an intent for opening a web page adb shell am start -a android.intent.action.VIEW -d '' Stop Chrome adb shell am force-stop Reset all the data associated with Chrome adb shell pm clear Know what is the current activity on a device adb shell dumpsys window windows | grep -E 'mCurrentFocus|mFocusedApp'
  14. 14. Vrije Universiteit Amsterdam Android app management (2) Poweroff Android device adb shell halt Reboot Android device adb shell reboot Complete reset of app data db shell clear Get the PID of an app running on device adb shell ps | grep | cut -d' ' -f5 Read information coming from calls to console.log in JavaScript adb logcat | grep "INFO:CONSOLE"
  15. 15. Vrije Universiteit Amsterdam 15 Execute usage scenarios Execute 100 random operations in the Google Chrome app in the device adb shell monkey -p -v 100 Record and replay a scenario on device adb shell am force-stop monkeyrunner <export the recorded session into scenario.txt> monkeyrunner ./ scenario.txt
  16. 16. Vrije Universiteit Amsterdam 16 Execute usage scenarios (2) Execute specific actions in the Google Chrome app in the device (uses port 10082) adb shell monkey -p --port 10082 & adb forward tcp:10082 tcp:10082 telnet localhost 10082 tap 1 1 Syntax of actions: tap x_coord y_coord type text_to_type press keyboard_button_to_press If you want to execute a chain of actions: 1. create a file actions.txt containing an action for each line (each line following the usual syntax) 2. nc localhost 10082 < actions.txt Check if specific port is open nc -vz localhost 10082 Kill the process listening to a specific port lsof -t -i tcp:10082 | xargs kill
  17. 17. Vrije Universiteit Amsterdam 17 CPU Load & memory consumption Get CPU load adb shell top -n 1 | grep -i "$1r" | cut -d'%' -f1 | cut -d' ' -f3 Memory consumption adb shell dumpsys meminfo $1 | grep TOTAL | awk '{print $2}' In the PWA Swiss knife both of them are included in the script
  18. 18. Vrije Universiteit Amsterdam 18 Download PWA to your local machine Download front-end of a website via AppleScript and Chrome osascript ./download_website_chrome_mac.scpt toppleTrump Download front-end of a website statically wget -E -H -k -K -U 'Mozilla/5.0 (X11; U; Linux i686; en-US; rv: Gecko/20070802 SeaMonkey/1.1.4' -p -P ./targetFolder Deminify JS code minify-javascript-on-the-com mand-line/ -E: correct the extension of downloaded resources in order to have always .html files for served resources (e.g., php or asp) -H: Span hosts: Enable spanning across hosts when doing recursive retrieving -k: Convert links: After the download is complete, convert the links in the document to make them suitable for local viewing -K: Backup converted: When converting a file, back up the original version with a ‘.orig’ suffix -U: the user agent -p: Download also the prerequisites of the page: This option causes Wget to download all the files that are necessary to properly display a given HTML page -P: in which folder you want to write the result
  19. 19. Vrije Universiteit Amsterdam 19 Energy consumption NEXT LAB