Headless integration (nuxt)

[wirsindplural]

Hey @rwngallego – first of all: thank you for all the effort you put into this!

I was wondering if there's a chance to get your Plugin working on a headless WP setup. My guess was to just include [my-headless-wp-instance]/service-worker-loader.js.php in a script tag on my nuxt page. But it didn't work as intended.

Has anyone already hat this setup / issue?

Thanks in advance, Tobi

[rwngallego]

Hi @wirsindplural

I don't know the exact details but as a general rule, you will need to only include the CSS/JS scripts and the array options:

• HTML Head (use the equivalent WordPress site_url()/home_url() functions to get the correct URL):

<link rel='stylesheet' id='perfecty-push-css'  href='https://localhost/wp-content/plugins/perfecty-push-notifications/public/css/perfecty-push-public.css?ver=1.6.1' media='all' />

• HTML Body:

One thing to consider is how to pass the WP options values to the JS options array in the frontend, the values below are sample values and should not be used, please inject the ones you have in WordPress through the option functions as in https://github.com/perfectyorg/perfecty-push-wp/blob/master/public/partials/perfecty-push-public-head.php:

<script>
window.PerfectyPushOptions = {
	path: "https://localhost/wp-content/plugins/perfecty-push-wp/public/js",
	dialogTitle: "Do you want to receive notifications?",
	dialogSubmit: "Continue",
	dialogCancel: "Not now",
	settingsTitle: "Notifications preferences",
	settingsOptIn: "I want to receive notifications",
	settingsUpdateError: "Could not change the preference, try again",
	serverUrl: "https://localhost/index.php?rest_route=/perfecty-push",
	siteId: "00000000-0000-0000-0000-000000000000",
	vapidPublicKey: "BJY34v5BCMST8_ZaY",
	token: "0efcac832d",
	tokenHeader: "X-WP-Nonce",
	enabled: true,
	unregisterConflicts: false,
	serviceWorkerScope: "/perfecty/push",
	loggerLevel: "debug",
	loggerVerbose: true,
	hideBellAfterSubscribe: false,
	askPermissionsDirectly: false,
	unregisterConflictsExpression: "(OneSignalSDKWorker|wonderpush-worker-loader|webpushr-sw|subscribers-com\/firebase-messaging-sw|gravitec-net-web-push-notifications|push_notification_sw)",
	promptIconUrl: "",
	visitsToDisplayPrompt: 0
}
</script>

• At the end of the HTML Body (use the equivalent WordPress site_url()/home_url() functions to get the correct URL):

<script src='https://localhost/wp-content/plugins/perfecty-push-notifications/public/js/perfecty-push-sdk/dist/perfecty-push-sdk.min.js?ver=1.6.1' id='perfecty-push-js'></script>

[wirsindplural]

Hey! Thanks for your help and suggestions – I think(!) it's gonna work; due to my current testing setup, I got a cross origin issue. I gonna come back when we go-live at the beginning of may to give everyone an update on this.

[rwngallego]

@wirsindplural have you got any luck with this?

[wirsindplural]

Good morning @rwngallego (at least here in Austria ;) I'm still waiting for the go-live to not run into cross origin issues. As for now it'd be around May 10th. Gonna keep you updated!

[wirsindplural]

Hey @rwngallego – we've just went live but we still get a cross origin error; I expected that subdomains won't be an issue, but they are » our Wordpress is installed on service.domain.com; Website runs on www.domain.com;

As I'm pretty new to service workers, I don't know which files ich need to move to www.domain.com to fix my cross-origin issues; and which lines of code will break, due to relative paths etc.

If you have any hints to get this working, please let me know. Cheers, Tobi