Google Drive Realtime API in a Chrome Packaged App

2020-03-31 07:32发布

站内问答 / 前端开发
2096 2 6

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

2条回答
够拽才男人
2楼-- · 2020-03-31 07:51

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);
});
查看更多
0人赞 添加讨论(0) 举报
男人必须洒脱
3楼-- · 2020-03-31 07:53

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

查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(6)