Add page reloading in offline.php templates

wp-includes/template.php

@@ -171,3 +171,47 @@ function wp_service_worker_error_details_template( $output = '' ) {
 function wp_service_worker_error_message_placeholder() {
 	echo '<p><!--WP_SERVICE_WORKER_ERROR_MESSAGE--></p>';
 }
+
+/**
+ * Reload the offline page and check if user comes online.
+ *
+ * @since 0.7
+ */
+function wp_service_worker_offline_page_reload() {
+	if ( ! is_offline() ) {
+		return;
+	}
+	?>
+	<script>
+		/**
+		 * Listen to changes in the network state, reload when online.
+		 * This handles the case when the device is completely offline.
+		 */
+		window.addEventListener('online', () => {
+			window.location.reload();
+		});
+
+		/**
+		 * Check if the server is responding and reload the page if it is.
+		 * This handles the case when the device is online, but the server is offline or misbehaving.
+		 */
+		async function checkNetworkAndReload() {
+			try {
+				const response = await fetch('.', {method: 'HEAD'});
+				// Verify we get a valid response from the server
+				if (response.status >= 200 && response.status < 500) {
+					window.location.reload();
+					return;
+				}
+			} catch {
+				console.log('User is offline');
+			}
+			window.setTimeout(checkNetworkAndReload, 2500);
+		}
+		checkNetworkAndReload();
+	</script>
+	<?php
+}
+
+add_action( 'wp_footer', 'wp_service_worker_offline_page_reload' );
+add_action( 'error_footer', 'wp_service_worker_offline_page_reload' );