Adding shortcuts feature in PWA

Please share the actual code being passed to add_filter() here. It’s difficult to debug a screenshot.

add_filter( ‘web_app_manifest’, function ( $manifest ) {
$manifest[‘shortcuts’] = array(
array(
‘name’ => ‘Sunglasses’,
‘short_name’ => ‘Sunglasses’,
‘Description’ => ‘Sunglasses’,
‘url’ => ‘https://www.demosite.com/sunglasses/’,
‘icons’ => [‘src’ =>’https://www.demosite.com/wp-content/uploads/2022/08/Sunglasses-Gradient-Round-96.png’, ‘size’ => ’96×96′],

),

array(
‘name’ => ‘Eyeglasses’,
‘short_name’ => ‘Eyeglasses’,
‘Description’ => ‘Eyeglasses’,
‘url’ => ‘https://www.demosite.com/eyeglasses/’,
‘icons’ => [‘src’ =>’https://www.demosite.com/wp-content/uploads/2022/08/Eyeglasses-Gradient-Round-96.png’, ‘size’ => ’96×96′],
),

array(
‘name’ => ‘Contact Lenses’,
‘short_name’ => ‘Contacts’,
‘Description’ => ‘Contact Lenses’,
‘url’ => ‘https://www.demosite.com/contact-lenses/’,
‘icons’ => [‘src’ =>’https://www.demosite.com/wp-content/uploads/2022/08/Contact-Lens-Gradient-Round-96.png’, ‘size’ => ’96×96′],
),
);
return $manifest;
} );`

• This reply was modified 2 years, 6 months ago by eyewayonline.

Maybe your PHP isn’t at a new enough version to use the short array syntax. This doesn’t have any syntax errors which should work back to PHP 5.2:

<?php
add_filter('web_app_manifest', function ($manifest) {
	$manifest['shortcuts'] = array(
		array(
			'name' => 'Sunglasses',
			'short_name' => 'Sunglasses',
			'Description' => 'Sunglasses',
			'url' => 'https://www.demosite.com/sunglasses/',
			'icons' => array(
				'src' => 'https://www.demosite.com/wp-content/uploads/2022/08/Sunglasses-Gradient-Round-96.png',
				'size' => '96×96'
			),
		),

		array(
			'name' => 'Eyeglasses',
			'short_name' => 'Eyeglasses',
			'Description' => 'Eyeglasses',
			'url' => 'https://www.demosite.com/eyeglasses/',
			'icons' => array(
				'src' => 'https://www.demosite.com/wp-content/uploads/2022/08/Eyeglasses-Gradient-Round-96.png',
				'size' => '96×96'
			),
		),

		array(
			'name' => 'Contact Lenses',
			'short_name' => 'Contacts',
			'Description' => 'Contact Lenses',
			'url' => 'https://www.demosite.com/contact-lenses/',
			'icons' => array(
				'src' => 'https://www.demosite.com/wp-content/uploads/2022/08/Contact-Lens-Gradient-Round-96.png',
				'size' => '96×96'
			),
		),
	);
	return $manifest;
});

Hey @westonruter
I am on PHP 7.4, and the icons are still not visible with shortcuts after using above mentioned code.
kindly assist further.

Why did you suspect it was a syntax error?

In looking at the App Manifest in Chrome DevTools, I see a message: property 'icons' ignored, type array expected. I think the problem is you’re passing an associative array to the icons and not an indexed array of associative arrays. You’re missing a nesting level of arrays. So this should do it:

add_filter('web_app_manifest', function ($manifest) {
	$manifest['shortcuts'] = array(
		array(
			'name' => 'Sunglasses',
			'short_name' => 'Sunglasses',
			'Description' => 'Sunglasses',
			'url' => 'https://www.demosite.com/sunglasses/',
			'icons' => array(
				array( 
					'src' => 'https://www.demosite.com/wp-content/uploads/2022/08/Sunglasses-Gradient-Round-96.png',
					'size' => '96×96',
				),
			),
		),

		array(
			'name' => 'Eyeglasses',
			'short_name' => 'Eyeglasses',
			'Description' => 'Eyeglasses',
			'url' => 'https://www.demosite.com/eyeglasses/',
			'icons' => array(
				array(
					'src' => 'https://www.demosite.com/wp-content/uploads/2022/08/Eyeglasses-Gradient-Round-96.png',
					'size' => '96×96',
				),
			),
		),

		array(
			'name' => 'Contact Lenses',
			'short_name' => 'Contacts',
			'Description' => 'Contact Lenses',
			'url' => 'https://www.demosite.com/contact-lenses/',
			'icons' => array(
				array(
					'src' => 'https://www.demosite.com/wp-content/uploads/2022/08/Contact-Lens-Gradient-Round-96.png',
					'size' => '96×96',
				),
			),
		),
	);
	return $manifest;
});

hello @westonruter
I have done as you stated and used the same way.
But the issue still persist, icons are not visible with the corresponding shortcuts.
regards.

Please debug your App Manifest in DevTools. It appears it is not valid:

For one thing, it looks like × needs to be replaced with x in the PHP code. It appears to have been affected by WordPress’s texturization filter in the code you pasted.

Hey @westonruter
Issue resolved, Thanks