OneSignal push notifications for AMP

OneSignal – Free Web Push Notifications
WordPress plugin

OneSignal – Free Web Push Notifications WordPress plugin can be used to add push notifications to your website.

After installing the plugin and following instructions to connect it with your OneSignal account it will add a push notifications widget to your site.

OneSignal push notifications widget

While OneSignal supports notifications on AMP pages, the WordPress plugin does not integrate it automatically. The AMP’s amp-web-push component is available to use for adding the support manually by following OneSignal’s AMP Web Push Setup documentation.

Integrating OneSignal AMP Web Push to Chap AMP pages

To add the push notifications button to AMP pages, the child theme’s functions.php can be used to add hooks to include the required content on AMP pages.

Open up .../wp-content/themes/chap-child/functions.php file and add the following code inside the namespace Chap\Child { ... } brackets:

First, the amp-web-push component script can be added by using the chap_amp_component_scripts filter:

PHP
Adding the script
add_filter('chap_amp_component_scripts', function($scripts) {
	$scripts['amp-web-push'] = 'https://cdn.ampproject.org/v0/amp-web-push-0.1.js';
	return $scripts;
});

Then, hooking into the chap_amp_footer action at priority 5 allows to output the AMP components before the footer is rendered. The $app_id variable should be changed to your OneSignal’s APP ID. The code also specifies the URLs to the required assets that come with the WordPress plugin.

PHP
Adding the components
add_action('chap_amp_footer', function() {
	$plugin_url = plugin_dir_url('onesignal-free-web-push-notifications/onesignal.php');
	$app_id = 'YOUR-APP-ID';
	$subscribe_text = __('Subscribe to updates', 'chap');
	$unsubscribe_text = __('Unsubscribe from updates', 'chap');

	echo <<<HTML
<div class="ui basic paddingless center aligned segment">
	<amp-web-push
		id="amp-web-push"
		layout="nodisplay"
		helper-iframe-url="{$plugin_url}sdk_files/amp-helper-frame.html?appId={$app_id}"
		permission-dialog-url="{$plugin_url}sdk_files/amp-permission-dialog.html?appId={$app_id}"
		service-worker-url="{$plugin_url}sdk_files/OneSignalSDKWorker.js.php?appId={$app_id}"
	>
	</amp-web-push>

	<amp-web-push-widget visibility="unsubscribed" layout="fixed" width="245" height="45">
		<button class="subscribe" on="tap:amp-web-push.subscribe">
			<amp-img
				class="subscribe-icon"
				width="24"
				height="24"
				layout="fixed"
				src="data:image/svg+xml;base64,PHN2ZyBjbGFzcz0ic3Vic2NyaWJlLWljb24iIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxwYXRoIGQ9Ik0xMS44NCAxOS44ODdIMS4yMnMtLjk0Ny0uMDk0LS45NDctLjk5NWMwLS45LjgwNi0uOTQ4LjgwNi0uOTQ4czMuMTctMS41MTcgMy4xNy0yLjYwOGMwLTEuMDktLjUyLTEuODUtLjUyLTYuMzA1czIuODUtNy44NyA2LjI2LTcuODdjMCAwIC40NzMtMS4xMzQgMS44NS0xLjEzNCAxLjMyNSAwIDEuOCAxLjEzNyAxLjggMS4xMzcgMy40MTMgMCA2LjI2IDMuNDE4IDYuMjYgNy44NyAwIDQuNDYtLjQ3NyA1LjIyLS40NzcgNi4zMSAwIDEuMDkgMy4xNzYgMi42MDcgMy4xNzYgMi42MDdzLjgxLjA0Ni44MS45NDdjMCAuODUzLS45OTYuOTk1LS45OTYuOTk1SDExLjg0ek04IDIwLjk3N2g3LjExcy0uNDkgMi45ODctMy41MyAyLjk4N1M4IDIwLjk3OCA4IDIwLjk3OHoiIGZpbGw9IiNGRkYiLz48L3N2Zz4=">
			</amp-img>
			{$subscribe_text}
		</button>
	</amp-web-push-widget>

	<amp-web-push-widget visibility="subscribed" layout="fixed" width="230" height="45">
		<button class="unsubscribe" on="tap:amp-web-push.unsubscribe">{$unsubscribe_text}</button>
	</amp-web-push-widget>
</div>
HTML;
}, 5);

And finally load the styles for the subscribe button provided in the documentation, as well as the Semantic UI segment that it’s contained in.

PHP
Adding the styles
add_action('amp_post_template_css', function() {
	$GLOBALS['csc']['amp-styles']['segment'] = true;

	echo <<<CSS
amp-web-push-widget button.subscribe {
	display: inline-flex;
	align-items: center;
	border-radius: 2px;
	border: 0;
	box-sizing: border-box;
	margin: 0;
	padding: 10px 15px;
	cursor: pointer;
	outline: none;
	font-size: 15px;
	font-weight: 400;
	background: #4A90E2;
	color: white;
	box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.5);
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

amp-web-push-widget button.subscribe .subscribe-icon {
	margin-right: 10px;
}

amp-web-push-widget button.subscribe:active {
	transform: scale(0.99);
}

amp-web-push-widget button.unsubscribe {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 45px;
	border: 0;
	margin: 0;
	cursor: pointer;
	outline: none;
	font-size: 15px;
	font-weight: 400;
	background: transparent;
	color: #B1B1B1;
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
CSS;
}, 5);

You are free to modify the styles to change the look of the button, for example, changing background: #4A90E2; to background: var(--primary-color); would make use of the primary color set in Chap Theme -> Styles settings.

Now the push notifications button is also displayed on AMP pages:

Leave a comment

Your email address will not be published. Required fields are marked *