How to successfully deploy a worker so a custom maintenance page appears if the website goes down?

Beeps85 · 2025-01-26T23:35:16.364Z

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?

W

Walshy•1/26/25, 11:37 PM

HTTP trigger, workers route over <domain>/*

worker code would fetch site, if bad error code serve a HTML page

W

Walshy•1/26/25, 11:37 PM

But I'd recommend Snippets so it's free - they're ideal for this kinda use case.

W

Walshy•1/26/25, 11:37 PM

Same code for that and trigger is the same just as a rule

WWalshy But I'd recommend Snippets so it's free - they're ideal for this kinda use case.

M

Mech•1/27/25, 8:30 AM

If you:

have pro
- have a maintenance page which is under 32KB (with the rest of the snippet logic)
- redirect

B

Beeps85OP•1/27/25, 4:00 PM

@Walshy | Workers/Pages Would this be correct? Is there any additional step I have to do to ensure it's enabled?

B

Beeps85OP•1/27/25, 4:01 PM

My failure mode is Fail closed (block)

W

Walshy•1/27/25, 5:11 PM

Nope that's fine but you probably don't want to restrict to HTTP

W

Walshy•1/27/25, 5:11 PM

I'd hope your traffic isn't HTTP haha

W

Walshy•1/27/25, 5:12 PM

You can just remove the

http://

http://

http://

http:// to make it handle both HTTP/HTTPS

B

Beeps85OP•1/27/25, 5:40 PM

I did this, and now the site goes the custom page, even though the site isn't down

W

Walshy•1/27/25, 5:40 PM

what's your code?

B

Beeps85OP•1/27/25, 5:41 PM

If I use the www protocol it doesn't, but http://dkcustomproducts.com yes

B

Beeps85OP•1/27/25, 5:41 PM

I'm going to remove it for now

B

Beeps85OP•1/27/25, 5:42 PM

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") 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 =

${VALID_AUTH}; Path=/;

${VALID_AUTH}; Path=/;

${VALID_AUTH}; Path=/;

${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>


  <!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>


  <!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>


  <!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>

;

W

Walshy•1/27/25, 5:44 PM

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.

W

Walshy•1/27/25, 5:44 PM

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

B

Beeps85OP•1/27/25, 5:45 PM

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?

W

Walshy•1/27/25, 5:47 PM

something simple like this would do it

export default {
  fetch(req) {
    const res = await fetch(req);

    if (res.status >= 500) {
      return new Response(maintenancePageHtml);
    }

    return res;
  }
}

export default {
  fetch(req) {
    const res = await fetch(req);

    if (res.status >= 500) {
      return new Response(maintenancePageHtml);
    }

    return res;
  }
}

export default {
  fetch(req) {
    const res = await fetch(req);

    if (res.status >= 500) {
      return new Response(maintenancePageHtml);
    }

    return res;
  }
}

export default {
  fetch(req) {
    const res = await fetch(req);

    if (res.status >= 500) {
      return new Response(maintenancePageHtml);
    }

    return res;
  }
}

B

Beeps85OP•1/27/25, 5:51 PM

What would this replace in the code I provided?

W

Walshy•1/27/25, 5:59 PM

everything except the variable at the end

B

Beeps85OP•1/27/25, 6:02 PM

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>


  <!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>


  <!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>


  <!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>

;'''

B

Beeps85OP•1/27/25, 6:03 PM

and it's giving an error

B

Beeps85OP•1/27/25, 6:03 PM

B

Beeps85OP•1/27/25, 6:03 PM

W

Walshy•1/27/25, 6:06 PM

async fetch(req)

async fetch(req)

async fetch(req)

async fetch(req)

B

Beeps85OP•1/27/25, 6:08 PM

B

Beeps85OP•1/27/25, 6:09 PM

B

Beeps85OP•1/27/25, 6:09 PM

W

Walshy•1/27/25, 6:09 PM

no change the func to async

W

Walshy•1/27/25, 6:09 PM

leave that as

await fetch

await fetch

await fetch

await fetch

B

Beeps85OP•1/27/25, 6:13 PM

B

Beeps85OP•1/27/25, 6:16 PM

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)

B

Beeps85OP•1/27/25, 7:53 PM

Is it possible there was something in the original code I had that would display this page correctly?

B

Beeps85OP•1/28/25, 5:08 PM

Or even just a generic page ... what I have now is pretty basic, so it doesn't really matter

How to successfully deploy a worker so a custom maintenance page appears if the website goes down?

Similar Threads

Similar Threads

Similar Threads