Theia: Add meta tag to allow fullscreen view on IPad

[koseduhemak]

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:

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]

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

[akosyakov]

cc @jankeromnes

[koseduhemak]

@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]

@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:

https://github.com/eclipse-theia/theia/blob/9bc52ad1ecae902563847525e2dc8955474291f9/dev-packages/application-manager/src/generator/frontend-generator.ts#L62-L66

https://github.com/eclipse-theia/theia/blob/9bc52ad1ecae902563847525e2dc8955474291f9/packages/plugin-ext/src/hosted/browser/hosted-plugin.ts#L731-L742

A previous pull-request was created to add the viewport tag for mobile devices: https://github.com/eclipse-theia/theia/commit/3ad2b622343b78404dcbc6f5ed6ffe09f68da3fc

[jankeromnes]

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.

https://github.com/eclipse-theia/theia/blob/9bc52ad1ecae902563847525e2dc8955474291f9/dev-packages/application-manager/src/generator/frontend-generator.ts#L62-L66

https://github.com/eclipse-theia/theia/blob/9bc52ad1ecae902563847525e2dc8955474291f9/packages/plugin-ext/src/hosted/browser/hosted-plugin.ts#L731-L742

@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]

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 :)