Error template placeholder HTML comments can be stripped out by minifiers

[westonruter]

As mentioned by @stack-exchange in a gist comment:

Placeholder comment inserted by wp_service_worker_error_message_placeholder() get stripped by AMP plugin.

The issue is the AMP Optimizer's MinifyHtml transformer which strips out HTML comments. This will also be an issue with other optimization plugins. Therefore, instead of wp_service_worker_error_message_placeholder() and wp_service_worker_error_details_template() outputting HTML comments, they should instead output HTML elements, identified by an ID.

pwa-wp/wp-includes/template.php

Lines 168 to 173 in a1f9125

	/**
	* Display service worker error message template tag.
	*/
	function wp_service_worker_error_message_placeholder() {
	echo '<p><!--WP_SERVICE_WORKER_ERROR_MESSAGE--></p>';
	}

pwa-wp/wp-includes/template.php

Lines 154 to 166 in a1f9125

	/**
	* Display service worker error details template.
	*
	* @param string $output Error details template output.
	*/
	function wp_service_worker_error_details_template( $output = '' ) {
	if ( empty( $output ) ) {
	$output = '<details id="error-details"><summary>' . esc_html__( 'More Details', 'pwa' ) . '</summary>{{{error_details_iframe}}}</details>'; // phpcs:ignore WordPressVIPMinimum.Security.Mustache.OutputNotation -- Variable includes iframe tag.
	}
	echo '<!--WP_SERVICE_WORKER_ERROR_TEMPLATE_BEGIN-->';
	echo wp_kses_post( $output );
	echo '<!--WP_SERVICE_WORKER_ERROR_TEMPLATE_END-->';
	}

Note this will make the regex a bit more complicated here:

pwa-wp/wp-includes/js/service-worker-navigation-routing.js

Line 75 in d415cb2

/([<]!--WP_SERVICE_WORKER_ERROR_TEMPLATE_BEGIN-->)((?:.|\n)+?)([<]!--WP_SERVICE_WORKER_ERROR_TEMPLATE_END-->)/,

[thelovekesh]

@westonruter I was working upon this and tried the following idea:
For error message

function wp_service_worker_error_message_placeholder() {
	// echo '<p><!--WP_SERVICE_WORKER_ERROR_MESSAGE--></p>';
	echo '<p><span id="wp-service-worker-error-message"></span></p>';
}

and replace whole span element with following reges

/[<]span id="wp-service-worker-error-message">(\s)*[<]\/span>/

For error message details:

function wp_service_worker_error_details_template( $output = '' ) {
	if ( empty( $output ) ) {
		$output = '<details id="error-details"><summary>' . esc_html__( 'More Details', 'pwa' ) . '</summary>{{{error_details_iframe}}}</details>'; // phpcs:ignore WordPressVIPMinimum.Security.Mustache.OutputNotation -- Variable includes iframe tag.
	}
	// echo '<!--WP_SERVICE_WORKER_ERROR_TEMPLATE_BEGIN-->';
	echo '<span id="wp-service-worker-error-template-begin"></span>';
	echo wp_kses_post( $output );
	// echo '<!--WP_SERVICE_WORKER_ERROR_TEMPLATE_END-->';
	echo '<span id="wp-service-worker-error-template-end"></span>';
}

and replace whole span element with following reges

/([<]span id="wp-service-worker-error-template-begin">(\s)*[<]\/span>)((?:.|\n)+?)([<]span id="wp-service-worker-error-template-end">(\s)*[<]\/span>)/

If you some another ideas please share and let me know your thoughts on the above method if it can work in our current scenerio.

[westonruter]

I just realized that we're using Mustache-like tokens in wp_service_worker_error_details_template() already (e.g. {{{error_details_iframe}}}). So what if we actually use Mustache tokens instead of HTML comments and instead of “milestone” HTML tags?

So that could be:

function wp_service_worker_error_message_placeholder() {
	echo '<p>{{{WP_SERVICE_WORKER_ERROR_MESSAGE}}}</p>';
}

And:

function wp_service_worker_error_details_template( $output = '' ) {
	if ( empty( $output ) ) {
		$output = '<details id="error-details"><summary>' . esc_html__( 'More Details', 'pwa' ) . '</summary>{{{error_details_iframe}}}</details>'; // phpcs:ignore WordPressVIPMinimum.Security.Mustache.OutputNotation -- Variable includes iframe tag.
	}
	echo '{{{WP_SERVICE_WORKER_ERROR_TEMPLATE_BEGIN}}}';
	echo wp_kses_post( $output );
	echo '{{{WP_SERVICE_WORKER_ERROR_TEMPLATE_END}}}';
}

[thelovekesh]

I found moustache template tokens more suitable in our use case. So using mustache- tokens at the place of HTML tags.

[pooja-muchandikar]

QA Passed ✅

Offline pages are rendered with proper as expected messages

---