Add support for Window Controls Overlay

js/src/admin/components/PWAPage.js

@@ -167,6 +167,17 @@ export default class PWAPage extends ExtensionPage {
                   type: 'bool',
                 })}
               </fieldset>
+              <fieldset>
+                {this.buildSettingComponent({
+                  setting: 'askvortsov-pwa.windowControlsOverlay',
+                  label: app.translator.trans('askvortsov-pwa.admin.pwa.other.window_controls_overlay_label'),
+                  help: app.translator.trans('askvortsov-pwa.admin.pwa.other.window_controls_overlay_text', {
+                    compatibilitylink: <a href="https://caniuse.com/mdn-api_windowcontrolsoverlay" tabindex="-1"/>,
+                    learnlink: <a href="https://learn.microsoft.com/en-us/microsoft-edge/progressive-web-apps-chromium/how-to/window-controls-overlay" tabindex="-1"/>
+                  }),
+                  type: 'bool',
+                })}
+              </fieldset>
             </fieldset>
 
             {this.submitButton()}

resources/locale/en.yml

@@ -38,6 +38,12 @@ askvortsov-pwa:
         push_notif_preference_default_to_email_text: If true, users will have push notifications enabled by default for all notification types where email notifications are enabled by default. If false, users will have push notifications disabled by default.
         user_max_subscriptions_label: Max Push Subscriptions Per User
         user_max_subscriptions_text: How many push subscriptions should each user be able to have at a time? When a user receives a push notification, each subscription will result in an API call. Each subscription typically corresponds to a browser the user has used.
+        window_controls_overlay_label: Enable Window Controls Overlay?
+        window_controls_overlay_text: |
+          If true, users will be able to get an more immersive, native-like experience by hiding the native titlebar. Window Controls Overlay enables or not depends on user's preference and browser's compatibility. You must customize your titlebar by adding some CSS/JS after enabled, or the controls will overlay some elements of your forum's top navbar and the window almost can't drag, resulting a bad experience.
+
+          See also: <compatibilitylink>The compatibility of Window Controls Overlay</compatibilitylink> & <learnlink>About Window Controls Overlay in Microsoft Learn</learnlink>
+
       heading: Progressive Web App Configuration
       text: Configure your Flarum site to run as a progressive web app! Please note that this doesn't automatically put your site in the app store. Instead, this means that users have an 'Add to Homescreen' option for your site. We provide some status checks, however, the best way to test this is to try and install it (search on google for instructions on how to install progressive web apps). Also, please keep in mind that 'install this PWA' popups are controlled by browsers, and cannot be triggered by developers/admins/programs. I recommend including instructions for how to install a PWA in your site's documentation.
       status_check_heading: Status Check

src/PWATrait.php

@@ -84,6 +84,11 @@ protected function buildManifest(): array
             $manifest['short_name'] = $shortName;
         }
 
+        $displayOverride = $settings->get('askvortsov-pwa.windowControlsOverlay');
+        if ($displayOverride) {
+            $manifest['display_override'] = ['window-controls-overlay'];
+        }
+
         return $manifest;
     }
 }