Question

有没有人想出如何在Google Drive Realtime API中使用Chrome Packaged App？

在沙盒iframe中加载gapi会导致：

未捕获的TypeError：无法读取属性＆＃39;原型＆＃39;未定义的cb = gapi.loaded_0：6

gapi.load("auth:client,drive-realtime,drive-share", function(){...});

请参阅我的示例回复：https://github.com/damondouglas/sandbox-cpa-drive-rt

Answer 1

Damon - 我把你在GitHub上发布的例子改为使用webview，它运行正常。我认为你限制自己不要出于人为原因使用它。如果不使用webview，仍然可以用另一种方式解决这个问题，但经过大量的研究和反复试验后，我还没有找到更好的选择。

更新的代码使用webview分区来访问本地应用程序文件，而无需使用外部网站，因此所有应用程序的资源都与应用程序捆绑在一起，除了实时API之外没有外部引用。

https://drive.google.com/file/d/0B1es-bMybSeSVWozSkJ6OFd5YTQ/edit?usp=sharing

Answer 2

我花了一些时间研究如何实现这一目标。我提出的最佳选择是使用主机页面和webview element作为外部站点的容器。我相信您可以使用webview访问使用webview partitions随应用程序打包的资源，但我还没有尝试过。

尝试在Chrome应用页面中加载Google Javascript Client Library会因为使用无法从Chrome应用访问的window.sessionStorage而导致您看到的DOM异常。

<强>的manifest.json

{
  "name": "Moo.do",
  "description": "Moo.do - Organize your way",
  "version": "0.1",
  "manifest_version": 2,
  "app": {
    "background": {
      "scripts": [ "chromeapp.js" ]
    }
  },
  "permissions": [
    "storage",
    "webview"
  ]
}

<强> chromeapp.js

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

<强>的test.html

<head>
    <script src="test.js" type="text/javascript"></script>
    <style>
    body {
        margin: 0px;
    }

    .view {
        position: absolute;
        left: 0px;
        top: 0px;
    }

    #authView {
        width: 100%;
        height: 100%;
    }

    #mainView {
        width: 100%;
        height: 100%;
    }
    </style>
</head>

<body>

<webview id="mainView" class="view" src="http://www.moo.do"></webview>

</body>

</html>

<强> test.js

function handleNewWindow(evNew)
{
    var authView = document.createElement('webview');
    authView.id = 'authView';
    authView.classList.add('view');

    document.body.appendChild(authView);

    authView.addEventListener('exit', function (e)
    {
        debugger;
    });

    authView.addEventListener('loadredirect', function (e)
    {
        debugger;
    });

    evNew.window.attach(authView);
}

document.addEventListener('DOMContentLoaded', function ()
{
    var mainView = document.getElementById('mainView');

    mainView.addEventListener('newwindow', handleNewWindow);
});

Chrome打包应用中的Google Drive Realtime API

2 个答案: