feat: backport of PWA icons generation at build time (#21279)

Backport #20516 to Flow 2.11

Fixes #21254

Author: mcollovati

flow-maven-plugin/src/main/java/com/vaadin/flow/plugin/maven/BuildFrontendMojo.java

@@ -197,6 +197,8 @@ private void runNodeUpdater()
         // @formatter:off
         new NodeTasks.Builder(getClassFinder(project),
                 npmFolder, generatedFolder, frontendDirectory)
+                .withWebpack(webpackOutputDirectory, null,
+                        null)
                         .runNpmInstall(runNpmInstall)
                         .enablePackagesUpdate(true)
                         .useByteCodeScanner(optimizeBundle)

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

@@ -377,13 +377,29 @@ public final class Constants implements Serializable {
      */
     public static final String VAADIN_MAPPING = "VAADIN/";
 
+    /**
+     * The static resources root folder.
+     */
+    public static final String VAADIN_WEBAPP = "webapp/";
+
+    /**
+     * The generated PWA icons folder.
+     */
+    public static final String VAADIN_PWA_ICONS = "pwa-icons/";
+
     /**
      * The path to meta-inf/VAADIN/ where static resources are put on the
      * servlet.
      */
     public static final String VAADIN_SERVLET_RESOURCES = META_INF
             + VAADIN_MAPPING;
 
+    /**
+     * The path to webapp/ public resources root.
+     */
+    public static final String VAADIN_WEBAPP_RESOURCES = VAADIN_SERVLET_RESOURCES
+            + VAADIN_WEBAPP;
+
     /**
      * The static build resources folder.
      */

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

@@ -8,13 +8,13 @@
  */
 package com.vaadin.flow.server;
 
+import javax.servlet.ServletContext;
+
 import java.io.Serializable;
 import java.util.Arrays;
 import java.util.Collections;
 import java.util.List;
 
-import javax.servlet.ServletContext;
-
 /**
  * Holds the configuration from the {@link PWA} annotation.
  *
@@ -48,40 +48,83 @@ public class PwaConfiguration implements Serializable {
     private final List<String> offlineResources;
     private final boolean enableInstallPrompt;
 
+    /**
+     * Creates the configuration using default PWA parameters.
+     */
+    public PwaConfiguration() {
+        this(false, "/", DEFAULT_NAME, "Flow PWA", "", DEFAULT_BACKGROUND_COLOR,
+                DEFAULT_THEME_COLOR, DEFAULT_ICON, DEFAULT_PATH,
+                DEFAULT_OFFLINE_PATH, DEFAULT_DISPLAY, "", new String[0],
+                false);
+    }
+
     protected PwaConfiguration(PWA pwa, ServletContext servletContext) {
-        rootUrl = hasContextPath(servletContext)
+        this(true, rootUrlPath(servletContext), pwa.name(),
+                pwa.shortName().substring(0,
+                        Math.min(pwa.shortName().length(), 12)),
+                pwa.description(), pwa.backgroundColor(), pwa.themeColor(),
+                checkPath(pwa.iconPath()), checkPath(pwa.manifestPath()),
+                checkPath(pwa.offlinePath()), pwa.display(),
+                pwa.startPath().replaceAll("^/+", ""), pwa.offlineResources(),
+                pwa.enableInstallPrompt());
+    }
+
+    /**
+     * Constructs a configuration from individual values.
+     *
+     * @param enabled
+     *            is PWA enabled
+     * @param name
+     *            the application name
+     * @param shortName
+     *            the application short name
+     * @param description
+     *            the description of the application
+     * @param backgroundColor
+     *            the background color
+     * @param themeColor
+     *            the theme color
+     * @param iconPath
+     *            the icon file path
+     * @param manifestPath
+     *            the `manifest.webmanifest` file path
+     * @param offlinePath
+     *            the static offline HTML file path
+     * @param display
+     *            the display mode
+     * @param startPath
+     *            the start path
+     * @param offlineResources
+     *            the list of files to add for pre-caching
+     * @param enableInstallPrompt
+     *            is install prompt resources injection enabled.
+     */
+    public PwaConfiguration(boolean enabled, String rootUrl, String name,
+            String shortName, String description, String backgroundColor,
+            String themeColor, String iconPath, String manifestPath,
+            String offlinePath, String display, String startPath,
+            String[] offlineResources, boolean enableInstallPrompt) {
+        this.rootUrl = rootUrl;
+        this.appName = name;
+        this.shortName = shortName.substring(0,
+                Math.min(shortName.length(), 12));
+        this.description = description;
+        this.backgroundColor = backgroundColor;
+        this.themeColor = themeColor;
+        this.iconPath = iconPath;
+        this.manifestPath = manifestPath;
+        this.offlinePath = offlinePath;
+        this.display = display;
+        this.startPath = startPath;
+        this.enabled = enabled;
+        this.offlineResources = Arrays.asList(offlineResources);
+        this.enableInstallPrompt = enableInstallPrompt;
+    }
+
+    private static String rootUrlPath(ServletContext servletContext) {
+        return hasContextPath(servletContext)
                 ? servletContext.getContextPath() + "/"
                 : "/";
-        if (pwa != null) {
-            appName = pwa.name();
-            shortName = pwa.shortName().substring(0,
-                    Math.min(pwa.shortName().length(), 12));
-            description = pwa.description();
-            backgroundColor = pwa.backgroundColor();
-            themeColor = pwa.themeColor();
-            iconPath = checkPath(pwa.iconPath());
-            manifestPath = checkPath(pwa.manifestPath());
-            offlinePath = checkPath(pwa.offlinePath());
-            display = pwa.display();
-            startPath = pwa.startPath().replaceAll("^/+", "");
-            enabled = true;
-            offlineResources = Arrays.asList(pwa.offlineResources());
-            enableInstallPrompt = pwa.enableInstallPrompt();
-        } else {
-            appName = DEFAULT_NAME;
-            shortName = "Flow PWA";
-            description = "";
-            backgroundColor = DEFAULT_BACKGROUND_COLOR;
-            themeColor = DEFAULT_THEME_COLOR;
-            iconPath = DEFAULT_ICON;
-            manifestPath = DEFAULT_PATH;
-            offlinePath = DEFAULT_OFFLINE_PATH;
-            display = DEFAULT_DISPLAY;
-            startPath = "";
-            enabled = false;
-            offlineResources = Collections.emptyList();
-            enableInstallPrompt = false;
-        }
     }
 
     private static boolean hasContextPath(ServletContext servletContext) {

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

@@ -15,13 +15,15 @@
 import java.awt.image.BufferedImage;
 import java.io.ByteArrayOutputStream;
 import java.io.IOException;
+import java.io.InputStream;
 import java.io.OutputStream;
 import java.io.Serializable;
 import java.io.UncheckedIOException;
 import java.util.Arrays;
 import java.util.HashMap;
 import java.util.Map;
 
+import org.apache.commons.io.IOUtils;
 import org.jsoup.nodes.Element;
 
 /**
@@ -41,6 +43,7 @@
  * @since 1.2
  */
 public class PwaIcon implements Serializable {
+
     /**
      * Place where icon belongs to (header or manifest.webmanifest).
      */
@@ -92,6 +95,15 @@ public enum Domain {
         setRelativeName();
     }
 
+    protected PwaIcon(PwaIcon icon) {
+        this.width = icon.width;
+        this.height = icon.height;
+        this.baseName = icon.baseName;
+        this.domain = icon.domain;
+        this.shouldBeCached = icon.shouldBeCached;
+        this.attributes.putAll(icon.attributes);
+    }
+
     /**
      * Gets an {@link Element} presentation of the icon.
      *
@@ -229,6 +241,25 @@ public void setImage(BufferedImage image) {
         }
     }
 
+    void setImage(InputStream image) throws IOException {
+        if (image != null) {
+            data = IOUtils.toByteArray(image);
+            fileHash = Arrays.hashCode(data);
+            setRelativeName();
+        }
+    }
+
+    /**
+     * Gets if the icon can be written on a stream or not.
+     *
+     * @return {@literal true} if the icon can be written, otherwise
+     *         {@literal false}.
+     * @see #write(OutputStream)
+     */
+    boolean isAvailable() {
+        return data != null || registry.getBaseImage() != null;
+    }
+
     /**
      * Writes the icon image to output stream.
      *

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

@@ -24,11 +24,14 @@
 import java.nio.charset.StandardCharsets;
 import java.util.ArrayList;
 import java.util.List;
+import java.util.Optional;
 import java.util.stream.Collectors;
 
 import org.slf4j.Logger;
 import org.slf4j.LoggerFactory;
 
+import com.vaadin.flow.di.Lookup;
+import com.vaadin.flow.di.ResourceProvider;
 import com.vaadin.flow.server.startup.ApplicationRouteRegistry;
 
 import elemental.json.Json;
@@ -69,6 +72,7 @@ public class PwaRegistry implements Serializable {
     private long offlineHash;
     private List<PwaIcon> icons = new ArrayList<>();
     private final PwaConfiguration pwaConfiguration;
+    private URL baseImageUrl;
     private BufferedImage baseImage;
 
     private PwaRegistry(PWA pwa, ServletContext servletContext)
@@ -80,13 +84,28 @@ private PwaRegistry(PWA pwa, ServletContext servletContext)
 
         // set basic configuration by given PWA annotation
         // fall back to defaults if unavailable
-        pwaConfiguration = new PwaConfiguration(pwa, servletContext);
+        pwaConfiguration = pwa == null ? new PwaConfiguration()
+                : new PwaConfiguration(pwa, servletContext);
 
         // Build pwa elements only if they are enabled
         initializeResources(servletContext);
     }
 
+    // Lazy load base image to prevent using AWT api unless icon
+    // generation is required at runtime.
+    // baseImageUrl is computed during registry initialization and used on to
+    // load the image.
     BufferedImage getBaseImage() {
+        if (baseImage == null && baseImageUrl != null) {
+            try {
+                baseImage = getBaseImage(baseImageUrl);
+            } catch (IOException ex) {
+                getLogger().error("Image is not found or can't be loaded: {}",
+                        baseImageUrl);
+            } finally {
+                baseImageUrl = null;
+            }
+        }
         return baseImage;
     }
 
@@ -96,21 +115,21 @@ private void initializeResources(ServletContext servletContext)
             return;
         }
         long start = System.currentTimeMillis();
+
+        // Load base logo from servlet context if available
+        // fall back to local image if unavailable
         URL logo = getResourceUrl(servletContext,
                 pwaConfiguration.relIconPath());
+        baseImageUrl = logo != null ? logo
+                : BootstrapHandler.class.getResource("default-logo.png");
 
         URL offlinePage = getResourceUrl(servletContext,
                 pwaConfiguration.relOfflinePath());
         // Load base logo from servlet context if available
         // fall back to local image if unavailable
         baseImage = getBaseImage(logo);
 
-        if (baseImage == null) {
-            getLogger().error("Image is not found or can't be loaded: " + logo);
-        } else {
-            // initialize icons
-            icons = initializeIcons();
-        }
+        icons = initializeIcons(servletContext);
 
         // Load offline page as string, from servlet context if
         // available, fall back to default page
@@ -146,14 +165,44 @@ private URL getResourceUrl(ServletContext context, String path)
         return resourceUrl;
     }
 
-    private List<PwaIcon> initializeIcons() {
+    private List<PwaIcon> initializeIcons(ServletContext servletContext) {
+        VaadinServletContext vaadinContext = new VaadinServletContext(
+                servletContext);
+        Optional<ResourceProvider> optionalResourceProvider = Optional
+                .ofNullable(vaadinContext.getAttribute(Lookup.class))
+                .map(lookup -> lookup.lookup(ResourceProvider.class));
         for (PwaIcon icon : getIconTemplates(pwaConfiguration.getIconPath())) {
             icon.setRegistry(this);
-            icons.add(icon);
+            // Try to find a pre-generated image
+            String iconPath = Constants.VAADIN_WEBAPP_RESOURCES
+                    + Constants.VAADIN_PWA_ICONS
+                    + icon.getRelHref().substring(1);
+            optionalResourceProvider.ifPresent(provider -> tryLoadGeneratedIcon(
+                    provider.getApplicationResource(vaadinContext, iconPath),
+                    icon, iconPath));
+            if (icon.isAvailable()) {
+                icons.add(icon);
+            }
         }
         return icons;
     }
 
+    private static void tryLoadGeneratedIcon(URL iconResource, PwaIcon icon,
+            String iconPath) {
+        if (iconResource != null) {
+            try (InputStream data = iconResource.openStream()) {
+                icon.setImage(data);
+                getLogger().trace("Loading generated PWA image from {}",
+                        iconPath);
+            } catch (IOException ex) {
+                // Ignore, icon will be generated at runtime
+                getLogger().debug(
+                        "Cannot load generated PWA image from {}. Icon will be regenerated at runtime.",
+                        iconPath, ex);
+            }
+        }
+    }
+
     /**
      * Creates manifest.webmanifest json object.
      *
@@ -444,7 +493,14 @@ public PwaConfiguration getPwaConfiguration() {
         return pwaConfiguration;
     }
 
-    private static List<PwaIcon> getIconTemplates(String baseName) {
+    /**
+     * Gets all PWA icon variants for the give base icon.
+     *
+     * @param baseName
+     *            path of the base icon.
+     * @return list of PWA icons variants.
+     */
+    public static List<PwaIcon> getIconTemplates(String baseName) {
         List<PwaIcon> icons = new ArrayList<>();
         // Basic manifest icons for android support
         icons.add(