colored icons wip

lib/pwa-load.js

@@ -0,0 +1,99 @@
+/* global scriptVars */
+
+const win = window;
+
+function addManifest( manifest ) {
+	const link = document.createElement( 'link' );
+	link.rel = 'manifest';
+	link.href = 'data:application/manifest+json,' + JSON.stringify( manifest );
+	document.head.appendChild( link );
+}
+
+function createSvgElement( html ) {
+	const doc = document.implementation.createHTMLDocument( '' );
+	doc.body.innerHTML = html;
+	const { firstElementChild: svgElement } = doc.body;
+	svgElement.setAttribute( 'viewBox', '0 0 80 80' );
+	return svgElement;
+}
+
+function createIcon( svgElement, size, backgroundColor ) {
+	return new Promise( ( resolve ) => {
+		// https://w3c.github.io/manifest/#icon-masks
+		const padding = size / 8;
+		const logoSize = padding * 6;
+		const canvas = document.createElement( 'canvas' );
+		const context = canvas.getContext( '2d' );
+
+		svgElement.setAttribute( 'width', logoSize );
+		svgElement.setAttribute( 'height', logoSize );
+		canvas.width = size;
+		canvas.height = size;
+		context.fillStyle = backgroundColor;
+		context.fillRect( 0, 0, canvas.width, canvas.height );
+
+		const blob = new win.Blob( [ svgElement.outerHTML ], {
+			type: 'image/svg+xml',
+		} );
+		const url = URL.createObjectURL( blob );
+		const image = document.createElement( 'img' );
+		image.src = url;
+		image.width = logoSize;
+		image.height = logoSize;
+		image.onload = () => {
+			context.drawImage( image, padding, padding );
+			canvas.toBlob( ( bb ) => {
+				// URL.revokeObjectURL( url );
+				const reader = new window.FileReader();
+				reader.readAsDataURL( bb );
+				reader.onloadend = function () {
+					resolve( reader.result );
+				};
+			} );
+		};
+	} );
+}
+
+if ( 'serviceWorker' in win.navigator ) {
+	win.addEventListener( 'load', function () {
+		const { serviceWorkerUrl, logo, manifest } = scriptVars;
+
+		win.navigator.serviceWorker.register( serviceWorkerUrl );
+
+		const adminBar = document.getElementById( 'wpadminbar' );
+		const { backgroundColor } = window.getComputedStyle( adminBar );
+		const svgElement = createSvgElement( logo );
+
+		createIcon( svgElement, 180, backgroundColor ).then( ( base64data ) => {
+			const iconLink = document.createElement( 'link' );
+			iconLink.rel = 'apple-touch-icon';
+			iconLink.href = base64data;
+			iconLink.sizes = '180x180';
+			document.head.insertBefore(
+				iconLink,
+				document.head.firstElementChild
+			);
+		} );
+
+		manifest.icons = [];
+
+		function addToManifest( base64data ) {
+			manifest.icons.push( {
+				src: base64data,
+				sizes: '192x192',
+				type: 'image/png',
+			} );
+		}
+
+		Promise.all( [
+			createIcon( svgElement, 192, backgroundColor ).then(
+				addToManifest
+			),
+			createIcon( svgElement, 512, backgroundColor ).then(
+				addToManifest
+			),
+		] ).then( () => {
+			addManifest( manifest );
+		} );
+	} );
+}

lib/pwa.php

@@ -8,13 +8,28 @@
 add_filter(
 	'admin_head',
 	function() {
-		$icon_sizes = array( 32, 180, 192, 270, 512 );
+		$icon_sizes = array( 180, 192, 512 );
 
-		// Ideally we have the WordPress logo as the default app logo in the sizes
-		// below.
-		$icons = array();
+		$icons = array(
+			array(
+				'src'   => 'https://s1.wp.com/i/favicons/apple-touch-icon-180x180.png',
+				'sizes' => '180x180',
+				'type'  => 'image/png',
+			),
+			// Android/Chrome.
+			array(
+				'src'   => 'https://wordpress.com/calypso/images/manifest/icon-192x192.png',
+				'sizes' => '192x192',
+				'type'  => 'image/png',
+			),
+			array(
+				'src'   => 'https://wordpress.com/calypso/images/manifest/icon-512x512.png',
+				'sizes' => '512x512',
+				'type'  => 'image/png',
+			),
+		);
 
-		if ( has_site_icon() ) {
+		if ( false ) {
 			$type = wp_check_filetype( get_site_icon_url() );
 
 			foreach ( $icon_sizes as $size ) {
@@ -26,30 +41,28 @@ function() {
 			}
 		}
 
-		$manifest = wp_json_encode(
+		$manifest = array(
+			'name'        => get_bloginfo( 'name' ),
+			// 'icons'       => $icons,
+			'display'     => 'standalone',
+			'orientation' => 'portrait',
+			'start_url'   => admin_url(),
+			// Open front-end, login page, and any external URLs in a browser modal.
+			'scope'       => admin_url(),
+		);
+
+		$script      = file_get_contents( __DIR__ . '/pwa-load.js' );
+		$script_vars = wp_json_encode(
 			array(
-				'name'        => get_bloginfo( 'name' ),
-				'icons'       => $icons,
-				'display'     => 'standalone',
-				'orientation' => 'portrait',
-				'start_url'   => admin_url(),
-				// Open front-end, login page, and any external URLs in a browser modal.
-				'scope'       => admin_url(),
+				// Must be at the admin root so the scope is correct. Move to the
+				// wp-admin folder when merging with core.
+				'serviceWorkerUrl' => admin_url( '?service-worker' ),
+				'logo'             => file_get_contents( ABSPATH . 'wp-admin/images/wordpress-logo-white.svg' ),
+				'manifest'         => $manifest,
 			)
 		);
 
-		// Must be at the admin root so the scope is correct. Move to the
-		// wp-admin folder when merging with core.
-		$service_worker_url = admin_url( '?service-worker' );
-
-		echo '<link rel="manifest" href=\'data:application/manifest+json,' . $manifest . '\'>';
-		echo '<script>
-			if( "serviceWorker" in window.navigator ) {
-				window.addEventListener( "load", function() {
-					window.navigator.serviceWorker.register( "' . $service_worker_url . '" );
-				} );
-			}
-		</script>';
+		echo "<script>( function( scriptVars ) { $script } )( $script_vars );</script>";
 	}
 );