0

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
  • 826
  • 1
  • 10
  • 25

2 Answers2

3

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

Grant Watters
  • 660
  • 4
  • 16
2

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);
});
Grant Watters
  • 660
  • 4
  • 16
  • 1
    Thank you for your insight. I am avoiding the use of webview into a hosted page as it seems to serve like a bookmark rather than an app. P.S. I really like your moo.do app. Very impressive. – Damon Jun 09 '14 at 13:16
  • 1
    Thanks Damon! If you get things working please followup, I'd be quite interested. As far as using a webview, there isn't a lot of downsides apart from you would have to do message passing between the hosted webview and the privileged portion of your app. You should still be able to point your webview at the app's packaged files. Good luck! – Grant Watters Jun 09 '14 at 18:01