FEATURE: Add opt-in screenshots to the web app manifest (#12288)

This will be used by Chrome on Android on the install prompt,
as show in https://twitter.com/alexey_rodionov/status/1349612958754762753

Follows the spec at https://www.w3.org/TR/manifest-app-info/

app/controllers/metadata_controller.rb

@@ -124,6 +124,21 @@ class MetadataController < ApplicationController
       manifest[:icons] << icon_entry
     end
 
+    SiteSetting.manifest_screenshots.split('|').each do |image|
+      next unless Discourse.store.has_been_uploaded?(image)
+
+      upload = Upload.find_by(sha1: Upload.extract_sha1(image))
+      next if upload.nil?
+
+      manifest[:screenshots] = [] if manifest.dig(:screenshots).nil?
+
+      manifest[:screenshots] << {
+        src: UrlHelper.absolute(image),
+        sizes: "#{upload.width}x#{upload.height}",
+        type: "image/#{upload.extension}"
+      }
+    end
+
     if current_user && current_user.trust_level >= 1 && SiteSetting.native_app_install_banner_android
       manifest = manifest.merge(
         prefer_related_applications: true,

config/locales/server.en.yml

@@ -1525,6 +1525,7 @@ en:
     mobile_logo_dark: "Dark scheme alternative for the 'mobile logo' site setting."
     large_icon: "Image used as the base for other metadata icons. Should ideally be larger than 512 x 512. If left blank, logo_small will be used."
     manifest_icon: "Image used as logo/splash image on Android. Will be automatically resized to 512 × 512. If left blank, large_icon will be used."
+    manifest_screenshots: "Screenshots that showcase your instance features and functionality on its install prompt page. All images should be local uploads and of the same dimensions."
     favicon: "A favicon for your site, see <a href='https://en.wikipedia.org/wiki/Favicon' target='_blank'>https://en.wikipedia.org/wiki/Favicon</a>. To work correctly over a CDN it must be a png. Will be resized to 32x32. If left blank, large_icon will be used."
     apple_touch_icon: "Icon used for Apple touch devices. Will be automatically resized to 180x180. If left blank, large_icon will be used."
     opengraph_image: "Default opengraph image, used when the page has no other suitable image. If left blank, large_icon will be used"

config/site_settings.yml

@@ -94,6 +94,10 @@ branding:
   manifest_icon:
     default: ""
     type: upload
+  manifest_screenshots:
+    type: list
+    list_type: simple
+    default: ""
   favicon:
     default: ""
     client: true