Donate to e Foundation | Murena handsets with /e/OS | Own a part of Murena! Learn more

Commit 5342f65a authored by Scott Main's avatar Scott Main
Browse files

update web app docs to remove target-densitydpi, 

remove the overview page, remove a bunch of stuff from the doc
about screens and refer to external docs instead, and add
tips about debugging on 4.4 w/ dev tools.

Change-Id: I1fadb7cdf6fee469dc41a1f4e2dc2daf1fde52d1
parent 47feee53

docs/html/guide/guide_toc.cs

+1 −4
Original line number Diff line number Diff line
@@ -490,11 +490,8 @@ 
    <span class="en">Web Apps</span>

    </a></div>

    <ul>

      <li><a href="<?cs var:toroot ?>guide/webapps/overview.html">

            <span class="en">Overview</span>

          </a></li>

      <li><a href="<?cs var:toroot ?>guide/webapps/targeting.html">

            <span class="en">Targeting Screens from Web Apps</span>

            <span class="en">Supporting Different Screens in Web Apps</span>

          </a></li>

      <li><a href="<?cs var:toroot ?>guide/webapps/webview.html">

            <span class="en">Building Web Apps in WebView</span>

docs/html/guide/webapps/best-practices.jd

+18 −0
Original line number Diff line number Diff line 
page.title=Best Practices for Web Apps

@jd:body



<div id="qv-wrapper">

<div id="qv">



<h2>See also</h2>

<ul>

  <li><a href="https://developers.google.com/chrome/mobile/docs/webview/pixelperfect"

  >Pixel-Perfect UI in the WebView</a></li>

  <li><a href="http://www.html5rocks.com/en/mobile/responsivedesign/" class="external-link">Creating

  a Mobile-First Responsive Web Design</a></li>

  <li><a href="http://www.html5rocks.com/en/mobile/high-dpi/" class="external-link">High

  DPI Images for Variable Pixel Densities</a></li>

</ul>



</div>

</div>







<style>

.bold li {

  font-weight:bold;

docs/html/guide/webapps/debugging.jd

+24 −25
Original line number Diff line number Diff line
@@ -18,19 +18,29 @@ messages</li> 


<h2>See also</h2>

<ol>

  <li><a class="external-link"

href="https://developers.google.com/chrome-developer-tools/docs/remote-debugging">Remote

Debugging on Android</a></li>

  <li><a href="{@docRoot}tools/debugging/index.html">Debugging</a></li>

</ol>



</div>

</div>



<p>If you're developing a web application for Android, you can debug your JavaScript

using the {@code console} JavaScript APIs, which output messages to logcat. If you're familiar with

<p>If you are testing your web app with a device running Android 4.4 or higher,

you can remotely debug your web pages in {@link android.webkit.WebView} with

Chrome Developer Tools, while continuing to support older versions of Android.

For more information, see <a class="external-link"

href="https://developers.google.com/chrome-developer-tools/docs/remote-debugging">Remote

Debugging on Android</a>.</p>



<p>If you don't have a device running Android 4.4 or higher, you can debug your JavaScript using the

{@code console} JavaScript APIs and view the output messages to logcat. If you're familiar with

debugging web pages with Firebug or Web Inspector, then you're probably familiar

with using {@code console} (such as {@code console.log()}). Android's WebKit framework supports most

of the same APIs, so you can receive logs from your web page when debugging in Android's Browser

or in your own {@link android.webkit.WebView}.</p>



or in your own {@link android.webkit.WebView}. This document describes how to use the

console APIs for debugging.</p>





<h2 id="Browser">Using Console APIs in the Android Browser</h2>
@@ -83,28 +93,17 @@ expect from other web browsers.</p> 


<h2 id="WebView">Using Console APIs in WebView</h2>



<p>If you've implemented a custom {@link android.webkit.WebView} in your application, all the

same console APIs are supported when debugging your web page in WebView. On Android

1.6 and lower, console messages are automatically sent to logcat with the

"WebCore" logging tag. If you're targeting Android 2.1 (API Level 7) or higher, then you must

<p>All the console APIs shown above are also

supported when debugging in {@link android.webkit.WebView}. 

If you're targeting Android 2.1 (API level 7) and higher, you must

provide a {@link android.webkit.WebChromeClient}

that implements the {@link android.webkit.WebChromeClient#onConsoleMessage(String,int,String)

onConsoleMessage()} callback method, in order for console messages to appear in logcat.</p>



<p>Additionally, the {@link

android.webkit.WebChromeClient#onConsoleMessage(String,int,String)} method introduced in API

Level 7 has been deprecated in favor of {@link

android.webkit.WebChromeClient#onConsoleMessage(ConsoleMessage)} in API Level 8.</p>



<p>Whether you're developing for Android 2.1 (API Level 7) or Android 2.2 (API Level 8 or

greater), you must implement {@link android.webkit.WebChromeClient} and override the appropriate

{@link

android.webkit.WebChromeClient#onConsoleMessage(String,int,String) onConsoleMessage()} callback

method. Then, apply the {@link android.webkit.WebChromeClient} to your {@link

onConsoleMessage()} method in order for console messages to appear in logcat.

Then, apply the {@link android.webkit.WebChromeClient} to your {@link

android.webkit.WebView} with {@link android.webkit.WebView#setWebChromeClient(WebChromeClient)

setWebChromeClient()}.



<p>Using API Level 7, this is how your code for {@link

<p>For example, to support API level 7, this is how your code for {@link

android.webkit.WebChromeClient#onConsoleMessage(String,int,String)} might look:</p>



<pre>
@@ -118,8 +117,8 @@ myWebView.setWebChromeClient(new WebChromeClient() { 
});

</pre>



<p>With API Level 8 or greater, your code for {@link

android.webkit.WebChromeClient#onConsoleMessage(ConsoleMessage)} might look like this:</p>

<p>However, if your lowest supported version is API level 8 or higher, you should instead

implement {@link android.webkit.WebChromeClient#onConsoleMessage(ConsoleMessage)}. For example:</p>



<pre>

WebView myWebView = (WebView) findViewById(R.id.webview);
@@ -134,8 +133,8 @@ myWebView.setWebChromeClient(new WebChromeClient() { 
</pre>



<p>The {@link android.webkit.ConsoleMessage} also includes a {@link

android.webkit.ConsoleMessage.MessageLevel MessageLevel} to indicate the type of console message

being delivered. You can query the message level with {@link

android.webkit.ConsoleMessage.MessageLevel MessageLevel} object to indicate the type of console

message being delivered. You can query the message level with {@link

android.webkit.ConsoleMessage#messageLevel()} to determine the severity of the message, then

use the appropriate {@link android.util.Log} method or take other appropriate actions.</p>

docs/html/guide/webapps/index.jd

+43 −9
Original line number Diff line number Diff line 
page.title=Web Apps

page.landing=true

page.landing.intro=Android has always been about connectivity and providing a great web browsing experience, so building your app with web technologies can be a great opportunity. Not only can you build an app on the web and still optimize your designs for Android's various screen sizes and densities, but you can also embed web-based content into your Android app using WebView.

page.landing.image=



@jd:body



<div class="landing-docs">



  <div class="col-6">

<div class="figure" style="width:327px">

  <img src="{@docRoot}images/webapps/webapps.png" alt="" />

  <p class="img-caption"><strong>Figure 1.</strong> You can make your web content available to

users in two ways: in a traditional web browser and in an Android application, by

including a WebView in the layout.</p>

</div>



  <div class="col-6">

  </div>

<p>There are essentially two ways to deliver an application on Android: as a

client-side application (developed using the Android SDK and installed on user devices in an APK)

or as a web application (developed using web standards and accessed through a web

browser&mdash;there's nothing to install on user devices).</p>



</div>
 
 No newline at end of file
 
<p>If you chose to provide a web-based app for Android-powered devices, you can rest

assured that major web browsers for Android (and the {@link android.webkit.WebView} framework)

allow you to specify viewport and style properties that make your web pages appear at the proper

size and scale on all screen configurations.</p>



<p>Figure 1 illustrates how you can provide access to your web pages from either

a web browser or your your own Android app. However, you shouldn't develop an Android

app simply as a means to view your web site. Rather, the web pages you embed in your

Android app should be designed especially for that environment. You can even define an

interface between your Android application and your web pages that allows JavaScript in the web

pages to call upon APIs in your Android application&mdash;providing Android APIs to your web-based

application.</p>



<p>To start developing web pages for Android-powered devices, see the following documents:</p>



<dl>

  <dt><a href="{@docRoot}guide/webapps/targeting.html"><strong>Supporting Different Screens from Web

  Apps</strong></a></dt>

  <dd>How to properly size your web app on Android-powered devices and support

multiple screen densities. The information in this document is important if you're building a web

application that you at least expect to be available on Android-powered devices (which you should

assume for anything you publish on the web), but especially if you're targeting mobile devices

or using {@link android.webkit.WebView}.</dd>

  <dt><a href="{@docRoot}guide/webapps/webview.html"><strong>Building Web Apps in

WebView</strong></a></dt>

  <dd>How to embed web pages into your Android application using {@link

  android.webkit.WebView} and bind JavaScript to Android APIs.</dd>

  <dt><a href="{@docRoot}guide/webapps/debugging.html"><strong>Debugging Web Apps</strong></a></dt>

  <dd>How to debug web apps using JavaScript Console APIs.</dd>

  <dt><a href="{@docRoot}guide/webapps/best-practices.html"><strong>Best Practices for Web

Apps</strong></a></dt>

  <dd>A list of practices you should follow, in order to provide an effective web application on

Android-powered devices.</dd>

</dl>
 
 No newline at end of file

docs/html/guide/webapps/overview.jd

deleted100644 → 0
+0 −71
Original line number Diff line number Diff line 
page.title=Web Apps Overview

@jd:body



<div class="figure" style="width:327px">

  <img src="{@docRoot}images/webapps/webapps.png" alt="" />

  <p class="img-caption"><strong>Figure 1.</strong> You can make your web content available to

users in two ways: in a traditional web browser and in an Android application, by

including a WebView in the layout.</p>

</div>



<p>There are essentially two ways to deliver an application on Android: as a

client-side application (developed using the Android SDK and installed on user devices as an {@code

.apk}) or as a web application (developed using web standards and accessed through a web

browser&mdash;there's nothing to install on user devices).</p>



<p>The approach you choose for your application could depend on several factors, but Android makes

the decision to develop a web application easier by providing:</p>

<ul>

  <li>Support for viewport properties that allow you to properly size your web application

based on the screen size</li>

  <li>CSS and JavaScript features that allow you to provide different styles and images

based on the screen's pixel density (screen resolution)</li>

</ul>



<p>Thus, your decision to develop a web application for Android can exclude consideration for

screen support, because it's already easy to make your web pages look good on all types of screens

powered by Android.</p>



<p>Another great feature of Android is that you don't have to build your application purely on

the client or purely on the web. You can mix the two together by developing a client-side Android

application that embeds some web pages (using a {@link android.webkit.WebView} in your Android

application layout). Figure 1 visualizes how you can provide access to your web pages from either

a web browser or your Android application. However, you shouldn't develop an Android

application simply as a means to launch your web site. Rather, the web pages you embed in your

Android application should be designed especially for that environment. You can even define an

interface between your Android application and your web pages that allows JavaScript in the web

pages to call upon APIs in your Android application&mdash;providing Android APIs to your web-based

application.</p>



<p>Since Android 1.0, {@link android.webkit.WebView} has been available for Android

applications to embed web content in their layout and bind JavaScript to Android APIs. After

Android added support for more screen densities (adding support for high and low-density

screens), Android 2.0 added features to the WebKit framework to allow web pages to specify

viewport properties and query the screen density in order to modify styles

and image assets, as mentioned above. Because these features are a part of Android's WebKit

framework, both the Android Browser (the default web browser provided with the platform) and

{@link android.webkit.WebView} support the same viewport and screen density features.</p>



<p>To develop a web application for Android-powered devices, you should read the

following documents:</p>



<dl>

  <dt><a href="{@docRoot}guide/webapps/targeting.html"><strong>Targeting Screens from Web

Apps</strong></a></dt>

  <dd>How to properly size your web app on Android-powered devices and support

multiple screen densities. The information in this document is important if you're building a web

application that you at least expect to be available on Android-powered devices (which you should

assume for anything you publish on the web), but especially if you're targeting mobile devices

or using {@link android.webkit.WebView}.</dd>

  <dt><a href="{@docRoot}guide/webapps/webview.html"><strong>Building Web Apps in

WebView</strong></a></dt>

  <dd>How to embed web pages into your Android application using {@link android.webkit.WebView} and

bind JavaScript to Android APIs.</dd>

  <dt><a href="{@docRoot}guide/webapps/debugging.html"><strong>Debugging Web Apps</strong></a></dt>

  <dd>How to debug web apps using JavaScript Console APIs.</dd>

  <dt><a href="{@docRoot}guide/webapps/best-practices.html"><strong>Best Practices for Web

Apps</strong></a></dt>

  <dd>A list of practices you should follow, in order to provide an effective web application on

Android-powered devices.</dd>

</dl>