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.

Sign up for GitHub

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

Jump to bottom

Add meta tag to allow fullscreen view on IPad #7607

Closed
koseduhemak opened this issue Apr 18, 2020 · 6 comments · Fixed by #7663
Closed

Add meta tag to allow fullscreen view on IPad #7607

koseduhemak opened this issue Apr 18, 2020 · 6 comments · Fixed by #7663
Labels
help wanted issues meant to be picked up, require help ipad issues related to iPad

Comments

@koseduhemak
Copy link

koseduhemak commented Apr 18, 2020 •
edited
Loading

Description

Get ability to run theia web ide in fullscreen on iOS devices (no address bar).

Reproduction Steps

On mobile devices, every inch counts. So it would be nice to have the ability to run theia in fullscreen mode. Easy solution would be adding following markup:

<meta name="apple-mobile-web-app-capable" content="yes">

If the page containing theia is exported to home screen, the tag would allow to open it from the home screen in fullscreen view.
At the moment I use a bookmarklet to insert the code shown above and save it afterwards to home screen. It works awesome but it would be nice to have it inbuilt:

javascript:(function()%7Bmeta=document.createElement('meta');%20meta.name='apple-mobile-web-app-capable';meta.content='yes';document.getElementsByTagName('head').item(0).appendChild(meta);alert('Now%20click%20add%20to%20homescreen')%7D)();/*Installed*/

Screenshot of working example:
566A6127-A6DB-4533-BBFE-CE22D1370F72

Some more tips to get an even more native app feeling on iOS devices: https://medium.com/appscope/designing-native-like-progressive-web-apps-for-ios-1b3cdda1d0e8
@vince-fugnitto vince-fugnitto added the ipad issues related to iPad label Apr 18, 2020
@vince-fugnitto
Copy link
Member

@koseduhemak is it something you’d like to contribute? :)

@akosyakov akosyakov added the help wanted issues meant to be picked up, require help label Apr 20, 2020
@akosyakov
Copy link
Member

cc @jankeromnes

@koseduhemak
Copy link
Author

koseduhemak commented Apr 21, 2020 •
edited
Loading

@vince-fugnitto would be a pleasure to contribute. Could you point me slightly in the right direction? This is a very huge project and I don‘t know where to look for the addition.
It is fine if you could tell me in which module I need to look. Is it within the editor (https://github.com/eclipse-theia/theia/tree/master/packages/editor) module, in the core module (https://github.com/eclipse-theia/theia/tree/master/packages/core) or even at another place?
Thanks in advance.

EDIT: Found something which looks promising: https://github.com/eclipse-theia/theia/blob/fc49b2c3b8a690ba5b94e1fd48cf17469b51057d/packages/plugin-ext/src/main/browser/webview/pre/index.html. Is this the right spot?

@vince-fugnitto
Copy link
Member

@vince-fugnitto would be a pleasure to contribute. Could you point me slightly in the right direction? This is a very huge project and I don‘t know where to look for the addition.

Sure, if you're looking to updating the meta tag then the change should be here:

theia/dev-packages/application-manager/src/generator/frontend-generator.ts

Lines 62 to 66 in 9bc52ad

protected compileIndexHead(frontendModules: Map<string, string>): string {
return `
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">`;
}

theia/packages/plugin-ext/src/hosted/browser/hosted-plugin.ts

Lines 731 to 742 in 9bc52ad

protected getDeserializationFailedContents(message: string): string {
return `<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html;charset=UTF-8">
<meta http-equiv="Content-Security-Policy" content="default-src 'none';">
</head>
<body>${message}</body>
</html>`;
}
}

A previous pull-request was created to add the viewport tag for mobile devices: 3ad2b62

@jankeromnes
Copy link
Member

On mobile devices, every inch counts. So it would be nice to have the ability to run theia in fullscreen mode. Easy solution would be adding following markup:

<meta name="apple-mobile-web-app-capable" content="yes">

That's a fantastic suggestion @koseduhemak, many thanks! 🙏

Some more tips to get an even more native app feeling on iOS devices: https://medium.com/appscope/designing-native-like-progressive-web-apps-for-ios-1b3cdda1d0e8

And this is also a great resource, thank you for sharing.

I notice that using"display": "standalone" in a manifest.json is listed as an alternative. I think that having a manifest.json will be an important next step toward making Theia a Progressive Web App (and then also having a Service Worker for better offline support), but we can definitely start by adding the <meta> tag you suggested as that already seems like a big improvement to Theia's iPad UX.

theia/dev-packages/application-manager/src/generator/frontend-generator.ts

Lines 62 to 66 in 9bc52ad

protected compileIndexHead(frontendModules: Map<string, string>): string {
return `
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">`;
}

theia/packages/plugin-ext/src/hosted/browser/hosted-plugin.ts

Lines 731 to 742 in 9bc52ad

protected getDeserializationFailedContents(message: string): string {
return `<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html;charset=UTF-8">
<meta http-equiv="Content-Security-Policy" content="default-src 'none';">
</head>
<body>${message}</body>
</html>`;
}
}

@vince-fugnitto Interesting, I didn't know about the getDeserializationFailedContents function. What is its purpose? And should the <meta> tags in there be aligned with the first code location?

@koseduhemak
Copy link
Author

Ok I will make a pull request this weekend with the new tag as a first start. If this works I will dig into the manifest thing :)

@koseduhemak koseduhemak mentioned this issue Apr 24, 2020
Merged
1 task
This was referenced May 15, 2020
Open
Closed
@abhsange abhsange mentioned this issue Oct 8, 2020
Closed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
help wanted issues meant to be picked up, require help ipad issues related to iPad
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

Added meta tag to enable fullscreen experience on iOS devices koseduhemak/theia
4 participants
@jankeromnes @akosyakov @koseduhemak @vince-fugnitto