Menu
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:
chrome.app.runtime.onLaunched.addListener(function() {
// Tell your app what to launch and how.
chrome.app.window.create('window.html', {
width: 1800,
height: 1000
});
});
{
// 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" ]
}
<!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:
<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.
999
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.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:
164
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
