如何在 Google Chrome 打包应用程序中正确包装网络应用程序？答案

【问题标题】：How to properly wrap a web app inside a Google Chrome Packaged App?如何在 Google Chrome 打包应用程序中正确包装网络应用程序？
【发布时间】：2015-12-10 04:57:31
【问题描述】：

我希望将我的网络应用程序包装在 Chrome 打包应用程序中。

我的最终目标如下：

屏蔽 URL 以隐藏我的通用（二级）域（例如，http://my-app.big-company.com）。
屏蔽浏览器以呈现原生桌面应用程序的外观。
利用 Chrome Apps for Mobile 可能提供的任何移动转换，让我能够使用单个代码库和一组网络资产（HTML、CSS 和 JS）将我的应用部署到适用于 Android 和 iOS 的移动应用商店。李>

这是我目前所拥有的：

清单.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" }
}

背景.js

chrome.app.runtime.onLaunched.addListener(function() {
    chrome.app.window.create('window.html', {
        'outerBounds': {
            'width': 400,
            'height': 500
        }
    });
});

窗口.html

<!DOCTYPE html>
<html>
    <head>
    </head>
    <body>
        <iframe src="http://example.com/"></iframe>
    </body>
</html>

我怀疑window.html 至少有问题。具体来说，我怀疑我是否应该使用<iframe> 来获取我的网络应用内容。

Here is the documentation I have been following.

请帮忙。

【问题讨论】：

标签： google-chrome google-chrome-app

【解决方案1】：

你可以这样做，但你需要另一个标签；具体来说，<webview> tag 而不是 <iframe>。有关该标签的所有可能性，请参阅链接文档。它还需要"webview" 权限。

请注意，这与“应该表现得像原生应用程序”的理念不符，但它是可能的。

【讨论】：