Remove offline commenting feature and add post request handler to display offline/error templates.

.jshintignore

@@ -1,4 +1,4 @@
 wp-includes/js/service-worker.js
 wp-includes/js/service-worker-navigation-routing.js
 wp-includes/js/service-worker-precaching.js
-wp-includes/js/service-worker-offline-commenting.js
+wp-includes/js/service-worker-offline-post-request-handling.js

wp-includes/components/class-wp-service-worker-navigation-routing-component.php

@@ -297,9 +297,9 @@ public function serve( WP_Service_Worker_Scripts $scripts ) {
 		}
 
 		$scripts->register(
-			'wp-offline-commenting',
+			'wp-offline-post-request-handling',
 			array(
-				'src'  => array( $this, 'get_offline_commenting_script' ),
+				'src'  => array( $this, 'get_offline_post_request_script' ),
 				'deps' => array( 'wp-base-config' ),
 			)
 		);
@@ -308,7 +308,7 @@ public function serve( WP_Service_Worker_Scripts $scripts ) {
 			'wp-navigation-routing',
 			array(
 				'src'  => array( $this, 'get_script' ),
-				'deps' => array( 'wp-base-config', 'wp-offline-commenting' ),
+				'deps' => array( 'wp-base-config', 'wp-offline-post-request-handling' ),
 			)
 		);
 
@@ -466,12 +466,12 @@ public function get_script() {
 	}
 
 	/**
-	 * Get script for offline commenting requests.
+	 * Get script for offline post requests.
 	 *
 	 * @return string Script.
 	 */
-	public function get_offline_commenting_script() {
-		$script = file_get_contents( PWA_PLUGIN_DIR . '/wp-includes/js/service-worker-offline-commenting.js' ); // phpcs:ignore WordPress.WP.AlternativeFunctions.file_get_contents_file_get_contents
+	public function get_offline_post_request_script() {
+		$script = file_get_contents( PWA_PLUGIN_DIR . '/wp-includes/js/service-worker-offline-post-request-handling.js' ); // phpcs:ignore WordPress.WP.AlternativeFunctions.file_get_contents_file_get_contents
 		$script = preg_replace( '#/\*\s*global.+?\*/#', '', $script );
 
 		return str_replace(

wp-includes/js/service-worker-offline-commenting.js → wp-includes/js/service-worker-offline-post-request-handling.js

@@ -2,13 +2,9 @@
 
 // IIFE is used for lexical scoping instead of just a braces block due to bug with const in Safari.
 (() => {
-	const queue = new wp.serviceWorker.backgroundSync.Queue(
-		'wpPendingComments'
-	);
 	const errorMessages = ERROR_MESSAGES;
 
-	const commentHandler = ({ event }) => {
-		const clone = event.request.clone();
+	const offlinePostRequestHandler = ({ event }) => {
 		return fetch(event.request)
 			.then((response) => {
 				if (response.status < 500) {
@@ -34,13 +30,12 @@
 									statusText: errorResponse.statusText,
 									headers: errorResponse.headers,
 								};
-
 								let body = text.replace(
 									'{{{WP_SERVICE_WORKER_ERROR_MESSAGE}}}',
-									errorMessages.error
+									`${errorMessages.error} <strong>${errorMessages.submissionFailure}</strong>`
 								);
 								body = body.replace(
-									/([<]!--WP_SERVICE_WORKER_ERROR_TEMPLATE_BEGIN-->)((?:.|\n)+?)([<]!--WP_SERVICE_WORKER_ERROR_TEMPLATE_END-->)/,
+									/({{{WP_SERVICE_WORKER_ERROR_TEMPLATE_BEGIN}}})((?:.|\n)+?)({{{WP_SERVICE_WORKER_ERROR_TEMPLATE_END}}})/,
 									(details) => {
 										if (!errorText) {
 											return ''; // Remove the details from the document entirely.
@@ -71,13 +66,11 @@
 
 										// Replace the comments.
 										details = details.replace(
-											'<' +
-												'!--WP_SERVICE_WORKER_ERROR_TEMPLATE_BEGIN-->',
+											'{{{WP_SERVICE_WORKER_ERROR_TEMPLATE_BEGIN}}}',
 											''
 										);
 										details = details.replace(
-											'<' +
-												'!--WP_SERVICE_WORKER_ERROR_TEMPLATE_END-->',
+											'{{{WP_SERVICE_WORKER_ERROR_TEMPLATE_END}}}',
 											''
 										);
 										return details;
@@ -90,25 +83,6 @@
 				});
 			})
 			.catch(() => {
-				const bodyPromise = clone.blob();
-				bodyPromise.then(function (body) {
-					const request = event.request;
-					const req = new Request(request.url, {
-						method: request.method,
-						headers: request.headers,
-						mode: 'same-origin',
-						credentials: request.credentials,
-						referrer: request.referrer,
-						redirect: 'manual',
-						body,
-					});
-
-					// Add request to queue.
-					queue.pushRequest({
-						request: req,
-					});
-				});
-
 				// @todo This is duplicated with code in service-worker-navigation-routing.js.
 				return caches
 					.match(
@@ -124,9 +98,13 @@
 								headers: response.headers,
 							};
 
+							const connectionMessage = navigator.onLine
+								? errorMessages.serverOffline
+								: errorMessages.clientOffline;
+
 							const body = text.replace(
 								'{{{WP_SERVICE_WORKER_ERROR_MESSAGE}}}',
-								errorMessages.comment
+								`${connectionMessage} <strong>${errorMessages.submissionFailure}</strong>`
 							);
 
 							return new Response(body, init);
@@ -136,8 +114,8 @@
 	};
 
 	wp.serviceWorker.routing.registerRoute(
-		/\/wp-comments-post\.php$/,
-		commentHandler,
+		/.*/,
+		offlinePostRequestHandler,
 		'POST'
 	);
 })();

wp-includes/template.php

@@ -143,10 +143,10 @@ function wp_service_worker_get_error_messages() {
 	return apply_filters(
 		'wp_service_worker_error_messages',
 		array(
-			'clientOffline' => __( 'It seems you are offline. Please check your internet connection and try again.', 'pwa' ),
-			'serverOffline' => __( 'The server appears to be down, or your connection isn\'t working as expected. Please try again later.', 'pwa' ),
-			'error'         => __( 'Something prevented the page from being rendered. Please try again.', 'pwa' ),
-			'comment'       => __( 'Your comment will be submitted once you are back online!', 'pwa' ),
+			'clientOffline'     => __( 'It seems you are offline. Please check your internet connection and try again.', 'pwa' ),
+			'serverOffline'     => __( 'The server appears to be down, or your connection isn\'t working as expected. Please try again later.', 'pwa' ),
+			'error'             => __( 'Something prevented the page from being rendered. Please try again.', 'pwa' ),
+			'submissionFailure' => __( 'Your submission failed. Please go back and try again.', 'pwa' ),
 		)
 	);
 }