• Resolved azbce

    (@azbce)


    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]

Viewing 10 replies - 1 through 10 (of 10 total)
  • I am also interested in this issue. But I did not understand what was given in the codes you presented. What is it for:
    add_action( 'wp_front_service_worker', function( \WP_Service_Worker_Scripts $scripts )....

    Please enlighten me.

    • This reply was modified 3 years, 5 months ago by Halil ESEN.
    Thread Starter azbce

    (@azbce)

    So I rechecked my work and found a problem with my code. I was referencing the wrong path to the PWA service worker. Once fixing the issue, it now works great.

    In the end, the solution was to add importScripts(path to PWA WP service worker) to both OneSignal service worker files to merge them together. I followed the OneSignal documentation linked in my original post.

    It works flawlessly with OneSignal.

    I will be experimenting with the Perfectly Push plugin because it’s open-source and appears similar to OneSignal code. I believe the same technique will work.

    Thanks for your reply, and thanks for your work on this plugin.

    Plugin Author Weston Ruter

    (@westonruter)

    @azbce So did you do something like this:

    add_action( 'wp_front_service_worker', function( \WP_Service_Worker_Scripts $scripts ) {
    	$scripts->register(
    		'onesignal',
    		array(
    			'src' => function () {
    				return 'importScripts( /* path to PWA WP service worker */ );';
    			},
    		)
    	);
    } );
    Thread Starter azbce

    (@azbce)

    Nope, I edited both of the OneSignal sdk files to add the echo "importScripts('Path to PWA WP service worker');";
    like so:

    <?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('Path to PWA service worker');";
    		echo "importScripts('https://cdn.onesignal.com/sdks/OneSignalSDKWorker.js');";
    	}

    Works great!

    • This reply was modified 3 years, 5 months ago by azbce.
    Thread Starter azbce

    (@azbce)

    I must mention, I’m using the OneSignal plugin. On the OneSignal setup, you need to make sure it’s set up for WordPress.

    Plugin Author Weston Ruter

    (@westonruter)

    But the result is that two service workers are being installed, right? Only one is able to control the page at a time. So you may be getting push notifications but the the service worker features of this plugin may be getting suppressed.

    Thread Starter azbce

    (@azbce)

    According to OneSignal, it merges the service workers into one. The applications tab on dev tools shows that the PWA WP service workers are registered.

    OneSignal claims that their service worker is designed to override any other service worker on the site, and this is the solution to merge them.

    I’m an amateur with js, so I honestly don’t know if there are any conflicts between service workers. No errors are popping up on dev tools.

    • This reply was modified 3 years, 5 months ago by azbce.
    Plugin Author Weston Ruter

    (@westonruter)

    I’m not entirely sure what you modified exactly as I don’t see any service worker being installed other than the one from the PWA plugin, but refer to this tweet from OneSignal: https://twitter.com/jordanmadler/status/1347599284070322177

    See also the corresponding issue on GitHub: https://github.com/OneSignal/OneSignal-Website-SDK/issues/615

    I am so sorry. I could not fully understand. Now it is necessary to integrate the Onesignal service employee with the PWA service employee. But how and which codes should be added where? Could your please explain?

    Plugin Author Weston Ruter

    (@westonruter)

    I believe we are waiting on OneSignal to solve this issue: https://github.com/OneSignal/OneSignal-Website-SDK/issues/615

Viewing 10 replies - 1 through 10 (of 10 total)
  • The topic ‘Integrating push notifications’ is closed to new replies.