Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Using iframe based webviews on desktop #83188

Closed
2 tasks done
mjbvz opened this issue Oct 23, 2019 · 8 comments
Closed
2 tasks done

Using iframe based webviews on desktop #83188

mjbvz opened this issue Oct 23, 2019 · 8 comments
Assignees
Labels
debt Code quality issues electron Issues and items related to Electron insiders-released Patch has been released in VS Code Insiders sandbox Running VSCode in a node-free environment webview Webview issues
Milestone

Comments

@mjbvz
Copy link
Contributor

mjbvz commented Oct 23, 2019

Today VS Code implements the webview api on desktops using electron's <webview> tag. We've run into some unexpected behavior with webviews and would prefer to move to a more standard web based approach, such as using iframes

For web, we already implement webviews using normal iframes. You can also enable experimental iframe based webviews in desktop VS Code by setting "webview.experimental.useIframes": true ("webview.experimental.useExternalEndpoint": true in older VS Code versions)

Known blockers:

@mjbvz mjbvz added the debt Code quality issues label Oct 23, 2019
@mjbvz mjbvz added this to the On Deck milestone Oct 23, 2019
@mjbvz mjbvz self-assigned this Oct 23, 2019
@mjbvz mjbvz added webview Webview issues electron Issues and items related to Electron labels Jan 23, 2020
@sguillia
Copy link

Hi

I am an extension author

This issue totally prevents some of my users to open the webview contributed by my extension.
The panel opens, but the content is not loaded.

ERR No application in the Launch Services database matches the input criteria log.ts:197

Adding this line to the settings fixes the problem:

"webview.experimental.useExternalEndpoint": true
  • VSCode Version: 1.44
  • OS Version: macOS 10.14.6

Do you recommend me to make my extension spontaneously write useExternalEndpoint to the user settings?

My extension requires internet anyway so this seems a reasonable workaround.

I can try to detect when the problem occurs, by setting up a watchdog in the extension, and making the webview content call postMessage on first load.

@mjbvz
Copy link
Contributor Author

mjbvz commented Apr 17, 2020

@sguillia No. Your extension should never direct users to enable this setting. It is intentionally not documented and marked as experimental because it is not production ready and it is not particularly stable

@mjbvz
Copy link
Contributor Author

mjbvz commented May 13, 2020

@deepak1556 Just pushed an update to my branch the enables offline iframe based webviews (without requiring service workers): https://github.com/mjbvz/vscode/tree/iframe-webviews

The bulk of the change is in mjbvz@9091ad7

While can't switch to iframe based webviews yet, this iteration I think we should try the following:

  • Enable the new vscode-webview-resource scheme our existing webviews. This would let us move away from using a vscode-resource protocol handler for each individual webview.

  • Update asWebviewUri to return vscode-webview-resource uris.

  • Add some code that tries to rewrite vscode-resource: uris to vscode-webview-resource uris (this is very similar to the code we already have for web that rewrites vscode-resource uris).

@bpasero
Copy link
Member

bpasero commented May 13, 2020

@mjbvz does that solution preserve todays isolation from webview to webview? I thought in order to achieve that, each webview would need its own origin?

And a second question: what is the purpose of vscode-resource scheme. Is it only used for content inside webview that wants to access files?

@deepak1556
Copy link
Contributor

does that solution preserve todays isolation from webview to webview? I thought in order to achieve that, each webview would need its own origin?

Yup we are preserving that, the idea for desktop is quite similar to web but instead of subdomains we generate new uuids for each webview that will act as the origin and we map that to the webview id. For ex:

vscode-webview is registered as standard scheme, it will respect URI of the format scheme://origin/path. When something like vscode-webview://uuid1/test.html and vscode-webview://uuid2/test.html are loaded in two different webview, chromium will treat these as separate origins because of uuid1 , uuid2 and provide them with their own process.

On the main process side, we pretty much just have to handle the path to load resource from based on the uuid -> webview id mapping

protocol.registerBufferProtocol('vscode-webview', (request, cb) => {
   const url = new URL(request.url)
   switch (url.host) {

    } 
})

@bpasero
Copy link
Member

bpasero commented May 13, 2020

Ah ok, I was not aware that having the UUID as part of the URL is sufficient, that is great 👍

@mjbvz
Copy link
Contributor Author

mjbvz commented Jun 25, 2020

#100991 enables offline iframe based webviews on desktop. Still blocked on moving off of webviews until search is supported: #96307

tamuratak added a commit to tamuratak/LaTeX-Workshop that referenced this issue Apr 10, 2021
…l PDF viewer gets focused

every time it reloaded when iframe based webviews enabled. microsoft/vscode#83188
@mjbvz mjbvz modified the milestones: On Deck, May 2021 May 6, 2021
@deepak1556 deepak1556 removed this from the May 2021 milestone May 17, 2021
@mjbvz mjbvz added this to the June 2021 milestone May 21, 2021
@mjbvz mjbvz modified the milestones: June 2021, July 2021 Jun 30, 2021
@mjbvz mjbvz closed this as completed in 2222f3c Jul 6, 2021
@github-actions github-actions bot locked and limited conversation to collaborators Aug 20, 2021
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
debt Code quality issues electron Issues and items related to Electron insiders-released Patch has been released in VS Code Insiders sandbox Running VSCode in a node-free environment webview Webview issues
Projects
None yet
Development

No branches or pull requests

5 participants
@bpasero @deepak1556 @mjbvz @sguillia and others