Google Drive Realtime API in a Chrome Packaged App

Has anyone figured out how to use the Google Drive Realtime API in a Chrome Packaged App?

Loading gapi in a sandboxed iframe results in:

Uncaught TypeError: Cannot read property 'prototype' of undefined cb=gapi.loaded_0:6

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

Please see my example repo at: https://github.com/damondouglas/sandbox-cpa-drive-rt

Damon - I took the example you posted on GitHub and changed it to use a webview which works fine. I think you are restricting yourself to not using one for artificial reasons. It may still be possible to solve this issue another way without using a webview, but after a good amount of research and trial and error I have not found a better option.

The updated code uses webview partitions to access your local app files without using an external website, so all of the app's resources are bundled with the app with no external references other than to the realtime APIs.

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

I've spent a bit of time investigating how to make this possible. The best option I have come up with is to use a host page and a webview element as a container for an external site. I believe you may be able to use the webview to access resources that come packaged with the app using webview partitions though I haven't tried yet.

Trying to load the Google Javascript Client Library in a Chrome App page throws the DOM exception you're seeing due to it's use of window.sessionStorage which is not accessible from a chrome app.

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);
});

来源：https://stackoverflow.com/questions/24112738/google-drive-realtime-api-in-a-chrome-packaged-app

标签

google-drive-realtime-api

google-chrome-app