WebView Workflow

Note: The steps described here don't work with the
latest versions of Android Studio. This document will be updated when a fix is available.

One of the great things with web development is the rich set of tools you can use to improve your
workflow.

An example of one of these tools is Grunt, a JavaScript task runner that
allows you to simply define tasks to perform on your web app, from compiling Sass
and starting a live server to compressing images, minifying JavaScript and running JSHint before
creating a production-ready build.

Yeoman is a tool which helps create web applications, generating
boilerplate, bringing in libraries from Bower and
npm, and creating a Grunt file with predefined tasks.

In this tutorial you’ll use Yeoman to create a new basic web application, then integrate
the Android Studio build system (Gradle) with Grunt, to build your
web application. You’ll also set up Grunt tasks to launch a local live-reload server for testing
your application in the browser, so you don’t have to manually refresh the
page each time you change an HTML, CSS or JavaScript file.

In Android Studio, right-click the project folder and selecting New > Directory.

Name the directory webapp.

Step 3. Create a Yeoman project in your new directory

In a terminal cd to the the webapp directory in the project.

cd &ltpath-to-project>/webapp/

Then create a new web app with Yeoman:

yo webapp

Follow the on-screen prompts to select project options.

You may need to run sudo npm install depending on how npm is installed on your machine.

Before proceeding to the next step, test the app by running the following command:

grunt server

A new tab should open in your browser, connecting to a local server started by Grunt.
If you change one of the HTML, CSS or JavaScript files in the project, the page automatically
reloads and updates. If you run grunt build a new directory, dist, is created and your
web app is compressed, optimised and made into a production ready version inside this folder.

This creates a new task called buildWebApp with a predefined type Exec.
You then set the executable variable in Exec to the relevant grunt
command depending on the current OS. args are set to "build" which
equates to grunt build being run on the command line. Finally, the import at the
top is to make use of Os.isFamily(Os.FAMILY_WINDOWS).

Before we can use this new task we need to make the project aware of the new
build.gradle file.

Open settings.gradle in the root directory and add the following line:

include ':webapp'

Step 5. Build your WebApp when you build the android app

The final step is to get the web app to build and then copy the app into the
assets directory of our Android app.

task copyWebApplication

This Copy task copies your application from the webapp/dist directory.
We want to copy the files to src/main/assets/www. This task
also creates the necessary file structure if any of the required directories don't exist.

Gradle will now offer you the ability to create a version of your app with a liveserver package
name, and one with your normal package name. To check if it worked, click
Sync Project with Gradle Files (on the top bar next to the Run button).

Then view the Build Variants which are in the bottom left corner of Android Studio and essentially shows you what versions of your
app you can build.

For each productFlavor there are Debug and Release
versions, which the Android plugin for Gradle gives you by default. This determines whether the
build should be a debug build or a release build suitable to deploy on the Play store.

Now you have two versions, but they don't actually do anything different yet.

Step 8. Load from a live server

In this step, you'll configure your application to load a different URL depending on which product
flavor you build.

In your Android application, the files common to all product flavors are in src/main.
To add code or resources specific to one product flavor, you create another directory under
src with the same name as your productFlavor. When you build for that
build variant, Gradle and the Android plugin merge these additional files on top of the files in
src/main.

In this case, you'll define the URL as a string resource, and use that resource in your code
instead of a hard-coded URL.

Create the folders src/liveserver and src/staticbuild.

In the liveserver folder, create a new folder named res with a
subfolder named values. Inside this create a file named config.xml.
Repeat this process for the staticbuild folder.