Auto-refresh maintenance mode screen

  • Resolved Paddy Landau

    (@paddy-landau)


    4 years, 11 months ago

    While WordPress updates a theme, a plugin or its core, it conveniently displays a message to any visitor:

    Briefly unavailable for maintenance. Check back in a minute.

    Unfortunately, when presented with such a bland screen, most visitors will immediately leave and find a different website.

    If the visitor hasn’t disabled Javascript in his browser, it would be most helpful to make this a little more informative and add some automation:

    Briefly unavailable for maintenance.
    This page will automatically load when it is available.

    Have the webpage automatically refresh the page every (say) 10 seconds.

    Obviously, if the user has disabled Javascript, you can only display the brief message.

    Solution

    I’m not really a programmer, but I’ve taken the default WordPress method and modified it to do just this — see the code below. You are welcome to use it as is, or to use the ideas and code within, to implement this feature automatically. (All that I did was to add a script section and modify the body section.)

    Anyone reading this who wants to implement this manually can create a file /wp-content/maintenance.php and copy the code below into it.
    Note: I’m not a programmer, so I can’t promise that this is error-free, sorry.
    Note: If you already have a file /wp-content/maintenance.php, please ensure that you can safely modify or overwrite it before implementing this.
    Note: To test this, create a file in your root folder called .maintenance, and insert the code:

    <?php
	$upgrading = time();
?>

    Delete the file .maintenance to return your site to normal.

    There is one problem with what I’ve done, and that is the lack of translation for other languages. I don’t know how to cater for that.

    Thank you ??

    Here are the contents of my revised /wp-content/maintenance.php file.

    <!DOCTYPE html>
<html xmlns="https://www.w3.org/1999/xhtml" dir='ltr'>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<meta name="viewport" content="width=device-width">
			<title>Maintenance</title>
	<style type="text/css">
		html {
			background: #f1f1f1;
		}
		body {
			background: #fff;
			color: #444;
			font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
			margin: 2em auto;
			padding: 1em 2em;
			max-width: 700px;
			-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.13);
			box-shadow: 0 1px 3px rgba(0, 0, 0, 0.13);
		}
		h1 {
			border-bottom: 1px solid #dadada;
			clear: both;
			color: #666;
			font-size: 24px;
			margin: 30px 0 0 0;
			padding: 0;
			padding-bottom: 7px;
		}
		#error-page {
			margin-top: 50px;
		}
		#error-page p,
		#error-page .wp-die-message {
			font-size: 14px;
			line-height: 1.5;
			margin: 25px 0 20px;
		}
		#error-page code {
			font-family: Consolas, Monaco, monospace;
		}
		ul li {
			margin-bottom: 10px;
			font-size: 14px ;
		}
		a {
			color: #0073aa;
		}
		a:hover,
		a:active {
			color: #00a0d2;
		}
		a:focus {
			color: #124964;
			-webkit-box-shadow:
				0 0 0 1px #5b9dd9,
				0 0 2px 1px rgba(30, 140, 190, 0.8);
			box-shadow:
				0 0 0 1px #5b9dd9,
				0 0 2px 1px rgba(30, 140, 190, 0.8);
			outline: none;
		}
		.button {
			background: #f7f7f7;
			border: 1px solid #ccc;
			color: #555;
			display: inline-block;
			text-decoration: none;
			font-size: 13px;
			line-height: 2;
			height: 28px;
			margin: 0;
			padding: 0 10px 1px;
			cursor: pointer;
			-webkit-border-radius: 3px;
			-webkit-appearance: none;
			border-radius: 3px;
			white-space: nowrap;
			-webkit-box-sizing: border-box;
			-moz-box-sizing:    border-box;
			box-sizing:         border-box;

			-webkit-box-shadow: 0 1px 0 #ccc;
			box-shadow: 0 1px 0 #ccc;
			vertical-align: top;
		}

		.button.button-large {
			height: 30px;
			line-height: 2.15384615;
			padding: 0 12px 2px;
		}

		.button:hover,
		.button:focus {
			background: #fafafa;
			border-color: #999;
			color: #23282d;
		}

		.button:focus {
			border-color: #5b9dd9;
			-webkit-box-shadow: 0 0 3px rgba(0, 115, 170, 0.8);
			box-shadow: 0 0 3px rgba(0, 115, 170, 0.8);
			outline: none;
		}

		.button:active {
			background: #eee;
			border-color: #999;
			-webkit-box-shadow: inset 0 2px 5px -3px rgba(0, 0, 0, 0.5);
			box-shadow: inset 0 2px 5px -3px rgba(0, 0, 0, 0.5);
		}

			</style>

	<script type='text/javascript'>
		// Return "sleep for a while".
		function sleep(ms)
		{
			return new Promise(resolve => setTimeout(resolve, ms));
		}

		// Sleep before doing refreshing.
		async function refreshAfterPause()
		{
			await sleep(100);			// Pause to allow the page to fully load.

			// Fill the relevant prompts, only if Javascript is enabled.
			document.getElementById('reload').innerHTML = 'This page will automatically reload when it is available.';
			document.getElementById('refresh').innerHTML = 'Waiting&hellip;';

			await sleep(5000);			// Wait 5 seconds.

			// Show that I'm about to check.
			document.getElementById('refresh').innerHTML = 'Checking&hellip;';

			await sleep(5000);			// Wait another 5 seconds.
			window.location.reload(true);		// Reload the page, not from the cache.
		}

		refreshAfterPause();				// Refresh the screen after a pause.
	</script>
</head>
<body id="error-page">
	<div class="wp-die-message">
		<p>Sorry&hellip; Briefly unavailable for scheduled maintenance.</p>
		<p id="reload">Please try again in a minute.</p>
		<p>Thank you for your patience.</p>
		<p id="refresh"></p>
	</div>
</body>
</html>
    • This topic was modified 4 years, 11 months ago by Paddy Landau.
    • This topic was modified 4 years, 11 months ago by Paddy Landau.
Viewing 2 replies - 1 through 2 (of 2 total)
Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Auto-refresh maintenance mode screen’ is closed to new replies.