1 Het begint met een idee

PWA experiment setup

Ivano Malavolta

Vrije Universiteit Amsterdam

Overview of technologies and tools

PWA Swiss knife

2 Ivano Malavolta / S2 group / Empirical software engineering

Roadmap

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?

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

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. http://www.alexa.com/topsitesii. https://github.com/hemanth/awesome-pwa

iii. https://pwa.rocks

https://ifixit-pwa.appspot.com

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: https://goo.gl/WHaI1T

● Chrome tools

● mitmproxy:

http://docs.mitmproxy.org/en/stable/i

ndex.html

Manual

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: https://goo.gl/ppJves

● Power Tutor

● Google project Volta (only Android 5+):

https://developer.android.com/about/versio

ns/android-5.0.html#Power

● Manual logging + DDMS

● ...

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○ https://github.com/lorenzogomez/RERAN

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

Vrije Universiteit Amsterdam

10

Preparation of Android profiler

● Download and install Android Studio

○ https://developer.android.com/studio/index.html

● Put Android platform tools into your path environment variable

● Type the adb version command in the terminal and see if it works

Vrije Universiteit Amsterdam

11 Ivano Malavolta / S2 group / Empirical software engineering

PWA Swiss knife

source code: https://drive.google.com/file/d/0B5kjca6oPsThX2NNWDNfY2E3MDg/view?usp=sharing

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: http://caniuse.com/#search=service%20work

4. Install PowerTutor

5. Install Trepn

6. Check if Trepn is supported

a. https://developer.qualcomm.com/forum/qdn-forums/software/trepn-power-profiler/28349

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

Vrije Universiteit Amsterdam

13

Android app management

Start an activity on device (Chrome in this case)

adb shell am start -n com.android.chrome/com.google.android.apps.chrome.Main

Launch an intent for opening a web page

adb shell am start -a android.intent.action.VIEW -d 'http://www.google.com'

Stop Chrome

adb shell am force-stop com.android.chrome

Reset all the data associated with Chrome

adb shell pm clear com.android.chrome

Know what is the current activity on a device

adb shell dumpsys window windows | grep -E 'mCurrentFocus|mFocusedApp'

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 com.android.chrome

Get the PID of an app running on device

adb shell ps | grep com.android.chrome | cut -d' ' -f5

Read information coming from calls to console.log in JavaScript

adb logcat | grep "INFO:CONSOLE"

Vrije Universiteit Amsterdam

15

Execute usage scenarios

Execute 100 random operations in the Google Chrome app in the device

adb shell monkey -p com.android.chrome -v 100

Record and replay a scenario on device

adb shell am force-stop com.android.commands.monkey

monkeyrunner monkey_recorder.py

<export the recorded session into scenario.txt>

monkeyrunner ./monkey_playback.py scenario.txt

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 com.android.chrome --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

Vrije Universiteit Amsterdam

17

CPU Load & memory consumption

Get CPU load

adb shell top -n 1 | grep -i "$1\r" | 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 logger.sh script

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.com toppleTrump

Download front-end of a website statically

wget -E -H -k -K -U 'Mozilla/5.0 (X11; U; Linux i686; en-US; rv:1.8.1.6) Gecko/20070802 SeaMonkey/1.1.4' -p -P ./targetFolder http://www.toppletrump.com

Deminify JS code

http://marcusjenkins.com/de-minify-javascript-on-the-command-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

Vrije Universiteit Amsterdam

19

Energy consumption

NEXT LAB