CODEWITHSUNDEEP
google-chromegoogle-chrome-app
Let Me Tink About It
Let Me Tink About It

Reputation: 16122

How to properly wrap a web app inside a Google Chrome Packaged App?

I wish to wrap my web app inside a Chrome Packaged App.

My ultimate goals are as follows:

  1. Mask the URL to hide my generic (second-tier) domain (e.g., http://my-app.big-company.com).
  2. Mask the browser to give the appearance of a native desktop app.
  3. Leverage whatever mobile conversion that Chrome Apps for Mobile might provide to allow me to use a single codebase and set of web assets (HTML, CSS & JS) to deploy my app to the mobile app stores for Android and iOS.

Here is what I have so far:

manifest.json 
{
    "name": "Hello World!",
    "description": "My first Chrome App",
    "version": "0.1",
    "manifest_version": 2,
    "app": {
        "background": {
            "scripts": ["background.js"]
        }
    },
    "icons": { "16": "icon-16.png", "128": "icon-128.png" }
}
background.js 
chrome.app.runtime.onLaunched.addListener(function() {
    chrome.app.window.create('window.html', {
        'outerBounds': {
            'width': 400,
            'height': 500
        }
    });
});
window.html 
<!DOCTYPE html>
<html>
    <head>
    </head>
    <body>
        <iframe src="http://example.com/"></iframe>
    </body>
</html>

I suspect, at a minimum, there is a problem in the window.html. Specifically, I doubt I should be using an <iframe> to fetch my web app content.

Here is the documentation I have been following.

Please help.

Upvotes: 0

Views: 2302

Answers (2)

Xan
Xan

Reputation: 77541

You can do this, but you need another tag; specifically, <webview> tag instead of <iframe>. See linked documentation for all the possibilities of that tag. It also requires the "webview" permission.

Do note that this does not work well with the "should behave like a native app" philosophy, but it is possible.

Upvotes: 3

Let Me Tink About It
Let Me Tink About It

Reputation: 16122

This documentation suggests the OP's approach will not work and, instead, you need to package and install all the assets locally.

Code Model

Upvotes: 1

Related Questions