Integrating push notifications

Hello and thank you for this project. I’m an amateur with JavaScript and this project has helped me learn.

I have followed your instructions on GitHub to register the service worker, set the catch, and add the icons. All is working well. The site passes the devtools “PWA Optimized” and “PWA installable” audits. The page also prompts the user to install the PWA. The devtools application tab shows both the admin and regular service workers are registering with the browser. The catch saves the page and makes it available offline.

The code I added to the php functions file is as follows…

add_filter( 'web_app_manifest', function( $manifest ) {
    $manifest['short_name'] = 'AZBCE';
    return $manifest;
} );

add_filter( 'web_app_manifest', function( $manifest ) {
    $manifest['theme_color'] = '#4b8cef';
    return $manifest;
} );

add_filter( 'web_app_manifest', function ( $manifest ) {
	$manifest['icons'] = array(
		array(
			'src'     => home_url( '/favicons/android-chrome-192x192.png' ),
			'sizes'   => '192x192',
			'type'    => 'image/png',
			'purpose' => 'any',
		),
		array(
			'src'     => home_url( '/favicons/android-chrome-192x192.png' ),
			'sizes'   => '192x192',
			'type'    => 'image/png',
			'purpose' => 'maskable',
		),
		array(
			'src'     => home_url( '/favicons/android-chrome-512x512.png' ),
			'sizes'   => '512x512',
			'type'    => 'image/png',
			'purpose' => 'any',
		),
		array(
			'src'     => home_url( '/favicons/android-chrome-512x512.png' ),
			'sizes'   => '512x512',
			'type'    => 'image/png',
			'purpose' => 'maskable',
		),
		array(
			'src'     => home_url( '/favicons/favicon.ico' ),
			'sizes'   => '48x48',
			'type'    => 'image/x-icon ',
			'purpose' => 'any',
		),
		array(
			'src'     => home_url( '/favicons/favicon.ico' ),
			'sizes'   => '48x48',
			'type'    => 'image/x-icon ',
			'purpose' => 'maskable',
		),
		array(
			'src'     => home_url( '/favicons/favicon-16x16.png' ),
			'sizes'   => '16x16',
			'type'    => 'image/png',
			'purpose' => 'any',
		),
		array(
			'src'     => home_url( '/favicons/favicon-16x16.png' ),
			'sizes'   => '16x16',
			'type'    => 'image/png',
			'purpose' => 'maskable',
		),
	
		array(
			'src'     => home_url( '/favicons/apple-touch-icon.png' ),
			'sizes'   => '180x180',
			'type'    => 'image/png',
			'purpose' => 'any',
		),
		array(
			'src'     => home_url( '/favicons/apple-touch-icon.png' ),
			'sizes'   => '180x180',
			'type'    => 'image/png',
			'purpose' => 'maskable',
		),
	);
	return $manifest;
} );

add_filter( 'web_app_manifest', function( $manifest ) {
    $manifest['display'] = 'fullscreen';
    return $manifest;
} );

// Register for both the frontend and admin service worker.
add_action( 'wp_front_service_worker', 'register_baz_service_worker_script' );
add_action( 'wp_admin_service_worker', 'register_baz_service_worker_script' );

add_action( 'wp_front_service_worker', function( \WP_Service_Worker_Scripts $scripts ) {
	$scripts->caching_routes()->register(
		'/wp-content/.*\.(?:png|gif|jpg|jpeg|svg|webp)(\?.*)?$',
		array(
			'strategy'  => WP_Service_Worker_Caching_Routes::STRATEGY_NETWORK_FIRST,
			'cacheName' => 'images',
			'plugins'   => array(
				'expiration' => array(
					'maxEntries'    => 60,
					'maxAgeSeconds' => 60 * 60 * 24,
				),
			),
		)
	);
} );

add_action( 'wp_front_service_worker', function( \WP_Service_Worker_Scripts $scripts ) {
	$scripts->precaching_routes()->register(
		'https://www.azbackroads.com/',
		array(
			'revision' => get_bloginfo( 'version' ),
		)
	);
} );

add_action( 'wp_front_service_worker', function( \WP_Service_Worker_Scripts $scripts ) {
	$scripts->precaching_routes()->register(
		'https://www.azbackroads.com/forum/',
		array(
			'revision' => get_bloginfo( 'version' ),
		)
	);
} );

add_action( 'wp_front_service_worker', function( \WP_Service_Worker_Scripts $scripts ) {
	$scripts->precaching_routes()->register(
		'https://www.azbackroads.com/blog/',
		array(
			'revision' => get_bloginfo( 'version' ),
		)
	);
} );

add_action( 'wp_front_service_worker', function( \WP_Service_Worker_Scripts $scripts ) {
	$scripts->precaching_routes()->register(
		'https://www.azbackroads.com/podcast/',
		array(
			'revision' => get_bloginfo( 'version' ),
		)
	);
} );

add_action( 'wp_front_service_worker', function( \WP_Service_Worker_Scripts $scripts ) {
	$scripts->precaching_routes()->register(
		'https://www.azbackroads.com/map/',
		array(
			'revision' => get_bloginfo( 'version' ),
		)
	);
} );

Now for my problem

I would like to implement push notifications to collect subscribers using OneSignal. I have installed the OneSignal plugin as I currently use them on other sites. After doing so, I got errors in dev tools and reached out to OneSignal for a solution. They sent me this document and suggested I add an importScripts() line to merge all service workers into one.

I followed OneSignals instructions and changed both OneSignal service workers with the importScripts() technique. The code I used is below.

OneSignalSDKUpdaterWorker.js.php

<?php
	/**
	 * Note: This file is intended to be publicly accessible.
	 * Reference: https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API/Using_Service_Workers
	 */

	header("Service-Worker-Allowed: /");
	header("Content-Type: application/javascript");
	header("X-Robots-Tag: none");
	if (defined('ONESIGNAL_DEBUG') && defined('ONESIGNAL_LOCAL')) {
		echo "importScripts('https://localhost:3001/dev_sdks/OneSignalSDK.js');";
	} else {		    
		echo "importScripts('https://www.azbackroads.com/pwa/wp-includes/js/service-worker.js');";
		echo "importScripts('https://cdn.onesignal.com/sdks/OneSignalSDKWorker.js');";
	}

OneSignalSDKWorker.js.php

?php
	/**
	 * Note: This file is intended to be publicly accessible.
	 * Reference: https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API/Using_Service_Workers
	 */

	header("Service-Worker-Allowed: /");
	header("Content-Type: application/javascript");
	header("X-Robots-Tag: none");
	if (defined('ONESIGNAL_DEBUG') && defined('ONESIGNAL_LOCAL')) {
		echo "importScripts('https://localhost:3001/dev_sdks/OneSignalSDK.js');";
	} else {
		echo "importScripts('https://www.azbackroads.com/pwa/wp-includes/js/service-worker.js');";
		echo "importScripts('https://cdn.onesignal.com/sdks/OneSignalSDKWorker.js');";
	}

The result is almost what I need. Now, the OneSignal prompt and the PWA prompt appear. However, when the user accepts the OneSignal prompt to subscribe to push, the user is not registered on the OneSignal platform nor do they receive the first “welcome” notification.

It appears something is wrong. Is my code wrong? Did I use the importScripts() wrong?

I would consider other options. The main idea is to allow both PWA install and Push notifications on the same site. If I was able to just provide push to users who install my PWA, or prompt them within the PWA, that would be fine.

I would also be willing to switch to a different push plugin such as Perfectly Push that is fully open-source.

Does anyone have and solutions, advice, suggestions, or be willing to help me find a solution?

Thanks!

The page I need help with: [log in to see the link]