Merge pull request #1977 from njam/android-manifest

Breaking: Add splash screen for Chrome

layout/default/Layout/Abstract/default.tpl

@@ -10,39 +10,27 @@
     <meta name="apple-mobile-web-app-capable" content="yes">
     <meta name="apple-mobile-web-app-title" content="{$render->getSite()->getName()|escape}">
     <meta name="apple-mobile-web-app-status-bar-style" content="black">
-    <meta name=”msapplication-tap-highlight” content=”no” />
+    <meta name="msapplication-tap-highlight" content="no">
     <meta name="msapplication-TileColor" content="{block name='tileColor'}{lessVariable name='colorBrand'}{/block}">
-    <meta name="msapplication-TileImage" content="{resourceUrl path='img/meta/mstile-144x144.png' type='layout'}">
+    <meta name="msapplication-TileImage" content="{resourceUrl path='img/meta/square-144-transparent.png' type='layout'}">
     <meta name="msapplication-config" content="{resourceUrl path='browserconfig.xml' type='layout'}">
     <meta name="theme-color" content="{block name='themeColor'}{lessVariable name='colorBrand'}{/block}">
 
-    <link rel="apple-touch-icon" sizes="57x57" href="{resourceUrl path='img/meta/apple-touch-icon-57x57.png' type='layout'}">
-    <link rel="apple-touch-icon" sizes="60x60" href="{resourceUrl path='img/meta/apple-touch-icon-60x60.png' type='layout'}">
-    <link rel="apple-touch-icon" sizes="72x72" href="{resourceUrl path='img/meta/apple-touch-icon-72x72.png' type='layout'}">
-    <link rel="apple-touch-icon" sizes="76x76" href="{resourceUrl path='img/meta/apple-touch-icon-76x76.png' type='layout'}">
-    <link rel="apple-touch-icon" sizes="114x114" href="{resourceUrl path='img/meta/apple-touch-icon-114x114.png' type='layout'}">
-    <link rel="apple-touch-icon" sizes="120x120" href="{resourceUrl path='img/meta/apple-touch-icon-120x120.png' type='layout'}">
-    <link rel="apple-touch-icon" sizes="144x144" href="{resourceUrl path='img/meta/apple-touch-icon-144x144.png' type='layout'}">
-    <link rel="apple-touch-icon" sizes="152x152" href="{resourceUrl path='img/meta/apple-touch-icon-152x152.png' type='layout'}">
-    <link rel="apple-touch-icon" sizes="180x180" href="{resourceUrl path='img/meta/apple-touch-icon-180x180.png' type='layout'}">
+    {**
+     * See https://developer.apple.com/library/prerelease/ios/documentation/UserExperience/Conceptual/MobileHIG/IconMatrix.html
+     *}
+    <link rel="apple-touch-icon" sizes="76x76" href="{resourceUrl path='img/meta/square-76.png' type='layout'}">
+    <link rel="apple-touch-icon" sizes="120x120" href="{resourceUrl path='img/meta/square-120.png' type='layout'}">
+    <link rel="apple-touch-icon" sizes="152x152" href="{resourceUrl path='img/meta/square-152.png' type='layout'}">
+    <link rel="apple-touch-icon" sizes="167x167" href="{resourceUrl path='img/meta/square-167.png' type='layout'}">
+    <link rel="apple-touch-icon" sizes="180x180" href="{resourceUrl path='img/meta/square-180.png' type='layout'}">
 
-    <link rel="apple-touch-startup-image" href="{resourceUrl path='img/meta/apple-touch-startup-image-1242x2208.png' type='layout'}" media="(device-width: 414px) and (device-height: 736px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 3)">
-    <link rel="apple-touch-startup-image" href="{resourceUrl path='img/meta/apple-touch-startup-image-750x1334.png' type='layout'}" media="(device-width: 375px) and (device-height: 667px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2)">
-    <link rel="apple-touch-startup-image" href="{resourceUrl path='img/meta/apple-touch-startup-image-1536x2008.png' type='layout'}" media="(device-width: 768px) and (device-height: 1024px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2)">
-    <link rel="apple-touch-startup-image" href="{resourceUrl path='img/meta/apple-touch-startup-image-1496x2048.png' type='layout'}" media="(device-width: 768px) and (device-height: 1024px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 2)">
-    <link rel="apple-touch-startup-image" href="{resourceUrl path='img/meta/apple-touch-startup-image-768x1004.png' type='layout'}" media="(device-width: 768px) and (device-height: 1024px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 1)">
-    <link rel="apple-touch-startup-image" href="{resourceUrl path='img/meta/apple-touch-startup-image-748x1024.png' type='layout'}" media="(device-width: 768px) and (device-height: 1024px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 1)">
-    <link rel="apple-touch-startup-image" href="{resourceUrl path='img/meta/apple-touch-startup-image-640x1096.png' type='layout'}" media="(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2)">
-    <link rel="apple-touch-startup-image" href="{resourceUrl path='img/meta/apple-touch-startup-image-640x920.png' type='layout'}" media="(device-width: 320px) and (device-height: 480px) and (-webkit-device-pixel-ratio: 2)">
-    <link rel="apple-touch-startup-image" href="{resourceUrl path='img/meta/apple-touch-startup-image-320x460.png' type='layout'}" media="(device-width: 320px) and (device-height: 480px) and (-webkit-device-pixel-ratio: 1)">
-
-    <link rel="icon" type="image/png" href="{resourceUrl path='img/meta/favicon-32x32.png' type='layout'}" sizes="32x32">
-    <link rel="icon" type="image/png" href="{resourceUrl path='img/meta/android-chrome-192x192.png' type='layout'}" sizes="192x192">
-    <link rel="icon" type="image/png" href="{resourceUrl path='img/meta/favicon-96x96.png' type='layout'}" sizes="96x96">
-    <link rel="icon" type="image/png" href="{resourceUrl path='img/meta/favicon-16x16.png' type='layout'}" sizes="16x16">
+    <link rel="icon" type="image/png" href="{resourceUrl path='img/meta/square-32.png' type='layout'}" sizes="32x32">
+    <link rel="icon" type="image/png" href="{resourceUrl path='img/meta/square-96.png' type='layout'}" sizes="96x96">
+    <link rel="icon" type="image/png" href="{resourceUrl path='img/meta/square-16.png' type='layout'}" sizes="16x16">
 
     <link rel="manifest" href="{resourceUrl path='manifest.json' type='layout' sameOrigin=true}">
-    <link rel="shortcut icon" href="{resourceUrl path='img/meta/favicon.ico' type='layout'}">
+    <link rel="mask-icon" href="{resourceUrl path='img/favicon.svg' type='layout'}" color="{lessVariable name='colorBrand'}">
 
     <link rel="alternate" href="{$renderDefault->getUrlPage($page, $page->getParams()->getParamsEncoded())|escape}" hreflang="x-default">
     {foreach $languageList as $language}

layout/default/resource/browserconfig.xml.smarty

@@ -2,10 +2,10 @@
 <browserconfig>
   <msapplication>
     <tile>
-      <square70x70logo src="{resourceUrl path='img/meta/mstile-70x70.png' type='layout'}"/>
-      <square150x150logo src="{resourceUrl path='img/meta/mstile-150x150.png' type='layout'}"/>
-      <square310x310logo src="{resourceUrl path='img/meta/mstile-310x310.png' type='layout'}"/>
-      <wide310x150logo src="{resourceUrl path='img/meta/mstile-310x150.png' type='layout'}"/>
+      <square70x70logo src="{resourceUrl path='img/meta/tile-small-128x128-transparent.png' type='layout'}"/>
+      <square150x150logo src="{resourceUrl path='img/meta/tile-medium-270x270-transparent.png' type='layout'}"/>
+      <square310x310logo src="{resourceUrl path='img/meta/tile-large-558x558-transparent.png' type='layout'}"/>
+      <wide310x150logo src="{resourceUrl path='img/meta/tile-wide-558x270-transparent.png' type='layout'}"/>
       <TileColor>{block name='tileColor'}{lessVariable name='colorBrand'}{/block}</TileColor>
     </tile>
   </msapplication>

layout/default/resource/manifest.json.smarty

@@ -2,35 +2,32 @@
 	"name": "{$render->getSite()->getName()}",
 	"display": "standalone",
 	"start_url": "/",
+	"background_color": "{lessVariable name='colorBrand'}",
+	"theme_color": "{lessVariable name='colorBrand'}",
 	"icons": [
 		{
-			"src": "{resourceUrl path='img/meta/android-chrome-36x36.png' type='layout'}",
-			"sizes": "36x36",
-			"type": "image/png"
-		},
-		{
-			"src": "{resourceUrl path='img/meta/android-chrome-48x48.png' type='layout'}",
-			"sizes": "48x48",
+			"src": "{resourceUrl path='img/meta/square-144.png' type='layout'}",
+			"sizes": "144x144",
 			"type": "image/png"
 		},
 		{
-			"src": "{resourceUrl path='img/meta/android-chrome-72x72.png' type='layout'}",
-			"sizes": "72x72",
+			"src": "{resourceUrl path='img/meta/square-192.png' type='layout'}",
+			"sizes": "192x192",
 			"type": "image/png"
 		},
 		{
-			"src": "{resourceUrl path='img/meta/android-chrome-96x96.png' type='layout'}",
-			"sizes": "96x96",
+			"src": "{resourceUrl path='img/meta/square-256.png' type='layout'}",
+			"sizes": "256x256",
 			"type": "image/png"
 		},
 		{
-			"src": "{resourceUrl path='img/meta/android-chrome-144x144.png' type='layout'}",
-			"sizes": "144x144",
+			"src": "{resourceUrl path='img/meta/square-384.png' type='layout'}",
+			"sizes": "384x384",
 			"type": "image/png"
 		},
 		{
-			"src": "{resourceUrl path='img/meta/android-chrome-192x192.png' type='layout'}",
-			"sizes": "192x192",
+			"src": "{resourceUrl path='img/meta/square-512.png' type='layout'}",
+			"sizes": "512x512",
 			"type": "image/png"
 		}
 	]

library/CM/Frontend/Cli.php

@@ -113,24 +113,16 @@ private function _getFaviconConfigList() {
             'square-96.png'                       => ['width' => 96, 'height' => 96],
             'square-120.png'                      => ['width' => 120, 'height' => 120],
             'square-144.png'                      => ['width' => 144, 'height' => 144],
+            'square-144-transparent.png'          => ['width' => 144, 'height' => 144, 'transparent' => true],
             'square-152.png'                      => ['width' => 152, 'height' => 152],
             'square-167.png'                      => ['width' => 167, 'height' => 167],
             'square-180.png'                      => ['width' => 180, 'height' => 180],
 
             // Android Chrome
-            'square-144-transparent.png'          => ['width' => 144, 'height' => 144, 'transparent' => true],
-            'square-192-transparent.png'          => ['width' => 192, 'height' => 192, 'transparent' => true],
-            'square-256-transparent.png'          => ['width' => 256, 'height' => 256, 'transparent' => true],
-            'square-384-transparent.png'          => ['width' => 384, 'height' => 384, 'transparent' => true],
-            'square-512-transparent.png'          => ['width' => 512, 'height' => 512, 'transparent' => true],
-
-            // Splashscreens
-            'splashscreen-1242x2208.png'          => ['width' => 1242, 'height' => 2208, 'iconSize' => 0.2],
-            'splashscreen-750x1334.png'           => ['width' => 750, 'height' => 1334, 'iconSize' => 0.2],
-            'splashscreen-1536x2008.png'          => ['width' => 1536, 'height' => 2008, 'iconSize' => 0.2],
-            'splashscreen-748x1024.png'           => ['width' => 748, 'height' => 1024, 'iconSize' => 0.2],
-            'splashscreen-640x1096.png'           => ['width' => 640, 'height' => 1096, 'iconSize' => 0.3],
-            'splashscreen-640x920.png'            => ['width' => 640, 'height' => 920, 'iconSize' => 0.3],
+            'square-192.png'                      => ['width' => 192, 'height' => 192],
+            'square-256.png'                      => ['width' => 256, 'height' => 256],
+            'square-384.png'                      => ['width' => 384, 'height' => 384],
+            'square-512.png'                      => ['width' => 512, 'height' => 512],
 
             // MS Tiles
             'tile-small-128x128-transparent.png'  => ['width' => 128, 'height' => 128, 'transparent' => true, 'iconSize' => 0.5],

tests/library/CM/Http/Response/Resource/LayoutTest.php

@@ -27,7 +27,7 @@ public function testRendering() {
         /** @var CM_Http_Response_Resource_Layout $response */
         $response = $this->getResponseResourceLayout($filePath);
         $this->assertContains('Content-Type: application/xml', $response->getHeaders());
-        $this->assertTrue((boolean) preg_match('!src="http://cdn\.default\.dev/layout/.+?/img/meta/mstile-70x70\.png"!', $response->getContent()));
+        $this->assertTrue((boolean) preg_match('!src="http://cdn\.default\.dev/layout/.+?/img/meta/tile-small-128x128-transparent\.png"!', $response->getContent()));
         $response->getRender()->getLayoutFile('resource/' . $filePath);
     }