Repository navigation
Support for Browser Runtime #7765
Description
Activity
Our libraries actually do work in browser with webpack 4 (not 5) in a so called "fallback mode" (no gRPC) and a little bit different authentication flow (OAuth2 workflow via google-auth-library, and then pass authenticated auth client to the client constructor as
auth). I wrote some example in this comment.Important disclaimer: while I believe it should work, it's not an officially supported feature yet.
Reacted by YeoulReacted by Ethan Jung@alexander-fenster Thanks you for answering.
Actually, I already tested in create-react-app generated projects and next-project. and it works.
what i mean "browser support" is little bit different than "working" in browser.after i dived into the codebase, actually,
gapic-generator-typescriptworks as some kind of "template generator" and, all of the features implemented is through the 'google-gax' library.
https://github.com/googleapis/gax-nodejsso when i checked this library(
google-gax), it generates stub & fallback http logic through "node-specific" apis (likesetImmediate,fsor something.)for example,
google-gaxresolves call using "setImmediate" which browser doesn't support (at least i know) https://developer.mozilla.org/en-US/docs/Web/API/Window/setImmediate#browser_compatibilitybelow is apicall method implemented in gax-nodejs (src/call.ts)
/** * Call calls the specified function. Result will be used to fulfill * the promise. * * @param {SimpleCallbackFunction} func * A function for an API call. * @param {Object} argument * A request object. */ call(func: SimpleCallbackFunction, argument: RequestType): void { if (this.completed) { return; } const canceller = func( argument, ( err: GoogleError | null, response?: ResponseType, next?: NextPageRequestType, rawResponse?: RawResponseType ) => { this.completed = true; setImmediate(this.callback!, err, response, next, rawResponse); } ); if (canceller instanceof Promise) { canceller.catch(err => { setImmediate(this.callback!, new GoogleError(err), null, null, null); }); } this.cancelFunc = () => canceller.cancel(); } }
so every time i use this library in browser runtime, i have to resolve all the polyfills and dependencies which browser api doesn't provide.
Yes, unfortunately, you would need some polyfills (webpack 4 will provide them for you). Here is my recent successful attempt to make the GAPIC library work in browser: https://github.com/googleapis/gax-nodejs/blob/main/test/browser-test/test/test.endtoend.ts (in
google-gax, runnpm run browser-test). Unfortunately, at this point, we won't be able to implement native browser support without polyfills.
Summary
Is there any considerations of Supporting Browser Runtime?
It will be really useful for Front-end Developers Using this library in Browser Runtime (like Chrome)
Details
Recently, I generated typescript API from my protobuf(
.proto) file using this library.I tried to use this API in my Nextjs Project.
it works on Server Side Request(Node.js runtime) as expected,
but When requesting in the browser, it didn't work
because it depends on nodejs runtime dependencies (like
fs,utils,promisify...etc)It would be really helpful for Frontend Developers if this generator supports browser runtime.
Thank you.