[wp-trac] [WordPress Trac] #48937: Auto-refresh maintenance mode screen
WordPress Trac
noreply at wordpress.org
Wed Dec 11 15:35:48 UTC 2019
#48937: Auto-refresh maintenance mode screen
-----------------------------+-----------------------------
Reporter: Paddy Landau | Owner: (none)
Type: enhancement | Status: new
Priority: normal | Milestone: Awaiting Review
Component: Upgrade/Install | Version: 5.3
Severity: normal | Keywords:
Focuses: ui |
-----------------------------+-----------------------------
''I [https://wordpress.org/support/topic/feature-request-with-solution-
auto-refresh-maintenance-mode-screen/ already posted this] on the
community forums, and was advised to post here instead.''
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 below. You are welcome to use it as
is, or to use the ideas and code within, to implement this feature
automatically. I have tested this and it seems to work perfectly. A
programmer might find a better way to implement it than I have done.
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
= Revised contents
I took the file /wp-content/maintenance.php and modified it as follows.
All that I did was to add a <script> section and modify the <div> section
within the <body>. I changed nothing else.
{{{
<!DOCTYPE html>
<html xmlns="http://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…';
await sleep(5000); // Wait 5
seconds.
// Show that I'm about to check.
document.getElementById('refresh').innerHTML =
'Checking…';
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… 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>
}}}
--
Ticket URL: <https://core.trac.wordpress.org/ticket/48937>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform
More information about the wp-trac
mailing list