Mini Mobile Device Lab
The Mini Mobile Device Lab (MMDL) is a framework to help developers test pages across multiple devices, including phones, tablets, Desktops, etc. It works with Android, iOS, Windows (including phone, RT and desktop), and Chrome OS.
When a A URL is pushed, the devices will simultaneously open the page, allowing you to see how the page looks across each device. In addition, it will also run the page through services like PageSpeed Insights, Web Page Test, and check for specific open web features like HTTPS, Service Worker, Theme Color, and Web App Manifests.
Basic Architecture
A web front end is used to send URLs to Firebase, which acts as the back end, syncing URLs out to all of the connected devices.
Android: The Node client app running on a Raspberry Pi (or other computer) listens for new URLs and uses ADB to fire a browse intent, opening the URL on the device.
iOS & Windows: A native app receives URLs from Firebase and opens them in a WebView.
ChromeOS or Chrome Desktop: A Chrome Extension listens for new URLs sent from Firebase and opens a new tab or uses the existing tab to display the content.
Getting Started
Setup Firebase & front end
- Create a new Firebase app (and account if necessary)
- Import the initial config from
init-data.json
- In Security & Rules, paste the contents of
rules.json
- In Login & Auth, enable Anonymous Authentication
- In Secrets, create a new Secret, and note it down for later.
- In PiLabFrontEnd, copy
config.sample.js
toconfig.js
- Fill in the attributes of
config.js
accordingly.firebaseUrl
is the URL for your Firebase project.firebaseKey
is the api key for that Firebase project.
- Deploy the PiLabFrontEnd, you can use Firebase’s static hosting or one of your choosing
If you want to test pages using PageSpeed Insights or WebPage Test, be sure to
get an API Key and update config.apiKeys
in Firebase with the appropriate key.
Set up the server
The server is used to control the looper, manage test execution, update Firebase with results tests and handle a few other functions. If you don’t want to use the looper or test pages, you can skip this section.
PreRequisites: Node (0.12.x), ADB
- Clone the repo to a local directory
- In the
PiLab
folder, runnpm install
- Copy
config.sample.json
toconfig.json
. - Fill in the attributes of
config.json
accordingly.firebaseUrl
is the URL for your Firebase project.firebaseKey
is the api key for that Firebase project.frontEndUrl
is the URL for where you've hosted the PiLabFrontEnd.
- Start the server with
node server.js
. - Plug a single Android device into this computer, it will be used for testing the open web features.
Android
PreRequisites: Node (0.12.x), ADB
- Follow the same step as required to set up the server, but instead, start the
client with
node client.js
- On each Android device, enable Developer Mode
- Under Developer Options:
- Enable USB Debugging
- Enable Stay awake
- Install Stay Alive! to prevent the screen from dimming or turning off
- Plug the Android devices into the computer or USB hub.
- When prompted, allow USB debugging, and be sure to choose Remember this computer.
iOS
PreRequisites: XCode & all of the other pre-reqs for building iOS apps
- Clone the repo to a local directory and open the project in XCode
- In
ViewController.m
, changefbAppName
to the Firebase App name you created earlier - Deploy app to iOS devices
Windows
Because there is no native Firebase SDK for Windows, we’ve used two WebViews to
control the experience. One WebView (wvListener
) listens for notifications
pushed via window.external.notify
, when a message is received, it sets the URL
of the second WebView (wvMain
) to the new URL.
PreRequisites: Visual Studio 2012 & all of the other pre-reqs for building Universal Windows Apps.
- Clone the repo to a local directory and open the proejct in Visual Studio
- In
MainPage.xaml
for both MMDL-uni.Windows and MMDL-uni.WindowsPhone, update the URL of<WebView x:Name="wvListener" Source="https://goog-mtv-device-lab.appspot.com/notify.html" HorizontalAlignment="Stretch" VerticalAlignment="Stretch"></WebView>
to the PiLabFrontEnd URL you created earlier. - In
Package.appxmanifest
for both MMDL-uni.Windows and MMDL-uni.WindowsPhone, update the URL of<Rule Match="https://goog-mtv-device-lab.appspot.com/notify.html" Type="include" />
to the PiLabFrontEnd URL you created earlier - Deploy app to the appropriate devices
Sending URLs to devices
Once the devices have been setup, you can use the web front end to send URLs.
The simplest way is to use index.html
to send a single URL, it will pause the
looper for 3 minutes then automatically restart it. For more advanced control,
use admin.html
, which allows you to change the displays on different devices,
adjust the loop time, add or modify URLs in the loop, etc.
Using Raspberry Pi’s as Controllers
Raspberry Pi’s work well for controlling the Android devices or as the Server, and is how we set up the MMDL at Google IO 2015.
There are a few things to be aware of:
- Raspberry Pi’s have limited USB bandwidth, which may cause issues if you try to connect more than 7 devices to a Pi, we limited each Pi to 6 devices.
- We recommended that you boot the Pi into command line mode instead of the GUI to lower CPU usage.
- We used the 7-port Ankar AH240 for our USB hub since it provided a sufficient number of USB ports and enough power to keep most devices fully charged while in use.
- ADB is not available pre-compiled for the Pi, so you’ll need to compile your own, or download one that someone else has compiled.
- You may need to start ADB with
sudo
for proper functionality.
Auto Starting PiLab on Boot To Command Line
If your Pi boots to the command line, you can automatically start the PiLab client (or server) with these steps.
- On the Pi, run
sudo nano /etc/inittab
to edit theinittab
file - Find the line
1:2345:respawn:/sbin/getty 115200 tty1
and comment it out by adding a#
at the beginning of the line. - Just below the commented out line, add
1:2345:respawn:/bin/login -f pi tty1 </dev/tty1 >/dev/tty1 2>&1
. - Save and Exit
nano
by pressing CTRL-X, followed by Y - [Optional] Reboot the Pi to confirm it automatically logs in.
- If you haven’t already, clone the repo to your Pi
- Edit the local
.profile
file and add~/login.sh
to the end. - Create
~/login.sh
and add the following code:
cd ~/MiniMobDevLab
echo Starting PiLab in 5 seconds
sleep 5
./client.sh
- Make the
~/login.sh
file executable by runningchmod +x ~/login.sh
- Reboot the Pi, and it should automatically log in and start the client app.
Contributing
The Mini Mobile Device Lab is an open source project and we welcome your contributions! Before submitting a pull request, please review CONTRIBUTING.md and make sure that there is an issue filed describing the fix or new content. If you don't complete these steps, we won't be able to accept your pull request, sorry.