Automatic Icon/PWA metatag generation and Manifest controller

protected/humhub/docs/guide/theme/migrate-1.4.md

@@ -2,3 +2,27 @@
 
 - Added jquery.atwho.modified.css to `mentioning.less`
 - Minor changes in `notification/views/index.php`
+
+
+## PWA
+
+Remove all icon and web app related head tags such as:
+
+- <link rel="apple-touch-icon" sizes="57x57" href="<?= $this->theme->getBaseUrl(); ?>/ico/apple-icon-57x57.png">
+- <link rel="icon" type="image/png" sizes="192x192" href="<?= $this->theme->getBaseUrl(); ?>/ico/android-icon-192x192.png">
+- <link rel="manifest" href="<?= $this->theme->getBaseUrl(); ?>/ico/manifest.json">
+
+
+Remove Metatags:
+
+- apple-mobile-web-app-title
+- apple-mobile-web-app-capable
+- apple-mobile-web-app-status-bar-style
+- mobile-web-app-capable
+- msapplication-TileColor
+- msapplication-TileImage
+- msapplication-TileImage
+- theme-color
+- application-name
+
+

protected/humhub/modules/ui/Events.php

@@ -20,4 +20,5 @@ class Events
         $application = $event->sender;
         $application->controllerMap['theme'] = commands\ThemeController::class;
     }
+
 }

protected/humhub/modules/ui/Module.php

@@ -23,6 +23,10 @@ class Module extends \humhub\components\Module
      */
     public $isCoreModule = true;
 
+
+    public $themeColor = '';
+
+
     /**
      * @inheritdoc
      */

protected/humhub/modules/ui/controllers/ManifestController.php

@@ -0,0 +1,59 @@
+<?php
+
+
+namespace humhub\modules\ui\controllers;
+
+
+use humhub\components\Controller;
+use humhub\modules\ui\Module;
+use humhub\modules\ui\widgets\SiteIcon;
+use Yii;
+use yii\helpers\Url;
+
+/**
+ * Class ManifestController is responsible to generate the Manifest JSON output.
+ *
+ * @since 1.4
+ *
+ * @property Module $module
+ * @package humhub\modules\ui\controllers
+ */
+class ManifestController extends Controller
+{
+
+    /**
+     * @var array the manifest
+     */
+    public $manifest = [];
+
+
+    public function actionIndex()
+    {
+        $this->handleIcons();
+        $this->handlePwa();
+
+        return $this->asJson($this->manifest);
+    }
+
+    private function handlePwa()
+    {
+        $this->manifest['display'] = 'standalone';
+        $this->manifest['start_url'] = Url::home();
+        $this->manifest['name'] = Yii::$app->name;
+        $this->manifest['background_color'] = $this->module->themeColor;
+        $this->manifest['theme_color'] = $this->module->themeColor;
+    }
+
+    private function handleIcons()
+    {
+        $this->manifest['icons'] = [];
+
+        foreach ([48, 72, 96, 192, 512] as $size) {
+            $this->manifest['icons'][] = [
+                'src' => SiteIcon::getUrl($size),
+                'type' => 'image/png',
+                'sizes' => $size . 'x' . $size
+            ];
+        }
+    }
+}

protected/humhub/modules/ui/view/components/View.php

@@ -9,6 +9,7 @@
 namespace humhub\modules\ui\view\components;
 
 use humhub\libs\Html;
+use humhub\modules\ui\widgets\SiteIcon;
 use humhub\widgets\CoreJsConfig;
 use humhub\widgets\LayoutAddons;
 use yii\helpers\ArrayHelper;
@@ -171,7 +172,12 @@ class View extends \yii\web\View
      */
     protected function renderHeadHtml()
     {
-        return (!Yii::$app->request->isAjax) ? parent::registerCsrfMetaTags() . parent::renderHeadHtml() : parent::renderHeadHtml();
+        if (!Yii::$app->request->isAjax) {
+            SiteIcon::registerMetaTags($this);
+            parent::registerCsrfMetaTags();
+        }
+
+        return parent::renderHeadHtml();
     }
 
     public function setStatusMessage($type, $message)
@@ -257,8 +263,8 @@ class View extends \yii\web\View
     /**
      * Writes the currently registered jsConfig entries and flushes the the config array.
      *
-     * @since v1.2
      * @param string $key see View::registerJs
+     * @since v1.2
      */
     protected function flushJsConfig($key = null)
     {

protected/humhub/modules/ui/widgets/MobileAppHeader.php

@@ -0,0 +1,47 @@
+<?php
+
+/**
+ * @link https://www.humhub.org/
+ * @copyright Copyright (c) 2019 HumHub GmbH & Co. KG
+ * @license https://www.humhub.com/licences
+ */
+
+namespace humhub\modules\ui\widgets;
+
+use Yii;
+use yii\helpers\Url;
+use humhub\components\Widget;
+use humhub\modules\ui\Module;
+use humhub\modules\ui\view\components\View;
+
+/**
+ * Class MobileAppHeader
+ *
+ * @package humhub\modules\ui\widgets
+ */
+class MobileAppHeader extends Widget
+{
+
+    /**
+     * Registers mobile app related MetaTags
+     *
+     * @param View $view
+     */
+    public static function registerMetatags(View $view)
+    {
+        /** @var Module $module */
+        $module = Yii::$app->getModule('ui');;
+
+        $view->registerMetaTag(['name' => 'theme-color', 'content' => $module->themeColor]);
+        $view->registerMetaTag(['name' => 'application-name', 'content' => Yii::$app->name]);
+
+        // Apple/IOS headers
+        // https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariWebContent/ConfiguringWebApplications/ConfiguringWebApplications.html
+        $view->registerMetaTag(['name' => 'apple-mobile-web-app-title', 'content' => Yii::$app->name]);
+        $view->registerMetaTag(['name' => 'apple-mobile-web-app-capable', 'content' => 'yes']);
+        $view->registerMetaTag(['name' => 'apple-mobile-web-app-status-bar-style', 'content' => $module->themeColor]);
+
+        $view->registerLinkTag(['rel' => 'manifest', 'href' => Url::to(['/ui/manifest'])]);
+    }
+
+}

protected/humhub/modules/ui/widgets/SiteIcon.php

@@ -9,6 +9,7 @@
 namespace humhub\modules\ui\widgets;
 
 use humhub\modules\file\libs\FileHelper;
+use humhub\modules\ui\view\components\View;
 use Imagine\Image\Box;
 use Yii;
 use humhub\components\Widget;
@@ -101,4 +102,23 @@ class SiteIcon extends Widget
         $fileName = ($size === null) ? 'icon.png' : $size . 'x' . $size . '.png';
         return $fileName;
     }
+
+
+    /**
+     * @param View $view
+     */
+    public static function registerMetaTags(View $view)
+    {
+        // Add Apple touch icons
+        // https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariWebContent/ConfiguringWebApplications/ConfiguringWebApplications.html
+        $view->registerLinkTag(['rel' => 'apple-touch-icon', 'href' => static::getUrl()]);
+        $view->registerLinkTag(['rel' => 'apple-touch-icon', 'href' => static::getUrl(152), 'sizes' => '152x152']);
+        $view->registerLinkTag(['rel' => 'apple-touch-icon', 'href' => static::getUrl(180), 'sizes' => '180x180']);
+        $view->registerLinkTag(['rel' => 'apple-touch-icon', 'href' => static::getUrl(167), 'sizes' => '167x167']);
+
+        // Chrome, Firefox & Co.
+        $view->registerLinkTag(['rel' => 'icon', 'href' => static::getUrl(192), 'sizes' => '192x192']);
+        $view->registerLinkTag(['rel' => 'icon', 'href' => static::getUrl(96), 'sizes' => '96x96']);
+        $view->registerLinkTag(['rel' => 'icon', 'href' => static::getUrl(32), 'sizes' => '32x32']);
+    }
 }

themes/HumHub/views/layouts/head.php

@@ -1,33 +0,0 @@
-<!-- start: Web App Data-->
-<link rel="manifest" href="<?= $this->theme->getBaseUrl(); ?>/ico/manifest.json">
-<meta name="application-name" content="<?= \yii\helpers\Html::encode(Yii::$app->name) ?>">
-<!-- end: Web App Data-->
-
-<!-- start: Favicon and Touch Icons -->
-<link rel="apple-touch-icon" sizes="57x57" href="<?= $this->theme->getBaseUrl(); ?>/ico/apple-icon-57x57.png">
-<link rel="apple-touch-icon" sizes="60x60" href="<?= $this->theme->getBaseUrl(); ?>/ico/apple-icon-60x60.png">
-<link rel="apple-touch-icon" sizes="72x72" href="<?= $this->theme->getBaseUrl(); ?>/ico/apple-icon-72x72.png">
-<link rel="apple-touch-icon" sizes="76x76" href="<?= $this->theme->getBaseUrl(); ?>/ico/apple-icon-76x76.png">
-<link rel="apple-touch-icon" sizes="114x114" href="<?= $this->theme->getBaseUrl(); ?>/ico/apple-icon-114x114.png">
-<link rel="apple-touch-icon" sizes="120x120" href="<?= $this->theme->getBaseUrl(); ?>/ico/apple-icon-120x120.png">
-<link rel="apple-touch-icon" sizes="144x144" href="<?= $this->theme->getBaseUrl(); ?>/ico/apple-icon-144x144.png">
-<link rel="apple-touch-icon" sizes="152x152" href="<?= $this->theme->getBaseUrl(); ?>/ico/apple-icon-152x152.png">
-<link rel="apple-touch-icon" sizes="180x180" href="<?= $this->theme->getBaseUrl(); ?>/ico/apple-icon-180x180.png">
-<link rel="icon" type="image/png" sizes="192x192" href="<?= $this->theme->getBaseUrl(); ?>/ico/android-icon-192x192.png">
-<link rel="icon" type="image/png" sizes="32x32" href="<?= $this->theme->getBaseUrl(); ?>/ico/favicon-32x32.png">
-<link rel="icon" type="image/png" sizes="96x96" href="<?= $this->theme->getBaseUrl(); ?>/ico/favicon-96x96.png">
-<link rel="icon" type="image/png" sizes="16x16" href="<?= $this->theme->getBaseUrl(); ?>/ico/favicon-16x16.png">
-<meta name="msapplication-TileColor" content="#ffffff">
-<meta name="msapplication-TileImage" content="<?= $this->theme->getBaseUrl(); ?>/ico/ms-icon-144x144.png">
-<meta name="theme-color" content="#ffffff">
-<!-- end: Favicon and Touch Icons -->
-
-<!-- start: Apple Fullscreen and Webapp Title -->
-<meta name="apple-mobile-web-app-title" content="<?= \yii\helpers\Html::encode(Yii::$app->name) ?>" />
-<meta name="apple-mobile-web-app-capable" content="yes" />
-<meta name="apple-mobile-web-app-status-bar-style" content="black" />
-<!-- end: Apple Fullscreen and Webapp Title -->
-
-<!-- start: Android Fullscreen -->
-<meta name="mobile-web-app-capable" content="yes">
-<!-- end: Android Fullscreen -->