Build mobile apps with Chrome WebView

#ChromeDevSummit

Disclaimer

Chromium WebView!!!

Think of the Features

  • IndexedDB
  • Request Animation Frame
  • SVG Filters + Effects
  • Web Sockets
  • and more .....
  1. Workflow
  2. Native Features
  3. Design
  1. Workflow
  2. Native Features
  3. Design
Workflow

Code,
Compile,
Repeat

Workflow
Workflow

Demo: DevTools in the WebView

Workflow

Old WebView Support

  • Livereload isn't supported
  • Add a refresh button in the UI
  • No DevTools
  • Try Weinre or JSHybugger
  1. Workflow
  2. Native Features
  3. Design
Native Features
Native Features

Demo: addJavascriptInterface()

Native Features
  1. Workflow
  2. Native Features
  3. Design
Design

Native Components

Design
Design
Design
Design
Design
Design
Design

Web Trends

  1. Workflow
  2. Native Features
  3. Design

<uses-sdk
android:targetSdkVersion="19"
/>

WebView.setWebContentsDebuggingEnabled(true);

Future

  • Old WebView is still important
  • Updates still tied to Android releases
  • Chrome Apps & Cordova

Talks

  • #perfmatters: 60fps layout and rendering
    Tom Wiltzius and Nat Duca
  • Best UX patterns for mobile web apps
    Paul Kinlan
  • Develop Chrome Apps on desktop/mobile, distribute and profit
    Joe Marini