diff --git a/android/installtohomescreen.html b/android/installtohomescreen.html index 596aa80..483d232 100644 --- a/android/installtohomescreen.html +++ b/android/installtohomescreen.html @@ -1,5 +1,9 @@ {{+bindTo:partials.standard_multidevice_article}} + +

Add to Homescreen

@@ -50,7 +54,7 @@ however, they integrate with the Android environment in the following ways.

-

Supporting add to homescreen apps

+

Supporting Add to homescreen apps

Chrome will look for the following meta tag in the <head> element of the web-page:

@@ -79,6 +83,7 @@ however, they integrate with the Android environment in the following ways.

The following example is the minimum required configuration to support a homescreen launch experience.

+
 <!doctype html>
 <html>
    <head>
@@ -89,11 +94,12 @@ however, they integrate with the Android environment in the following ways.

    </head>
    <body></body>
 </html>
+
-

Comparison to iOS Safari Add to Homescreen

+

Comparison to iOS Safari Add to homescreen

-

Chrome will also allow Web Apps to launch in "App mode" if they embed a meta tag using the "apple-mobile-web-app-capable" name. Chrome will stop supporting this usage in an upcoming release. Chrome currently shows a deprecation warning in the Developer Tools’ console log when it detects a page with only the "apple-mobile-web-app-capable" meta tag. The warning appears as follows:

+

Chrome will also allow web apps to launch in "App mode" if they embed a meta tag using the "apple-mobile-web-app-capable" name. Chrome will stop supporting this usage in an upcoming release. Chrome currently shows a deprecation warning in the Developer Tools’ console log when it detects a page with only the "apple-mobile-web-app-capable" meta tag. The warning appears as follows:

@@ -110,13 +116,15 @@ however, they integrate with the Android environment in the following ways.

How do I open links in the user’s browser?
-
As you would on the web, adding target=_blank to an anchor will force the user out of the web app and into the browser that the user added the icon from.
+
As you would on the web, adding target="_blank" to an anchor forces the user out of the + web app and into the browser that the user added the icon from.
-
Will this work on Chrome for iOS?
+
Does Add to homescreen work on Chrome for iOS?
No.
-
If I visit a page that I have already added to the home screen, will it be full screen?
-
No, whilst you are browsing you will remain in the browser regardless of the fact your web app might be added to the home screen. The page will only launch full screen when launched from the homescreen.
+
If I visit a page that I have already added to the homescreen, will it be full screen?
+
No, while you are browsing you remain in the browser even if you visit a page that's + added to your homescreen. The page only launches full screen when launched from the homescreen.
How can I detect if the app is running as an installed app?
You can’t, directly.
@@ -128,9 +136,10 @@ however, they integrate with the Android environment in the following ways.

  • Do not prompt the user to add your app to the homescreen. There is no way to detect if the app is running installed or not.
  • Use the large 196px icon format, as in <link rel="shortcut icon" sizes="196x196" href="nice-highres.png"> for the highest quality homescreen icons.
    • -
  • Use a noun in your document’s title with no temporal information.
    • +
  • Use a noun in your document’s title. Make sure the title doesn't contain any information that may change. + For example, for a Calendar app, don't include the current date or time in the app title.
  • Use AppCache to ensure that your app works or presents the user with an experience when they are offline.
    • -
  • Create a clear icon for use on the home screen following the guidance of Android Iconography.
    • +
  • Create a clear icon for use on the homescreen following the guidance of Android Iconography.
diff --git a/android/overview.html b/android/overview.html index e278302..126ddd8 100644 --- a/android/overview.html +++ b/android/overview.html @@ -24,33 +24,10 @@
  • Text auto-sizing, also known as font boosting -

    With these improvements, Chrome for Android enables interactive mobile web experiences, as illustrated in these snapshots:

    - -
    -

    - - - - - - - -

    -
    - -
    +

    With these improvements, Chrome for Android enables interactive mobile web experiences.

    See all the Chrome for Android features such as tabs, incognito mode, and sync across devices for the user's Google account.

    -

    Enter chrome://about in the Chrome address bar to see more information about Chrome features.

    • -

    Performance

    @@ -68,14 +45,14 @@

    Debugging web pages on the small screen is difficult. There's just not enough real estate to inspect elements and resources on the device. Now you can debug mobile web sites with the full suite of Chrome Developer Tools running on a desktop browser that's connected to your phone via USB. See Remote Debugging for further details.

    In addition to the powerful Chrome Developer Tools, Chrome for Android -provides more advanced developer features:

    +provides more advanced developer features for very specific use cases:

    -

    You can also use the Resource Timing and User Timing APIs to analyze application performance.

    +

    You can also use the Resource Timing and User Timing APIs to analyze application performance.

    Working offline

    @@ -99,7 +76,8 @@ HTML5 features that address this concern, including:

    Standards and APIs

    -

    Chrome for Android supports HTML5 development with many features.

    +

    Chrome for Android supports modern web standards. This section presents a sampling of features; +for an updated view of features per Chrome release, see chromestatus.com.

    CSS and presentation

    @@ -111,7 +89,7 @@ HTML5 features that address this concern, including:

  • The Flexbox layout model is fully supported (prefixed as -webkit-flex)
  • Viewport units, vh, vmin, and vw for responsive design
  • @supports conditional blocks to test whether Chromium supports certain property/value pairs
    • -
  • The :unresolved CSS pseudo-class that lets you style a custom element that hasn’t been registered in the browser yet (custom elements are part of the Web Components standard in development)
    • +
  • The :unresolved CSS pseudo-class that lets you style a custom element that hasn’t been registered in the browser yet (custom elements are part of the Web Components standard in development)

    • Elements

    @@ -145,7 +123,7 @@ contextual surroundings, from location and device orientation to camera access.
  • requestAnimationFrame to achieve optimum animation performance
  • Interactive communication between server and client with WebSockets.
  • Multi-threading with Web Workers (dedicated only)
    • -
  • requestFullscreen method (presently via the prefixed call, webkitRequestFullScreen()) to allow you to hide the browser UI (chrome)
    • +
  • requestFullscreen method (presently via the prefixed call, webkitRequestFullScreen()) to allow you to hide the browser UI (chrome)
  • WebRTC for real-time communication without a plug-in
  • WebAudio to process and synthesize audio signals
  • Experimental support (via chrome://flags in the Chrome address bar) for the following APIs: @@ -178,7 +156,7 @@ star the ones you need the most. If you find a new issue, log it using

    • Share your thoughts

    -

    If you run into a mobile web development problem and would like help, please post it to Stack Overflow using the [google-chrome] and [android] tags.

    +

    If you run into a mobile web development problem and would like help, please post it to Stack Overflow using the [google-chrome] and [android] tags.

    diff --git a/webview/gettingstarted.html b/webview/gettingstarted.html index 2e7b293..a693e3c 100644 --- a/webview/gettingstarted.html +++ b/webview/gettingstarted.html @@ -50,20 +50,18 @@ you're done, click Next.

  • The next page lets you select the main Android activity for your application. -For the purposes of this guide, select Blank Activity **and click **Next.

    +For the purposes of this guide, select Blank Activity and click Next.

    -

    Note: An Android -Activity can +

    Note: An Android Activity can be viewed as a screen of an app. In this case, the application's main activity will hold the web view. If you're planning to venture further into native Android development, you can find more information in the - + Android Activities API guide

  • The next page lets you change the names for the default -Activity and -layout. Click Finish to accept the defaults and create the project.

    +Activity and layout. Click Finish to accept the defaults and create the project.

    @@ -230,7 +228,7 @@ line to the end of the onCreate method.

    (AVD or Android Virtual Device) by going to Tools > Android > AVD Manager.

    -
    • +

    Note: To detect when a URL has started and finished loading, @@ -284,19 +282,19 @@ mWebView.setWebViewClient(new WebViewClient());

    This is a good step forward, but what if you want to handle links for your site only, while opening other URLs in a browser?

    -

    To achieve this you need to extend the `WebViewClient` class and implement the -`shouldOverrideUrlLoading` method. This method is called whenever the WebView +

    To achieve this you need to extend the WebViewClient class and implement the +shouldOverrideUrlLoading method. This method is called whenever the WebView tries to navigate to a different URL. If it returns false, the WebView opens the -URL itself. (The default implementation _always_ returns false, which is why it +URL itself. (The default implementation always returns false, which is why it works in the previous example.)

    Create a new class:

      -
    1. Right-click the package name of your app and select **New** > **Java Class**. +
    2. Right-click the package name of your app and select New > Java Class
      3. -
    3. Enter `MyAppWebViewClient` as the class name and click **OK**.
      4. -

    4. In the new `MyAppWebViewClient.java` file, add the following code (changes +

    5. Enter MyAppWebViewClient as the class name and click OK
      6. +

    6. In the new MyAppWebViewClient.java file, add the following code (changes shown in bold):

      public class MyAppWebViewClient extends WebViewClient {
@@ -314,23 +312,23 @@ works in the previous example.)
      
     }
      -

      The new code defines `MyAppWebViewClient` as a subclass of `WebViewClient` and +

      The new code defines MyAppWebViewClient as a subclass of WebViewClient and implements the shouldOverrideUrlLoading method.

      -

      The `shouldOverrideUrlLoading` method is called whenever the WebView is about to load a URL. +

      The shouldOverrideUrlLoading method is called whenever the WebView is about to load a URL. This implementation checks for the String "html5rocks.com" at the end of the host name of the URL. If the string exists, the method returns - false, which tells the platform **not** to override the URL, but to load it in the + false, which tells the platform not to override the URL, but to load it in the WebView.

      For any other hostname, the method makes a request to the system to open the URL. It does this by creating a new Android - [Intent](http://developer.android.com/reference/android/content/Intent.html) and using it + Intent and using it to launch a new activity. Returning true at the end of the method prevents the URL from being loaded into the WebView.

    7. To use your new custom - [WebViewClient](http://developer.android.com/reference/android/webkit/WebViewClient.html), add - the following lines to your `MainActivity` class:

      + WebViewClient, add + the following lines to your MainActivity class:

      // Stop local links and redirects from opening in browser instead of WebView
     mWebView.setWebViewClient(new MyAppWebViewClient());
@@ -343,10 +341,10 @@ works in the previous example.)
      
 
      Handling the Android Back Button
      
 
 
      As you start playing around and navigating the awesome HTML5Rocks articles, 
-hitting the back button on Android exits the application, even though we've 
+hitting the back button on Android exits the application, even though you've 
 explored a few pages of the site.
      
 
-
      WebView has a method `canGoBack` which tells you if there is anything on the 
+
      WebView has a method canGoBack which tells you if there is anything on the 
 page stack that can be popped. All you need to do is detect a back button press 
 and determine if you should step back through the WebView's history or allow the platform 
 to determine the correct behaviour. Inside your MainActivity class, add the 
@@ -396,7 +394,7 @@ or compress).
      
 
      Generally it's good practice to keep your web files in a subdirectory, so create 
 a www directory and put all your web content in it.
      
 
-
      Note:It's worth noting that absolute paths do not work in the WebView when 
+
      Note: Absolute paths do not work in the WebView when 
 referring to other files, such as CSS and JavaScript. So make sure you make all references 
 relative, instead of absolute (for example, instead of  "/pages/somelink.html", use 
 "./pages/somelink.html").
      
@@ -427,7 +425,7 @@ for non-local pages:
      
 
 
      Now you are set to build a great WebView app!
      
 
-
      For tips on getting the visuals just right, see Pixel-Perfect UI in the WebView.
      
+
      For tips on getting the visuals just right, see Pixel-Perfect UI in the WebView.
      
 
 
      If you run into trouble, the Chrome DevTools are your friends. See Remote Debugging on Android to get started.
      
 
diff --git a/webview/overview.html b/webview/overview.html
index 5467169..4985ad7 100644
--- a/webview/overview.html
+++ b/webview/overview.html
@@ -8,9 +8,9 @@ JavaScript engine and support for modern web standards that were missing in
 the old WebView. It also shares the same rendering engine as Chrome for Android,
 so rendering should be much more consistent between the WebView and Chrome.
      
 
-
      If you're a web developer looking to start developing a WebView-based Android application, see Getting Started: WebView-based Applications for Web Developers.
      
+
      If you're a web developer looking to start developing a WebView-based Android application, see Getting Started: WebView-based Applications for Web Developers.
      
 
-
      For tips on scaling WebView content for mobile devices, see Pixel-Perfect UI in the WebView. 
      
+
      For tips on scaling WebView content for mobile devices, see Pixel-Perfect UI in the WebView. 
      
 
 
      The new WebView also supports remote debugging
 using the Chrome DevTools.
      
@@ -53,8 +53,7 @@ user-agent string. Don't rely on the specific Chrome version number,
 
 
      How do I set the user-agent of the WebView?
      
 
-
      You can set the user-agent by using the Java setUserAgentString 
- API) 
+
      You can set the user-agent by using the Java setUserAgentString 
 method. This method only changes the user-agent string for requests sent by the WebView itself.
      
 
 
      You can't set the user-agent string used for XMLHttpRequests made from JavaScript. Those 
@@ -102,7 +101,7 @@ information.
      
 
 
      How do I enable remote debugging?
      
 
-
      See the remote debugging guide.
      
+
      See the remote debugging guide.
      
 
 
      Does the WebView support the Chrome Apps APIs?
      
 
diff --git a/webview/pixelperfect.html b/webview/pixelperfect.html
index 7fe5f71..399862d 100644
--- a/webview/pixelperfect.html
+++ b/webview/pixelperfect.html
@@ -44,16 +44,16 @@ devices – for example, if you’re displaying content you don’t
 case, you need to force the WebView to use a desktop-size viewport:
      
 
 
 
-
      Without these methods being set and no viewport the WebView will try and set the 
+
      If these methods are not set and no viewport is specified, the WebView will try and set the 
 viewport width based on the content size. 
      
 
 
      In addition to doing this, you may want to use the new layout algorithm TEXT_AUTOSIZING 
 introduced in Android 4.4, which increases the font size to make it more readable on a mobile 
-device. See setLayoutAlgorithm). 
      
+device. See setLayoutAlgorithm. 
      
 
 
      
  
@@ -147,8 +147,8 @@ easy way to do this is play around with the size of a browser window. But rememb
 actual devices have different screen densities than your monitor, so always test on a 
 range of devices.
 
-
      There will be best practices for organising CSS and designing for mobiles on 
-HTML5Rocks soon.
      
+
      For more on designing for mobile devices, see 
+HTML5Rocks.
      
 
 
      
 
      Images
      
diff --git a/webview/workflow.html b/webview/workflow.html
index 1a57c76..b0c6b4e 100644
--- a/webview/workflow.html
+++ b/webview/workflow.html
@@ -59,7 +59,7 @@ page each time you change an HTML, CSS or JavaScript file.
      
 
 
      Then create a new web app with Yeoman:
      
 
-
      yo webapp
      
+
      yo webapp
      
 
 
      Follow the on-screen prompts to select project options.
      
 
@@ -67,12 +67,12 @@ page each time you change an HTML, CSS or JavaScript file.
      
 
 
      Before proceeding to the next step, test the app by running the following command:
      
 
-
      grunt server
      
+
      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 webapp 
-is compressed, optimised and made into a production ready version inside this folder.
      
+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.
      
 
 
      
 
      Step 4. Configure the Gradle build
      
@@ -114,7 +114,7 @@ Open settings.gradle in the root directory and add the following li
 
      
 
      Step 5. Build your WebApp when you build the android app
      
 
-
      The final step is to get the webapp to build and then copy the app into the 
+
      The final step is to get the web app to build and then copy the app into the 
 assets directory of our Android app.
      
 
 
      
@@ -150,8 +150,8 @@ Let’s examine each part of this.
 }

      -This Copy task copies your application from the webapp/dist directory, -we want to copy the files to src/main/assets/www. This task +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.

      @@ -196,8 +196,8 @@ of your app. Here it sets a dependency on the assemble tasks to run

      -The assemble tasks "assemble the output(s) of the project", so before you do that, -you need to copy your application over to the Android project. +The assemble tasks assembles the output of the project, so the web app needs +to be copied over to the Android project first.

      @@ -209,13 +209,15 @@ In Android Studio, you should have no assets directory in your Andr

      -Don’t forget you’ll need to set the WebView to use the index.html page and enable -JavaScript if you want to use it. For details, see -the Getting Started Guide. +Don’t forget you’ll need to set the WebView to use the index.html page:

      mWebView.loadUrl("file:///android_asset/www/index.html"); +

      Note: If your page uses JavaScript, you need to enable it explicitly. +For details, see the Getting Started Guide. +

      +

      Now press Run and let your application build. You should see an assets directory with your web application in the www subdirectory. @@ -243,7 +245,7 @@ In your Android app's build.gradle add the following lines in bold defaultConfig { ... } - productFlavors { + productFlavors { staticbuild { packageName "com.google.chrome.myapplication" } @@ -251,7 +253,7 @@ In your Android app's build.gradle add the following lines in bold liveserver { packageName "com.google.chrome.myapplication.liveserver" } - } + } }