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)
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.
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, change fbAppName 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 the inittab 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 running chmod +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.
请发表评论