Save webview content to android storage and load it

I want to make an android application which has a webview layout. This is the criteria of my application:

The first time the application starts, webview loads an url (maybe facebook, google, etc..) webview.loadUrl("http://www.google.com");
After it loads the url, the application saves the loaded url to HTML View (file.htm) in a "specific place" in android's internal storage. So, let's say i open "google.com", the application saves the google's web page to HTML file (let's say the filename, "google.htm"), and when i go to that "specific place" and click the "google.htm" file, it shows the google web page using android's HTML Viewer.
When the application starts again, or simply say the application loads the url again (in this case, "google.com") , it doesn't take from the "google.com" page BUT it takes from the "google.htm" file on the internal storage android. So from the user's view, that application can still load webpages, even though it's not connected to internet.

To make it simple,

Application Start -> Go to the specified url -> Check the storage
IF there's the specified url HAS the HTML file in the storage, then load from the storage
ELSE it loads the url from the web.

Can anyone help me with the code and explanation? I really appreciate it. Thanks guys :D

Solution

You can use a Javascript interface for the WebView to return the entirety of the HTML source when the page is finished loading. To do this, you'll need to assign your own WebViewClient to the WebView.

To do this, use something similar to the following in your Activity class -- Make sure your Activity implements Observer:

public void onCreate(Bundle savedInstanceState) {
    // ...

    webView.setWebViewClient(new MyWebViewClient());
    HtmlJSInterface htmlJSInterface = new HtmlJSInterface();
    webView.addJavascriptInterface(htmlJSInterface, "HTMLOUT");
    htmlJSInterface.addObserver(this);

    // ...
}

// Called when our JavaScript Interface Observables are updated.
@Override
public void update(Observable observable, Object observation) {

    // Got full page source.
    if (observable instanceof HtmlJSInterface) {
        html = (String) observation;
        onHtmlChanged();
    }
}

private void onHtmlChanged() {
    // Do stuff here...
}

private class MyWebViewClient extends WebViewClient {
    @Override
    public boolean shouldOverrideUrlLoading(WebView view, String url) {
        view.loadUrl(url);
        return true;
    }

    @Override
    public void onPageFinished(WebView view, String url) {
        // When each page is finished we're going to inject our custom
        // JavaScript which allows us to
        // communicate to the JS Interfaces. Responsible for sending full
        // HTML over to the
        // HtmlJSInterface...
        isStarted = false;
        isLoaded = true;
        timeoutTimer.cancel();
        view.loadUrl("javascript:(function() { "
                + "window.HTMLOUT.setHtml('<html>'+"
                + "document.getElementsByTagName('html')[0].innerHTML+'</html>');})();");
        }
    }
}

Then, you're going to want to create the HtmlJSInterface class, as such:

   public class HtmlJSInterface extends Observable {
  private String html;

  /**
   * @return The most recent HTML received by the interface
   */
  public String getHtml() {
    return this.html;
  }

  /**
   * Sets most recent HTML and notifies observers.
   * 
   * @param html
   *          The full HTML of a page
   */
  public void setHtml(String html) {
    this.html = html;
    setChanged();
    notifyObservers(html);
  }
}