How to successfully deploy a worker so a custom maintenance page appears if the website goes down?
I've created a Worker to employ on a site if it goes down during a server maintenance. What domains & routes and/or trigger events would I have to set up at this point to ensure this is what would appear if the site goes down?
23 Replies
HTTP trigger, workers route over <domain>/*
worker code would fetch site, if bad error code serve a HTML page
But I'd recommend Snippets so it's free - they're ideal for this kinda use case.
Same code for that and trigger is the same just as a rule
If you:
- have pro
- have a maintenance page which is under 32KB (with the rest of the snippet logic)
- redirect
@Walshy | Workers/Pages Would this be correct? Is there any additional step I have to do to ensure it's enabled?
My failure mode is Fail closed (block)
Nope that's fine but you probably don't want to restrict to HTTP
I'd hope your traffic isn't HTTP haha
You can just remove the
http:// to make it handle both HTTP/HTTPSI did this, and now the site goes the custom page, even though the site isn't down
what's your code?
If I use the www protocol it doesn't, but http://dkcustomproducts.com yes
I'm going to remove it for now
const AUTH_KEY = "4dfgdgdgfdfgdn"
const AUTH_VALUE = "234242DFSAASD5432234423t5th"
const VALID_AUTH = AUTH_KEY + "=" + AUTH_VALUE;
addEventListener("fetch", event => {
event.respondWith(handle(event.request))
})
async function handle(request) {
const cookies = request.headers.get("Cookie") "";
// Check for cookie or token in url
if (cookies.includes(VALID_AUTH) request.url.includes(VALID_AUTH)) {
// User has a valid token, so show the original page
const originalResponse = await fetch(request);
const response = new Response(originalResponse.body, originalResponse);
// Store token in cookie if not included already
if (!cookies.includes(VALID_AUTH)) {
const tokenCookie =
return new Response(maintenancePageHtml, { headers: modifiedHeaders, status: 503, statusText: "Service Unavailable" }); } } const maintenancePageHtml =
${VALID_AUTH}; Path=/;;
response.headers.set('Set-Cookie', tokenCookie);
}
return response;
} else {
// User should see the maintenance site
const modifiedHeaders = new Headers();
modifiedHeaders.set('Content-Type', 'text/html');
modifiedHeaders.append('Pragma', 'no-cache');
return new Response(maintenancePageHtml, { headers: modifiedHeaders, status: 503, statusText: "Service Unavailable" }); } } const maintenancePageHtml =
<!DOCTYPE html>
<html lang="en" style="">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Under Maintenance</title>
<meta name="MSSmartTagsPreventParsing" content="true">
<meta http-equiv="imagetoolbar" content="false">
<meta name="robots" content="nocache">
<meta name="robots" content="noindex,nofollow">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body style="height: 100vh; width: 100vw; display: flex; justify-content: center; align-items: center">
<h1>Under Maintenance!
<p>Check back in an hour</h1></p>
</body>
</html>
;might want to remove that auth stuff but either way, this will serve the page if there's no cookie. I assume you just don't have a cookie.
If you want to serve the page when the site is down you wouldn't want to look for a cookie, you'd want to check the response status
It was a maintenance code page I found doing a search for this; I'm not exactly the world's greatest developer so this is a bit of an unknown for me. Is there a generic template to use in this instance?
something simple like this would do it
What would this replace in the code I provided?
everything except the variable at the end
I'm using this
export default {
fetch(req) {
const res = await fetch(req);
if (res.status >= 500) {
return new Response(maintenancePageHtml);
}
return res;
}
}
const maintenancePageHtml =
<!DOCTYPE html>
<html lang="en" style="">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Under Maintenance</title>
<meta name="MSSmartTagsPreventParsing" content="true">
<meta http-equiv="imagetoolbar" content="false">
<meta name="robots" content="nocache">
<meta name="robots" content="noindex,nofollow">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body style="height: 100vh; width: 100vw; display: flex; justify-content: center; align-items: center">
<h1>Under Maintenance!
<p>Check back in an hour</h1></p>
</body>
</html>
;'''
and it's giving an error
async fetch(req)
no change the func to async
leave that as
await fetch
This doesn't return any errors now. However, if I preview the worker, the bare bones page doesn't appear(it says nothing is here yet)
Is it possible there was something in the original code I had that would display this page correctly?
Or even just a generic page ... what I have now is pretty basic, so it doesn't really matter