pwa-manifest-short-name.php

<?php
/**
 * PWA Manifest Short Name plugin initialization file.
 *
 * @package   PWA_Manifest_Short_Name
 * @author    Weston Ruter, Google
 * @license   GPL-2.0-or-later
 * @copyright 2019 Google Inc.
 *
 * @wordpress-plugin
 * Plugin Name: PWA Manifest Short Name
 * Plugin URI: https://gist.github.com/westonruter/dec7d190060732e29a09751ab99cc549
 * Description: Add a UI for specifying the <code>short_name</code> that will be added to the Web App Manifest as served by the <a href="https://wordpress.org/plugins/pwa/">PWA plugin</a>. This may be merged into the PWA plugin via <a href="https://github.com/GoogleChromeLabs/pwa-wp/issues/210">pwa-wp#210</a>.
 * Version: 0.1
 * Author: Weston Ruter, Google
 * Author URI: https://weston.ruter.net/
 * License: GNU General Public License v2 (or later)
 * License URI: http://www.gnu.org/licenses/gpl-2.0.html
 * Gist Plugin URI: https://gist.github.com/westonruter/dec7d190060732e29a09751ab99cc549
 */

namespace PWA_Manifest_Short_Name;

const SETTING_ID   = 'short_name';
const OPTION_GROUP = 'general';
const MAX_LENGTH   = 12;

add_action(
	'plugins_loaded',
	function () {
		if ( ! class_exists( 'WP_Web_App_Manifest' ) ) {
			return;
		}
		add_action( 'admin_init', __NAMESPACE__ . '\admin_init' );
		add_filter( 'web_app_manifest', __NAMESPACE__ . '\filter_web_app_manifest' );
	}
);

/**
 * Filter web app manifest to add short_name.
 *
 * @param array $data Data.
 * @return array Data.
 */
function filter_web_app_manifest( $data ) {
	$short_name = get_option( SETTING_ID );
	if ( $short_name ) {
		$data['short_name'] = $short_name;
	}
	return $data;
}

/**
 * Init.
 */
function admin_init() {
	register_settings();
	add_setting_field();
}

/**
 * Register setting.
 */
function register_settings() {
	\register_setting(
		OPTION_GROUP,
		SETTING_ID,
		[
			'type'              => 'boolean',
			'sanitize_callback' => function ( $value ) {
				$value = sanitize_text_field( $value );
				return substr( $value, 0, MAX_LENGTH );
			},
		]
	);
}

/**
 * Add setting field.
 */
function add_setting_field() {
	\add_settings_field(
		SETTING_ID,
		__( 'Short Name', 'pwa' ),
		__NAMESPACE__ . '\render_setting',
		OPTION_GROUP
	);
}

/**
 * Renders the setting.
 */
function render_setting() {
	$short_name = get_option( SETTING_ID );

	?>
	<table id="short_name_table" hidden>
		<tr>
			<th scope="row">
				<label for="<?php echo esc_attr( SETTING_ID ); ?>">
					<?php esc_html_e( 'Short Name', 'pwa' ); ?>
				</label>
			</th>
			<td>
				<input type="text" id="<?php echo esc_attr( SETTING_ID ); ?>" name="<?php echo esc_attr( SETTING_ID ); ?>" value="<?php echo esc_attr( $short_name ); ?>" class="regular-text" maxlength="<?php echo esc_attr( MAX_LENGTH ); ?>">
				<p class="description">
					<?php
					echo wp_kses_post(
						sprintf(
							/* translators: %1$s is `short_name`, %2$d is the max length as a number */
							__( 'The %1$s is a short version of your website&#8217;s name. It is displayed when there is not enough space for the full name, for example with the site icon on a phone&#8217;s homescreen. It should be a maximum of %2$d characters long.', 'pwa' ),
							'<code>short_name</code>',
							MAX_LENGTH
						)
					);
					?>
				</p>
			</td>
		</tr>
	</table>

	<script>
		( ( table ) => {
			const blogNameField = document.getElementById( 'blogname' );
			if ( ! blogNameField ) {
				return;
			}
			const blogNameRow = blogNameField.closest( 'tr' );
			blogNameRow.parentNode.insertBefore( table.querySelector( 'tr' ), blogNameRow.nextSibling );
			table.parentNode.removeChild( table );
		} )( document.getElementById( 'short_name_table' ) );
	</script>
	<?php
}

Installation instructions: https://gist.github.com/westonruter/6110fbc4bef0c4b8c021a112012f7e9c