Add support for iOS fullscreen webapp

[stephanrenggli]

Is your feature request related to a problem? Please describe.
I recently added portainer to my iPad homescreen. On supported websites this opens the website in fullscreen mode (no search bar etc.)
Portainer does not seem to support this yet.

Describe the solution you'd like
Add support for full screen iOS webapp by adding the required meta tags. A quick search turned up this post: https://stackoverflow.com/a/58759324

Describe alternatives you've considered
The current situation is fine and works perfectly, however adding support would make looking at portainer on iOS even better.

Additional context

[stephanrenggli]

Another possible way to achieve this would be to add a manifest.json file. From what I can tell this would support multiple browsers (https://web.dev/add-manifest/)

manifest.json:

{
  "name": "Portainer",
  "start_url": "/",
  "background_color": "#000000",
  "theme_color": "#ffffff",
  "display": "standalone"
}

Link it in index.html:

<link rel="manifest" href="manifest.json">

I tested this on my instance, see results below.

This is how it looks without the manifest.json:

This is how it looks with the manifest.json (no browser UI shown):

[SvenDowideit]

@stephanrenggli gosh, that's a pretty nice - I wonder how that works on Android.

[akloeckner]

Actually, I found out just recently that many systems (Android, Windows) support installing an actual app from a webpage, if it's set up properly. Here are the requirements for that: https://web.dev/install-criteria/ .

This will allow to use some features such as searching for Portainer in the installed Apps, or having a notification badge next to the app icon. See: https://web.dev/learn/pwa/installation/#webapks

If someone were to implement this feature, I'd suggest to go the manifest route and make sure, the criteria are fulfilled.

[WhereRtheInterwebs]

I really wanted this feature!

I added this to index.html:

<meta name="theme-color" media="(prefers-color-scheme: light)" content="#101828">
<meta name="theme-color" media="(prefers-color-scheme: dark)"  content="#212121">
<link rel="manifest" href="portainer.webmanifest" crossorigin="use-credentials" />

I used this portainer.webmanifest file:

{
    "name": "Portainer",
    "icons": [
        {
          "src": "logomark.svg",
          "type": "image/svg+xml",
          "sizes": "any"
        },
        {
            "src": "android-chrome-192x192.png",
            "sizes": "192x192",
            "type": "image/png"
        }
    ],
    "start_url": "/",
    "display": "standalone",
    "theme_color": "#f3f3f3",
    "background_color": "#f3f3f3"
}

This creates the icon and standalone app experience on Chrome for Windows and Android. I found those icons in the repo under app/assets/ico and placed them along with portainer.manifest and the new index.html in the container under /public.

I'm not 100% sure how to put this in the repo because the folder structure doesn't match the container file system.