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.

[gerneio]

Things could have changed in the main repo to allow this (or chromium for that matter), however I found that we could manually install the app ourselves through edge/chrome settings even though I don't see any actual manifest files within the portainer app itself. I did test with using a modified version of the index/manifest files from above, and really the only difference is whether it automatically prompts you to install vs you having to know where to go to manually install. For most of us, the manual steps are likely sufficient for installing portainer as a PWA. Of course, I have no idea how this applies to mobile, just tested on edge/chrome desktop.

Here are the manual steps (from either browser):

Page Settings > More tools > Apps > Install this site as an app

Only issue that I noticed is that since I'm running as insecure localhost (still looking into it), the PWA won't seem to work until it's opened directly in the browser tab first. Afterwards PWA app will work just fine. But if I refresh it, I have to do the whole process again. Likely not an issue if you're using a proper secure context, so not too worried about it. I did find that the same issue existed whether you supplied a manifest (as shown above) or did the manual steps, so not sure if the web manifest file itself matters at all (I think not).

Dev Notes

For rapidly testing the web manifest changes (on my windows host & windows container), it was easy enough to first copy out the index.html file, modify with above post's changes, create the portainer.webmanifest locally, and then copy both back into the active container. Generally a restart of the container was not needed, assuming there was no active file locks.

docker cp portainer:C:\public\index.html index.bkp.html # create local bkp first
docker cp portainer:C:\public\index.html index.html

# Use local text editor to make changes and create `portainer.webmanifest`

# Copy back to container
docker cp index.html portainer:C:\public\
docker cp portainer.webmanifest portainer:C:\public\

Refresh the web page and you should see an install icon in the address bar now, if not, check dev tools for manifest in console logs or network trace. Likely it'll tell you what was wrong (i.e. the logomark.svg doesn't exist).

I would imagine these steps could easily be included in a script during build or entry, but I didn't see the need to proceed any further given the manual steps.