hideNavbar doesn't work on Apple IOS in Mobile mode

stefan13 · December 26, 2023, 12:06pm

I’m struggling to hide the Navbar on my IOS device, when using Mobile Mode in Safari Browser.

I configured

config:
  label: Dashboard
  sidebar: false
  hideNavbar: true
  showFullscreenIcon: false
  hideSidebarIcon: true
  style:
    --f7-block-padding-horizontal: 10px
    --f7-navbar-height: 0

and this hide the Navbar on all Browsers, also on iPhone, when running in “Desktop Page” mode.

Desktop Mode - without Navbar:

However, when “Mobile Page” mode is enabled, this command seems to be ignored and Navbar is again visible.

Mobile-Mode - with Navbar:

Any idea how to suppress the Navbar in Mobile mode?

many thanks

Oliver2 · December 26, 2023, 12:44pm

See here:
https://community.openhab.org/t/start-main-ui-with-individual-page-in-fullscreen-mode-without-any-bars-and-margins/140690

stefan13 · December 27, 2023, 8:31pm

Hello Oliver,

many thanks for sharing the link.
I’m struggling with the path used for the 2 files I have to add.

I run OH4 in a docker container.
I added a new folder “manifest” with the following path
/openhab4/userdata/etc/openhab/html/manifest
and created the 2 files
index.html and manifest.webmanifest
However the page is not opened with

http://<IP>:<Port>/page/index.html

I guess that the path I use is wrong?!

Oliver2 · December 27, 2023, 10:20pm

http://<IP>:<Port>/static/manifest/index.html

is the page you need to launch so that you can create a PWA (progressive web app) link on your home screen.
The path to your MainUI page needs to be configured in the manifest file

stefan13 · January 5, 2024, 4:51pm

Hello @Oliver2 - Happy New Year.
Seems I’m still doing something wrong, as connecting to the URL does return an error:

Sorry

Requested content not found.

Debug information

* **Url:** /static/manifest/index.html
* **Path:** /static/manifest/index.html
* **Hash:**
* **Params:**
* **Query:**
* **Route:** (.*)

This is the URL I use to connect to my favor homescreen usually, which works well.

http://192.168.5.22:8192/page/pgWeWeHome

I used the following URL to use the approach you described instead, which fails:

http://192.168.5.22:8192/static/manifest/index.html

This is the folder structure I use - did I miss something ?

[St@NAS-3 manifest]$ pwd
/share/Container/openhab4/userdata/etc/openhab/html/manifest
[St@NAS-3 manifest]$ ls -l
total 8
-rw-r--r-- 1 openhab openhab 1273 2023-12-27 12:40 index.html
-rw-r--r-- 1 openhab openhab  884 2023-12-27 12:40 manifest.webmanifest
[St@NAS-3 manifest]$

manifest.webmanifest

{
  "name": "openHAB",
  "short_name": "openHAB",
  "description": "openHAB",
  "lang": "de-DE",
  "start_url": "/page/pgWeWeHome",
  "id": "/page/Home",
  "display": "fullscreen",
  "background_color": "#ffffff",
  "theme_color": "#f7f7f7",
  "icons": [
    {
      "src": "/res/icons/128x128.png",
      "sizes": "128x128",
      "type": "image/png"
    },
    {
      "src": "/res/icons/144x144.png",
      "sizes": "144x144",
      "type": "image/png"
    },
    {
      "src": "/res/icons/152x152.png",
      "sizes": "152x152",
      "type": "image/png"
    },
    {
      "src": "/res/icons/192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "/res/icons/256x256.png",
      "sizes": "256x256",
      "type": "image/png"
    },
    {
      "src": "/res/icons/512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ]
}

index.html

<!doctype html>
<html>
<head>
        <meta charset="UTF-8"/>
        <meta http-equiv="Content-Security-Policy" content="default-src * 'self' 'unsafe-inline' 'unsafe-eval' data: gap: content: blob:; style-src 'self' 'unsafe-inline';"/>
        <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no,minimal-ui,viewport-fit=cover"/>
        <meta name="theme-color" content="#f7f7f7"/>
        <meta name="format-detection" content="telephone=no"/>
        <meta name="msapplication-tap-highlight" content="no"/>
        <title>openHAB</title>
        <meta name="apple-mobile-web-app-capable" content="yes"/>
        <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"/>
        <link rel="apple-touch-icon" href="/res/icons/apple-touch-icon.png" crossorigin="use-credentials"/>
        <link rel="icon" href="/res/icons/favicon.svg" type="image/svg+xml" sizes="any" crossorigin="use-credentials"/>
        <link rel="icon" href="/res/icons/128x128.png" type="image/png" sizes="128x128" crossorigin="use-credentials"/>
        <link rel="manifest" href="/static/manifest/manifest.webmanifest" type="application/manifest+json" crossorigin="use-credentials"/>

        <meta name="mobile-web-app-capable" content="yes"/>
</head>
<body>
        <h1>Add to homescreen now</h1>
</body>
</html>

Any idea why it doesn’t work for me?

thanks again for your help.

Oliver2 · January 5, 2024, 5:46pm

On the first view everything looks ok.
If you cannot access
http://192.168.5.22:8192/static/manifest/index.html
then it might be related to docker. You should be able to access any kind of file which is suported by your browser from this folder.
Can you open index.html by browser if you open it from html-folder?

stefan13 · January 6, 2024, 10:46am

I made some progress and found the problem with help of your original post.

The two files needs to be in the conf instead of userdata path

[St@NAS-3 html]$ pwd
/share/Container/openhab4/conf/html
[St@NAS-3 html]$

I can now address open the index.html file.

However, it seems that the manifest.json (I renamed the file for testing) is not used to open the main page (/page/pgWeWeHome) - any idea what I made wrong?

I can open the index.html and manifest.json using the browser now, since they got moved to the conf/html folder.

Oliver2 · January 6, 2024, 2:58pm

As the instruction says, you need to add this page to your iOS home screen. Once you click on that icon on your home screen it will open the page configured in the manifest file.