fix: ios home screen app height (#24435) (CP: 25.1) (#24467)

This PR cherry-picks changes from the original PR #24435 to branch 25.1.
---
#### Original PR description
> Fixes #5576
> 
> We can consider adding a feature to the PWA annotation later, if there
are requests for that. For now, I assume this fix is enough for the
majority of our users.
> 
> The bootstrap page update makes sure the app covers the entire
viewport height on iOS when opened as a standalone/home screen app.

Co-authored-by: Jouni Koivuviita <jouni@vaadin.com>
Co-authored-by: Anton Platonov <anton@vaadin.com>

Author: 3 people

flow-server/src/main/java/com/vaadin/flow/server/BootstrapHandler.java

@@ -1748,7 +1748,7 @@ private static void setupPwa(Document document, PwaRegistry registry) {
                     .attr(CONTENT_ATTRIBUTE, config.getThemeColor());
             head.appendElement(META_TAG)
                     .attr("name", "apple-mobile-web-app-status-bar-style")
-                    .attr(CONTENT_ATTRIBUTE, config.getThemeColor());
+                    .attr(CONTENT_ATTRIBUTE, "black-translucent");
 
             // Add manifest
             head.appendElement("link").attr("rel", "manifest").attr("href",

flow-server/src/main/resources/com/vaadin/flow/server/frontend/index.html

@@ -13,6 +13,22 @@
       width: 100%;
       margin: 0;
     }
+
+    /*
+    Fix app height for iOS home screen apps:
+    - 100% doesn't cover the entire screen.
+    - 100vh would work on iOS 18 but not on iOS 17 (too tall in Safari, correct in standalone mode).
+    - 100lvh is too tall in Safari. 100svh is too short in standalone apps.
+    - 100dvh doesn't seem to work on first render when launched from home screen (initially like 100svh, then changes to 100lvh when you try to scroll the view).
+    - So, we use 100% for the regular case (Safari and other browsers), and 100lvh for iOS home screen apps. Note, that the `display-mode: standalone` media query only works if the webmanifest defines `"display": "standalone"`.
+    */
+    @supports (-webkit-touch-callout: none) {
+      @media (display-mode: standalone) {
+        html {
+          height: 100lvh;
+        }
+      }
+    }
   </style>
   <!-- index.ts is included here automatically (either by the dev server or during the build) -->
 </head>

flow-server/src/test/java/com/vaadin/flow/server/communication/IndexHtmlRequestHandlerTest.java

@@ -624,7 +624,7 @@ public void should_add_metaAndPwa_Inline_Elements_when_appShellPresent()
                 elements, "apple-mobile-web-app-status-bar-style");
         assertTrue(appleMobileWebAppStatusBar.isPresent(),
                 "'apple-mobile-web-app-status-bar-style' meta link should exists.");
-        assertEquals("#ffffff",
+        assertEquals("black-translucent",
                 appleMobileWebAppStatusBar.get().attr("content"));
 
         Optional<Element> mobileWebAppCapableElements = findFirstElementByNameAttrEqualTo(

flow-tests/test-pwa/src/test/java/com/vaadin/flow/pwatest/ui/PwaTestIT.java

@@ -63,11 +63,11 @@ public void testPwaResources() throws IOException {
                         .size());
 
         // test theme color for apple mobile
-        Assert.assertEquals(1, head
-                .findElements(By.xpath(
+        Assert.assertEquals(1,
+                head.findElements(By.xpath(
                         "//meta[@name='apple-mobile-web-app-status-bar-style']"
-                                + "[@content='" + AppShell.THEME_COLOR + "']"))
-                .size());
+                                + "[@content='black-translucent']"))
+                        .size());
         // icons test
         checkIcons(head.findElements(By.xpath("//link[@rel='shortcut icon']")),
                 1);