javascript - 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,

  // Remended
  "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=""></webview>
    <webview id="wv2" style="width: 450px; height: 300px; border: 2px solid red" src=""></webview>
    <webview id="wv3" style="width: 450px; height: 300px; border: 2px solid red" src=""></webview>
    <webview id="wv4" style="width: 450px; height: 300px; border: 2px solid red" src=""></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:

If i only load the first 3 webpages, the load is fast and 'at the same time' or so it appears;
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;
Now if i ment the third , refresh and execute the app, i see no webview until the one with the longscript is done. (why this happens?)
The point above is random either it happens as i mentioned or it doesn't.
And for last, let's add another <webview id="wv5" style="width: 450px; height: 300px; border: 2px solid red" src=""></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.

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

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,

  // Remended
  "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."></webview>
    <webview id="wv2" style="width: 450px; height: 300px; border: 2px solid red" src="http://www.nytimes."></webview>
    <webview id="wv3" style="width: 450px; height: 300px; border: 2px solid red" src="http://www.stackoverflow."></webview>
    <webview id="wv4" style="width: 450px; height: 300px; border: 2px solid red" src="http://db.tt/FCCA7nuz"></webview>
  </body>
</html>

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:

If i only load the first 3 webpages, the load is fast and 'at the same time' or so it appears;
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;
Now if i ment the third , refresh and execute the app, i see no webview until the one with the longscript is done. (why this happens?)
The point above is random either it happens as i mentioned or it doesn't.
And for last, let's add another <webview id="wv5" style="width: 450px; height: 300px; border: 2px solid red" src="http://developer.chrome."></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.

Thank you in advance.

Share Improve this question edited Jul 3, 2015 at 10:03 Zenexer 19.6k10 gold badges75 silver badges78 bronze badges asked May 19, 2013 at 14:28 mpc 931 silver badge9 bronze badges

Maybe you can try to use the events(loadstart and loadstop) provided with webview to log the start time and end time of loading of each webview, so that you can see the sequence of loading whether they are concurrent or sequential. – Benny Ng Commented May 19, 2013 at 15:10

Add a ment |

1 Answer 1

Sorted by: Reset to default 9

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:

(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."></webview>
    <webview id="wv2" partition="p2" style="width: 450px; height: 300px; border: 2px solid red" src="http://www.nytimes."></webview>
    <webview id="wv3" partition="p3" style="width: 450px; height: 300px; border: 2px solid red" src="http://www.stackoverflow."></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:

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - Google Chrome App: Webview behavior - Stack Overflow

background.js

manifest.json

window.html

background.js

manifest.json

window.html

1 Answer 1

与本文相关的文章

评论列表(0)