Add non-maskable PWA icons

It seems Chromium cannot use maskable icons.  It complains that the
"purpose" must contain "any", however maskable icons are not suitable
for the "any" purpose.

So, add pre-masked icons to be used for the "any" purpose.

Author: code-asher

ci/dev/gen_icons.sh

@@ -24,10 +24,20 @@ main() {
   # Generate PWA icons.  There should be enough padding to support masking.
   convert -quiet -border 60x60 -bordercolor white -background white \
           -resize 192x192 -density 192x192 \
-          favicon.svg pwa-icon-192.png
+          favicon.svg pwa-icon-maskable-192.png
   convert -quiet -border 160x160 -bordercolor white -background white \
           -resize 512x512 -density 512x512 \
-          favicon.svg pwa-icon-512.png
+          favicon.svg pwa-icon-maskable-512.png
+
+  # Generate non-maskable PWA icons.
+  magick pwa-icon-maskable-192.png \
+         \( +clone -threshold 101% -fill white -draw "roundRectangle 0,0 %[fx:int(w)],%[fx:int(h)] 50,50" \) \
+         -channel-fx "| gray=>alpha" \
+         pwa-icon-192.png
+  magick pwa-icon-maskable-512.png \
+         \( +clone -threshold 101% -fill white -draw "roundRectangle 0,0 %[fx:int(w)],%[fx:int(h)] 100,100" \) \
+         -channel-fx "| gray=>alpha" \
+         pwa-icon-512.png
 
   # The following adds dark mode support for the favicon as
   # favicon-dark-support.svg There is no similar capability for pwas or .ico so

src/browser/media/pwa-icon-192.png

@@ -186,12 +186,22 @@ router.get("/manifest.json", async (req, res) => {
           display: "fullscreen",
           display_override: ["window-controls-overlay"],
           description: "Run Code on a remote server.",
-          icons: [192, 512].map((size) => ({
-            src: `{{BASE}}/_static/src/browser/media/pwa-icon-${size}.png`,
-            type: "image/png",
-            sizes: `${size}x${size}`,
-            purpose: "maskable",
-          })),
+          icons: [192, 512]
+            .map((size) => [
+              {
+                src: `{{BASE}}/_static/src/browser/media/pwa-icon-${size}.png`,
+                type: "image/png",
+                sizes: `${size}x${size}`,
+                purpose: "any",
+              },
+              {
+                src: `{{BASE}}/_static/src/browser/media/pwa-icon-maskable-${size}.png`,
+                type: "image/png",
+                sizes: `${size}x${size}`,
+                purpose: "maskable",
+              },
+            ])
+            .flat(),
         },
         null,
         2,