javascriptgoogle-chromegoogle-chrome-appbehaviorgoogle-chrome-webview

Google Chrome App: Webview behavior

While researching for an issue on <iframe> on Chrome Extension, the <webview> in Chrome Apps caught my eye and got me interested.

So i decided to do a small example of the issue i am facing on <iframe> and see if <webview> get it solved. From what i understood of watching a Chrome Dev video, the webview runs in a separate process than your app; it doesn't have the same permissions as your app. So i assume if the content in the runs in a certain way separated from the 'main thread' (app), i guess their content will be executed separately from each other not blocking the app or the other in case any of them could have a possible long running js executon. Therefore i did the following:

background.js

chrome.app.runtime.onLaunched.addListener(function() {
  // Tell your app what to launch and how.
  chrome.app.window.create('window.html', {
      width: 1800,
      height: 1000
  });
});

manifest.json

{
  // Required
  "name": "Hello World!",
  "version": "0.1",
  "manifest_version": 2,

  // Recommended
  "description": "My first packaged app.",
  "icons": { "16": "calculator-16.png", "128": "calculator-128.png" },
  // "default_locale": "en",

  // Pick one (or none) OF browser_action, page_action, theme, app 

  "app": {
    "background": {
      "scripts": [ "background.js" ]
    }
  },

  "minimum_chrome_version": "23",

  "permissions": [ "webview" ]

}

window.html

<!DOCTYPE html>
<html>
  <head>
  </head>
  <body>
    <div>Hello, world!</div>
    <webview id="wv1" style="width: 450px; height: 300px; border: 2px solid red" src="http://www.google.com"></webview>
    <webview id="wv2" style="width: 450px; height: 300px; border: 2px solid red" src="http://www.nytimes.com"></webview>
    <webview id="wv3" style="width: 450px; height: 300px; border: 2px solid red" src="http://www.stackoverflow.com"></webview>
    <webview id="wv4" style="width: 450px; height: 300px; border: 2px solid red" src="http://db.tt/FCCA7nuz"></webview>
  </body>
</html>

Three of those webviews are normal webpages, the fouth is just an example of a long running js file, you can inspect the code or i can provide it later. If i would open 4 google chrome browser windows, type the address, press enter, what i would observe is: 3 pages loaded imediately and the other with the long js execution would still be working.

If i do this in a webpage, using to open these 4 webpages, since it is all in the same process, if 1 page is slow/blocks due to js execution, all others will be blocked.

Now with Chrome App, using i noticed something interesting and weird about the behavior. I notice the following:

  1. If i only load the first 3 webpages, the load is fast and 'at the same time' or so it appears;
  2. If i load all the webpages as it is, i see the first 3 pages loading and the last since it has a long js execution takes his time and then it shows (this would be the optimal behavior), since their are different proccesses they shouldn't depend on if a webview is slow, others must wait;
  3. Now if i comment the third , refresh and execute the app, i see no webview until the one with the longscript is done. (why this happens?)
  4. The point above is random either it happens as i mentioned or it doesn't.
  5. And for last, let's add another <webview id="wv5" style="width: 450px; height: 300px; border: 2px solid red" src="http://developer.chrome.com"></webview>, what will happen for me is: the first three get loaded, the fourth is executing and after finished and displayed then i see the fifth rendered.

My main question/doubt is around the behavior and since they are actually running in a separate process, why it doesn't have same behavious as a browser window for example, why does that webview blocks the others from working/rendering, is it intended to work as it is? Should i do some workaround to detect if a webview after some time isn't finished to skip the load and let others load so then i could go back to the slow ones?

Thank you in advance.

Solution

  • Webviews run in a different process than your app, but they run in the same process of each other in the same partition. If you don't specify a partition attribute, they will be in the same, default one. If you check the Chrome Task Manager (shift+esc) you will see: enter image description here

    (notice the Process ID column)

    If you instead set each webview to a different partition using the tag attribute:

    <!DOCTYPE html>
<html>
  <head>
  </head>
  <body>
    <div>Hello, world!</div>
    <webview id="wv1" partition="p1" style="width: 450px; height: 300px; border: 2px solid red" src="http://www.google.com"></webview>
    <webview id="wv2" partition="p2" style="width: 450px; height: 300px; border: 2px solid red" src="http://www.nytimes.com"></webview>
    <webview id="wv3" partition="p3" style="width: 450px; height: 300px; border: 2px solid red" src="http://www.stackoverflow.com"></webview>
    <webview id="wv4" partition="p4" style="width: 450px; height: 300px; border: 2px solid red" src="http://db.tt/FCCA7nuz"></webview>
  </body>
</html>

    You will see that each webview now runs in its own process:

    enter image description here